DjangoBB LoFi version

Полная версия: Django + Bootstrap фото-галерея (по типу instagram)

Начало » Django » Django + Bootstrap фото-галерея (по типу instagram)

Moveton

Янв. 29, 2016 22:30:39

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

В общем, ситуация следующая: решил сделать самую обычную фото-галерею в 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)

cups.html

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

В дальнейшем хочу еще добавить возможность при клике на картинку выводить, собственно, картинку и несколько полей с информацией (к примеру, ее описание, наличие и т.д.).

Буду благодарен за полезные советы)

SirJorah

Янв. 29, 2016 22:58:30

Цикл поместите внутри 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>

И классы col можно разнообразить для пущей адаптивности страницы (инче зачем bootstrap?)

UPD не знаю, какие поля есть у модели и соответственно, присутствует ли в cup поле id, но суть в том, что если ставите узлу DOM id, то в пределах страницы он должен быть уникальным. Разнообразьте его так, как я предложил, или как-то еще.
А что значит: при клике на картинку выводить собственно картинку? Показывать увеличенное изображение в модальном окне? Lightbox в помощь. jQuery у Вас уже должна присутствовать.

Moveton

Янв. 30, 2016 21:51:37

SirJorah

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

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

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

SirJorah

Янв. 31, 2016 08:17:44

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

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

Moveton

Янв. 31, 2016 21:40:18

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

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

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