Недавно стояла задача поставить несложную, но гибкую галерею для сайта на MODX — вот и нашел хороший модуль Evogallery для этих целей, о нем и пойдет речь.
Преимущество модуля в том, что он не создает отдельно галереи, а как бы добавляет возможность прикреплять фотки к записям. С одной стороны может показаться неудобным, но с другой, позволяет очень гибко настраивать внешний вид, а также облегчает задачу создания обновляемых слайдеров, да и сам модуль мне понравился в установке и простоте работы с ним.
Для начала качаем
Установка простая — закидываете папки в корень сайта и когда зайдете на сайт, но включится инсталятор (как при установке modx), далее следуете шагам и не забывайте установить права 777 на папку galleries и удалить папку install после установки.
Если все прошло нормально, то переходите в вкладку модули — Evogallery и увидите список страниц, выбираете нужную и добавляете туда фотки. К каждой фотке можно добавлять описание и т.д., для этого после загрузки наводите на не1 мышкой и увидите карандашик — нажимайте на него.
Также можно настраивать размеры миниатюр. Для этого переходите на вкладку Модули — управление модулями и выбирайте там Evogallery.
А теперь как пользоваться
В моем случае мне нужно было сделать вывод миниатюр альбомов на главную, вывод всех альбомов при переходе на саму страницу галереи. В самом альбоме должны быть миниатюры фоток, при клике на каждую — она должны открываться как lightbox
Для начала я создал 2 шаблона — один будет использоваться для страницы галереи (вывод всех альбомов), второй для показа самого альбома фоток.
Документацию по модулю вы можете найти .
Evogallery имеет возможность вывода в трех форматах — в виде галереи изображений, в виде ряда картинок и в виде единичного изображения.
После установки я также создал раздел на сайте, который будет использоваться как галерея. У меня этот раздел имел id=3 (можете глянуть циферку рядом с названием страницы)
Для вывода блока с последними альбомами (см скрин ниже) я использовал такой код
[[EvoGallery? &display=`galleries` &docId=`3` &sortBy=`sortorder` &itemTpl=`item_list_galery`]]
&display=`galleries` — говорит о том, что будут выводится миниатюры альбомов, &docId — это id страницы самой галереи, &itemTpl — это имя чанка в котором будет хранится код для каждой позиции. В этом чанке можно использовать плейсхолдеры подобные как в дитто.
У меня в чанке вышло так
<span class="gallery-box png"><a href="[~[+id+]~]"><img class="pic" src="[+thumbs_dir+][+filename+]" alt="[+title+]" /> [+pagetitle+]</a></span>
С галереей все. Теперь нужно разобраться с шаблоном вывода самих изображений в альбоме.
В шаблон вставляем
[[EvoGallery? &display=`images` &itemTpl=`item_list_album`]]
&display=`images` — говорит о том, что нужно выводить картинки, &itemTpl=`item_list_album` — указывает на чанк, в котором содержится код для каждой позиции картинок. У меня он такой
<span class="gallery-box png"><a href="[+images_dir+][+filename+]" rel="colorbox"><img class="pic" src="[+thumbs_dir+][+filename+]" alt="[+title+]" /> [+pagetitle+]</a></span>
В документации вы можете найти список всех плейсхолдеров и параметров.
К стати, модуль очень удобно использовать и для слайдеров.
Допустим у вас на главной стоит что-то вроде баннеро-крутилки в виде красивого слайдера на jquery и вы хотите сделать его обновляемым. Все очень просто — цепляете к главной странице все фотки, если хотите чтобы они были ссылками, то вставляете нужную ссылку в описание к картинкам, а потом в чанке будете использовать плейсхолдер [+description+] чтобы вставить ссылку, все остальное также как и в случае шаблона для вывода картинок с альбома.
К стати, в галерее есть уже встроенные варианты отображения. Просто не указывайте &itemTpl — и тогда будет применено отображение по дефолту.
Ну а если все это делать у вас нет времени, то всегда можно заказать дизайн сайта у специалистов. Будет красиво, качественно, всегда в сроки. Можете глянуть портфолио, чтобы убедиться.
Понравилась статья? - Подпишись.
Или поделись полезным с миром
Похожие статьи:
Урок не плохой возможно использую в своих проектах.
Вот к стати например тут freedevel.com
А можно ли каким то образом сделать так, чтобы все подгружаемые миниатюры становились одного размера?
Может, так будет проще. Вот страница сайта:
Соответственно, то, что внизу, только что размещено и должно быть вверху.
Код вывода сейчас такой:
[[EvoGallery?
&display=`galleries`
&docId=`30`
&paginate=`1`
&show=`15`
&gallerySortBy=`publishedon`
&sortBy=`sortorder`
&itemTpl=`item_list_gallery`]]
Страницы:[+previous+][+pages+][+next+]
&sortBy=`sortorder` менял как только можно, ничего не происходит…
Аналогично. sortDir=`ASC` или DESC тоже пробовал, никакой разницы. Страница не кэшируема, т.к. иначе постраничное разбиение не работает. Кэш очищал.
1 — Быстрая установка
2 — Backend администрирование. Галерея редактируется через административную часть.
3 — Drag and Drop — смена позиций фотографий
4 — Возможность добавления Alt и Title к изображению
5 — 3 вида встроеных галерей