Как отобразить таблицу изображений в шаблонной системе Django?

Question

Я занимаюсь разработкой сайта на Django для интереса и удивляюсь, если кто-нибудь знает, как решить эту проблему. Я хочу отображать изображения в таблице, например в галерее, внутри шаблона. Кто-нибудь знает как это сделать? Я пробовал многомерный список, но ничего не получилось.

Answer 1

Я считаю, что вопрос больше связан с CSS, чем с Django.

Все ли ваши изображения одинакового размера? Если да, просто поместите их все и позвольте ограничивающему 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 %}

Но этот код не проверен! Я просто написал это:)

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] относится к первому элементу первой строки и т. Д.

-

Доступ к элементу dict в шаблоне ( 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 %}

Answer 3

Вот гораздо более простой способ, чем ответили другие:

Цель состоит в том, чтобы создать новую строку после каждого отображаемого 4-го изображения.Все, что вам нужно - это одномерный список.

Один из вариантов - закрывать после каждого четвертого.Вы можете использовать forloop.counter или {% cycle '' '' '' '%} после создания каждого тега. Примечание : я немного размышляю о вашей HTML-структуре.{% cycle '' '' '' ''%} может сделать то же самое.

Вот что делает цикл : http://docs.djangoproject.com/en/dev/ref/templates/builtins/#cycle

Если выиспользуя s с плавающей точкой слева, используйте тот же цикл , но добавляйте разрыв строки после каждого 4-го числа.

Answer 4

Вам действительно нужно использовать таблицу, чтобы выровнять ваши изображения так, как вам нужно? Если вам нужно получить что-то подобное 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/