How to display 2 thumbnails of span6 per row in Bootstrap with Django?

Question

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.

Answer 1

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 %}