DJANGO. Отображение списка в виде "плиток"

Вторник, 22 Апрель 2014 by Kirill Shershen


Нужно было сделать список в виде плиток, а может это как-то по другому называется. Каждая плитка будет содержать картину, заголовок и описание. Количество плиток в ряду будет 5. Тоесть чтобы заполнять строки, нужно возвращать список кортежей элементов по 5 штук, для этого нужно будет сделать 3 операции:

1. отредактировать views.py

2. отредактировать шаблон

3. задать стиль для отображения плиток

Редактируем views.py:

def projects(request):
    projects = Project.objects.all()
    # делаем плитку из массива кортежей по 5 записей
    kort = []
    i = 1
    recs = []
    for rec in projects:
        if i % 5 == 0:
            recs.append(rec)
            kort.append(tuple(recs))
            recs = []
        else:
            recs.append(rec)
            if i == len(projects):
                kort.append(tuple(recs))
        i += 1

    return render(request, 'project_list.html', locals())

теперь в шаблоне project_list.html можно использовать переменную kort. Переменная kort придеставляет собой список состоящий из строк, в которой каждый элемент это набор из 5(в данном случае) плиток.

Редактируем project_list.html:

...
{% for rec1, rec2, rec3, rec4, rec5 in kort %}
    {% if rec1 %}
        <div class="span2">
            <div class="box-2 img-set">
                <a href="{{ rec1.url }}"><img src="{{ rec1.image }}"></a>
                <div class="title" onclick="javascript: change_location('{{ rec1.url }}')">{{ rec1.name }}</div>
                <div class="desc">{{ rec1.description|safe|truncatewords_html:15 }}</div>
            </div>
        </div>
    {% endif %}
    {% if rec2 %}
        <div class="span2"> 
            <div class="box-2 img-set">
                <a href="{{ rec2.url }}"><img  src="{{ rec2.image }}"></a>
                <div class="title" onclick="javascript: change_location('{{ rec2.url }}')" style="cursor:pointer">{{ rec2.name }}</div>
                <div class="desc">{{ rec2.description|safe|truncatewords_html:15 }}</div>
            </div>
        </div>
    {% endif %}
    ...
{% endblock %}
...

Редактируем стиль:

Тут уже у кого на сколько хватит фантазии, свой прикладывать не буду, много текста.

Теги: django , python


blog comments powered by Disqus