Question

I’m developing a Django-based site for fun, and wondered if anyone knows how to solve this problem. I want to display images in a table, like a gallery, inside a template. Does anyone know how to do this? I’ve tried a multidimensional list, but I am getting nowhere.

Answer 1

I believe question is more CSS related than Django.

Are all your images the same size? If yes, just float all of them and let the bounding div break the images. Your template would looks like something like this (ignore the inline CSS!):

<div style="width:400px">
{% for image in image_list%}
    <div style="float:left; width:100px; height:100px;">
        {{ image.whatever }}
    </div>
{% endfor%}
</div>

This would give you a “table” with 4 columns.

If your images have different widths and heights, I would go with something like display:inline-block, this article explains how it works:

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Edit If all you want is to convert a list into a table, I guess you can use this template:

{% for image in image_list %}
    {% if forloop.first %}
        <tr>
    {% endif %}

    <td>{{ forloop.counter }} - {{ image }}</td>

    {% if forloop.last %}
        </tr>
    {% else %}
        {% if forloop.counter|divisibleby:"4" %}
            </tr><tr>
        {% endif %}
    {% endif %}
{% endfor %}

But this code is not tested! I just wrote it 🙂