В этой статье мы сделаем галерею с фото и видео материалами для нашего сайта на MODx Revo, с возможностью полноэкранного просмотра изображений, приятного чтения.

Вступление

Важное примечание: я заранее набросал простые стили на элементы сайта, которые мы сейчас добавим. При непосредственном создании сайта стили накидываются уже на структурированные элементы, сейчас мы обучаемся организации "скелета" и смотреть способы и навыки стилизации мы не будем. Из прошлых уроков мы уже знаем, как создавать разные структурные элементы страниц и что значат конструкции в квадратных скобках.

В прошлом видео-уроке мы добавили AJAX пагинацию и поиск по тегам в блог, ниже будут полезные ссылки:

Установка дополнения Gallery

Начнём мы с установки дополнения, которое позволит нам удобно работать с изображениями: Пакеты -> установщик -> загрузить пакеты -> Gallery. Загрузим и установим его.

Создание шаблона и ресурса Галерея

Отлично, теперь создадим шаблон и страницу для нашей галереи. Шаблон: имя Галерея, категория Gallery (она создалась автоматически, после установки пакета Gallery), следующее содержание:

В содержимое мы поместим следующий код:

<!DOCTYPE html>
<html lang="ru">
[[$head]]
<body>
[[$header]]
<main>
[[*content]]
</main>
[[$footer1]]
[[$scripts1]]
</body>
</html>

Просто скопируем содержимое шаблона “Начальный шаблон”, который мы создавали в прошлых уроках.

Теперь создадим ресурс Галерея, присвоим ему только что созданный шаблон, псевдоним gallery, галочка “опубликован” и перейдём в настройки, снимем галочку “использовать HTML-редактор”, следующее содержание:

<div id="tickets-wrapper">
<div id="tickets-rows" class="ul-gallery">
[[!pdoPage? 
&element=`Gallery` 
&limit=`3` 
&dir=`DESC` 
&album=`albumImages ` 
&ajaxMode=`button` 
&thumbTpl=`gallery-output-tpl` 
&totalVar=`gallery.total` 
&thumbWidth=`8000` 
&thumbHeight=`8000` 
&imageWidth=`8000` 
&imageHeight=`8000` 
&ajax=`1`
]]
</div>
[[!+page.nav]]
</div>

Стоит заметить, мы используем pdoPage как инструмент вывода, а не стандартный, предлагаемый нам самим дополнением. Это делается для того, чтобы у нас работала наша AJAX пагинация, которую мы добавили в прошлом видео-уроке.

Мы установили лимит картинок на страницу – 3, используемый альбом – albumImages, и шаблонирующий чанк вывода - gallery-output-tpl.

Создание альбома и чанка вывода

Создадим сам альбом: имя albumImages, галочки напротив активен и видимый. Загрузим в него 9 картинок, чтобы хватило на три страницы.

Далее мы создаём шаблонирующий чанк gallery-output-tpl, категория Gallery, следующее содержание:

<li>
<img src="[[+thumbnail]]" alt="[[+name]]" title="[[+description]]">
</li>

Так как мы выводим элементы альбома как список, отредактируем ресурс, обернув pdoPage в ul.

Не забудем тот факт, что мы не подключили скрипт, обеспечивающий работу AJAX пагинации к данной странице, перейдём в чанк scripts и исправим это.

Добавим страницу в навигацию сайта

Отлично, сейчас у нас всё должно выводиться и листаться как нужно. Давайте сейчас добавим страницу Галерея в навигацию на нашем сайте.

Верхняя навигация

Редактируем чанк header, в нём лежим наша навигация:

<li><a href="[[++site_url]]gallery" title="Галерея">Галерея</a></li>

Наведём чистоту

Хорошо, теперь перенесём лишнее из содержания ресурса в его шаблон.

В ресурсе Галерея оставляем только:

[[!pdoPage? 
&element=`Gallery` 
&limit=`3` 
&dir=`DESC` 
&album=`albumImages` 
&ajaxMode=`button` 
&thumbTpl=`gallery-output-tpl` 
&totalVar=`gallery.total` 
&thumbWidth=`8000` 
&thumbHeight=`8000` 
&imageWidth=`8000` 
&imageHeight=`8000` 
&ajax=`1`
]]

Остальное переносим в шаблон:

…
<div id="tickets-wrapper">
<div id="tickets-rows" class="ul-gallery">
<ul>
[[*content]]
</ul>
</div>
[[!+page.nav]]
</div>
…

Хлебные крошки

Не забудем добавить к нашей странице “хлебные крошки” и h1 заголовок, эти элементы присутствуют, например, в шаблоне Блог – просто скопируем их.

Теперь перейдём в чанк “navig-top” и дополним имеющийся код.

На этом этапе у нас все выводится и пагинация работает с AJAX.

Добавим возможность увеличивать и листать

Теперь мы добавим возможность увеличивать изображения и листать их.

Скачаем скрипт

Мы воспользуемся lightbox jqueru, скачаем его.

Закинем скрипт на хостинг

Закинем файлы на наш хостинг, lightbox.min.css – в папку css, lightbox.min.js – в папку js и содержимое папки Images закинем в папку images.

Подключим скрипт

Хорошо, теперь подключим этот стиль и скрипт к нашей странице Галерея. Для этого мы внесем следующий код в чанк head:

[[*id:is=`17`:then=`
<link rel="stylesheet" href="[[++site_url]]assets/components/css/lightbox.min.css" />
`]]

И следующий код в чанк scripts:

[[*id:is=`17`:then=`
<script src="[[++site_url]]assets/components/js/lightbox.min.js"></script>
`]]

Стоит заметить, что для работы скрипта требуется сам jqueru, у нас на сайте он уже подключён.

Внесем изменения в чанк вывода

Хорошо, нам осталось только дать скрипту понять, с чем ему нужно работать – отредактируем чанк вывода изображений gallery-output-tpl.

<li>
<a class="roadtrip-a" data-lightbox="roadtrip" href="[[+thumbnail]]" title="[[+name]]" alt="[[+name]]">
<img src="[[+thumbnail]]" alt="[[+name]]" title="[[+description]]">
</a>
</li>

На этом этапе увеличение изображений уже работает и мы также можем их листать влево – вправо.

А как быть, если нам нужно сделать вместо изображений видео?

Адаптируем галерею под видео

Перейдём в нашу галерею и сменим, например, вторую и девятую картинки на видео. Для этого мы в URL вставим ссылку на видео, в метках укажем, что это video.

Теперь перейдём в чанк вывода gallery-output-tpl и научим его различать фото и видео элементы, выводя их в разных шаблонах.

В этом нам поможет условие, если метка video – выводи как видео, иначе выводи как картинку.

Код будет выглядеть следующим образом:

<li>
[[+tags:is=`video`:then=`
<iframe src="[[+url]]" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
`:else=`
<a class="roadtrip-a" data-lightbox="roadtrip" href="[[+thumbnail]]" title="[[+name]]" alt="[[+name]]">
<img src="[[+thumbnail]]" alt="[[+name]]" title="[[+description]]">
</a>
`]]
</li>

Поздравляю, вы добавили галерею с фото и видео материалами к сайту на MODx Revo. В следующем ролике мы добавим поиск по сайту.

Заключение

Работать с MODx очень удобно и мы убедились в этом на практике, наш ролик по этой теме на YouTube занимает всего 8 минут. Мы и дальше будем продолжать делиться с вами полезной информацией, разумеется, её аналоги можно было найти в интернете и ранее, но мы постараемся сэкономить ваше время, чтобы вы могли уделить больше времени самой разработке.

Вам нужно создать сайт или обновить его? - Не теряйте времени, обращайтесь к профессионалам!