В этой статье мы сделаем галерею с фото и видео материалами для нашего сайта на 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 минут. Мы и дальше будем продолжать делиться с вами полезной информацией, разумеется, её аналоги можно было найти в интернете и ранее, но мы постараемся сэкономить ваше время, чтобы вы могли уделить больше времени самой разработке.
Вам нужно создать сайт или обновить его? - Не теряйте времени, обращайтесь к профессионалам!
Источник: Веб студия WITECH