How to display 2 thumbnails of span6 per row in Bootstrap with Django?
django, python, twitter-bootstrap
Solution
Well it could be done by css only, but if you want to use the provided grid, you could create a generator and use it on your view's queryset or directly in a template by using a tag, e.g.
def grouped(l, n):
# Yield successive n-sized chunks from l.
for i in xrange(0, len(l), n):
yield l[i:i+n]
templatetags
@register.filter
def group_by(value, arg):
return grouped(value, arg)
templates
{% for group in objects|group_by:2 %}
<div class="row">
{% for obj in group %}
<div class="span6">
foo
</div>
{% endfor %}
</div>
{% endfor %}
Problem
I would like to display 2 thumbnails per row. It would be pretty trivial to just hard-code it using multiple rows and each row has 2 `span6` div's. But how would I do this in Django using a template for-loop? Example: ``` {% for image in images %} <div class="row"> <div class="span6">*image goes here*</div> <div class="span6">*image goes here*</div> </div> {% endfor %} // repeat for all items in the list, with 2 images per row ``` So, in the code above `span6` should be created on every loop iteration, but the `row` should be created only every 2 iterations. update: I was able to span all my `span6` elements inside a single row. I encountered an issue where thumbnails wouldn't align properly (empty spaces between rows). Setting all thumbnails to a uniform height fixed the problem. But Hedde's solution looks pretty good too, although that involves changing things on the Python side.