如何在 Django 模板系统中显示图像表？答案

【问题标题】：How to display a table of images in Django template system?如何在 Django 模板系统中显示图像表？
【发布时间】：2010-08-23 02:55:02
【问题描述】：

我正在开发一个基于 Django 的网站来玩，想知道是否有人知道如何解决这个问题。我想在模板内的表格（如画廊）中显示图像。有谁知道如何做到这一点？我已经尝试了一个多维列表，但我一无所获。

【问题讨论】：

标签： python django django-templates

【解决方案1】：

我认为问题与 Django 相比更与 CSS 相关。

你所有的图片都一样大吗？如果是，只需将它们全部浮动并让边界 div 破坏图像。您的模板看起来像这样（忽略内联 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 %}

但是这段代码没有经过测试！我刚写的:)

【讨论】：

我已经在使用HTML表格来显示图像表格，我只需要知道如何获取一个列表并将其变成一个4列宽的表格。

【解决方案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 Doc)，您可以使用类似的东西，

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

【讨论】：

我想你不应该在你只需要改变它的显示方式时重新组织数据，在这种情况下你最好使用CSS。
只是一个简单的问题：我如何在 Django 模板中访问它？
@Dmitry - 确实如此。尽管我认为这种表示形式在可以以正确格式访问的 dict 中更容易处理。
为什么要重新组织数据，因为 Cesar 只问如何显示？

【解决方案3】：

您真的需要使用表格以您需要的方式对齐图像吗？如果你需要得到类似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/

【讨论】：

【解决方案4】：

这是其他人回答的更简单的方法：

目标是在每显示第 4 张图像后创建一个新行。您只需要一个一维列表。

一种选择是在每 4th 之后关闭。您可以使用 forloop.counter 或在创建每个标签后使用 {% cycle '' '' '' '' %} 。注意：我在推测您的 HTML 结构。 {% cycle '' '' '' '' %} 也可以。

cycle 的作用如下：http://docs.djangoproject.com/en/dev/ref/templates/builtins/#cycle

如果您使用向左浮动的 s，请使用相同的 cycle，但在每个 4th 之后添加一个换行符。

【讨论】：