How to display a table of images in Django template system?

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

Why don't you use a dictionary? Then you could represent points (0,0), (1,1), (0,1) etc with something like this,

mydict = {0: [0, 1, 2],
          1: [0, 1, 2],
          2: [0, 1, 2]}

where the elements of the list are your image names.

{0: ["image1.jpg", "image2.jpg", "image3.jpg"] .. }

In this case, mydict[0][0] refers to the first element of the first row, and so on.

--

To access a dict in the template (Django Doc), you could use something like,

# (key would be 0, value would be a list [0,1,2,3..]
{% for key, value in mydict.items %}
    {% for img in value %}
      <img src="{{img}}">
    {% endfor %} 
{% endfor %}

Answer 2

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 :)

Answer 3

Do you really need to use table to align your images the way you need? If you need to get something like this http://blog.mozilla.com/webdev/files/2009/02/gallery-view.jpg, please take a look at inline-block CSS property. It is supported by all major browsers including IE6+ (with a little fix).

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 4

Here's a much much simpler way that what others have answered:

The goal is to create a new row after each 4th image displayed. A 1 dimensional list is all you need.

One option would be to close the after each 4th . You can use the forloop.counter or you can use {% cycle '' '' '' '' %} after you create each tag. Note: I'm speculating a bit about your HTML structure. {% cycle '' '' '' '' %} might do just as fine.

Here is what cycle does: http://docs.djangoproject.com/en/dev/ref/templates/builtins/#cycle

If you're using s floated to the left, use the same cycle but add a line break after each 4th .