如何在Django模板中显示图像表格？

Question

我正在开发一个基于Django的网站，纯粹是为了好玩。我想知道有没有人知道怎么解决一个问题。我想在模板里以表格的形式展示图片，就像一个画廊一样。有没有人知道该怎么做？我试过用多维列表，但一直没能成功。

Answer 1

你真的需要用表格来对齐你的图片吗？如果你想要像这个样子 http://blog.mozilla.com/webdev/files/2009/02/gallery-view.jpg，那么可以看看 inline-block 这个CSS属性。这个属性在所有主要浏览器上都支持，包括IE6及以上版本（只需稍微调整一下）。

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

Answer 2

你为什么不使用字典呢？这样你就可以用类似下面的方式来表示点 (0,0), (1,1), (0,1) 等等，

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

这里面的元素就是你的图片名称。

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

在这个例子中，mydict[0][0] 指的是第一行的第一个元素，依此类推。

--

在模板中访问字典时（Django 文档），你可以使用类似下面的方式，

# (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 3

我觉得这个问题更像是和CSS有关，而不是Django。

你的所有图片大小一样吗？如果是的话，可以把它们都浮动起来，让外面的框自动调整图片的显示。你的模板可以像这样（忽略里面的CSS！）：

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

这样就能得到一个有4列的“表格”。

如果你的图片宽度和高度不一样，我建议使用 display:inline-block，这篇文章解释了它是怎么工作的：

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

补充 如果你只是想把一个列表转换成表格，我想你可以用这个模板：

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

不过这个代码没有经过测试！我只是随便写的 :)