Python-сообщество

Здравствуйте!

В общем, ситуация следующая: решил сделать самую обычную фото-галерею в 3 столбика (пример - instagram) с помощью bootstrap. Только начал изучать Django, поэтому столкнулся с проблемой, что не могу понять, как именно сделать, чтобы данные из queryset в .html выводились через bootstrap именно в 3 столбика (на данный момент - лишь в 1). Вот код:

views.py

def cups(request):
	context = {'context_cups': GalleryCupsModel.objects.all()}
	return render(request, 'cups.html', context)

{% for cup in context_cups %}
    <div class="container-float">
        <div class="row">
            <div id="image" class="col-xs-4">
            	<img src="{{ cup.photo.url }}" />
            </div>
    	</div>
    </div>
{% endfor %}

Отредактировано Moveton (Янв. 29, 2016 22:30:59)

Цикл поместите внутри div.row

<div class="container-float">
    <div class="row">
{% for cup in context_cups %}
            <div id="image-{{cup.id}}" class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
            	<img src="{{ cup.photo.url }}" />
            </div>
{% endfor %}
     </div>
</div>

Отредактировано SirJorah (Янв. 29, 2016 23:41:22)

SirJorah

Спасибо! То, что надо. Как-то даже стыдно, что сам не додумался поместить цикл внутрь row..)

Правда, тут возник еще один момент: теперь при изменении размеров окна картинки масштабируются лишь по-горизонтали, а по-вертикали - нет. То есть, загружая рисунки с размерами, к примеру, 300х300 px, все ок. Уменьшая окно - как в прикрепленном изображении. Впервые с таким сталкиваюсь. Возможно, это стандартная “фича” и есть стандартное решение?

По поводу клика по картинке: да, как раз модальное окно интересует с воможностью вывода не только увеличенного изображения, но и дополнительной информации (например, небольшое текстовое поле, поле даты). Думал, это все во власти ajax&Co. С Lightbox'ом не сталкивался, спасибо, буду изучать, искать)

Прикреплённый файлы:
cropped.png (19,8 KБ)

Помилуйте, аякс только передает на сервер или от сервера без перезагрузки страницы. А показать - тут уже аякс не при чем. Lightbox'ов кстати много, есть из чего выбрать. Вроде даже платные попадались )) Что касается масштабирования, то прикрепленный скриншот оставляет впечатление, что изображения даже не масштабируются, а просто “наползают” друг на друга. Насколько знаю, все стандартные решения с плавным масштабированием сводятся к указанию height и width в процентах вместо px или em. На эту тему вот довольно интересная публикация. И еще на днях накопал: один коллега весьма подробно рассмотрел предмет отзывчивости изображений.

PS Не знаю Вашей конечной цели, однако полагаю, что когда окно сжимется до ширины как на скриншоте, все же правильнее выстроить изображения в колонку, т.е. 1 в строке. Оно же именно так будет выглядеть на экране смартфона к примеру. Пользователь глаза поломает, пытаясь разглядеть каждое из трех смасштабированных картинок в ряду. Впрочем, это просто мысли вслух, повторюсь - не знаю Ваших соображений, поэтому с последним советом можете послать меня к черту )))

Отредактировано SirJorah (Янв. 31, 2016 08:26:18)

Кстати, последний совет очень даже ничего) Потому что у всех различное мнение: кому-то больше нравится мелкие фото, но чтобы их было побольше, кому-то лишь по 1 в строке. Вот и решаю)

Что касается плавного масштабирования, то на pet-проекте, который и разрабатываю, на одной из страниц все работает как по маслу (но там используется лишь html + css + bootstrap). Здесь же загрузка фотографий происходит через админку django (и, кстати, сами фотографии физически почему-то не сохраняются в папку, куда должны были би, но это уже другой вопрос), возможно, с этим как-то связано.

В общем, большое спасибо за советы, они действительно были полезны)