Добавление фото/видео галереи на MODx Revo

G
N
I
D
A
O
L

Статья

view154

Добавление фото/видео галереи на MODx Revo

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

Вступление

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

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

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

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

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

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

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

<!DOCTYPE html> <html lang="ru"> [ [$head] ] <body> [ [$header] ] <main> [ [*content] ] </main> [ [$footer] ] [ [$scripts] ] </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 минут. Мы и дальше будем продолжать делиться с вами полезной информацией, разумеется, её аналоги можно было найти в интернете и ранее, но мы постараемся сэкономить ваше время, чтобы вы могли уделить больше времени самой разработке.

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