Урок 30. Вывод отзывчивой галереи в MODX

Давайте создадим галерею с отзывчивыми изображениями. Для этого нам понадобится плагин для вывода галереи и какой-нибудь сниппет для MODX, которым можно будет вывести изображения, хранящиеся на сервере.
Для этих целей я выбрал:
- https://feimosi.github.io/baguetteBox.js/ лайтбокс скрипт для работы галереи
- дополнение от Валентина Расулова студия Artdevue - дополнение Filedir
- ресайзер изображений - PhpThumbOn, например, от Евгения Борисова (документация)

Из документации лайтбокса возьмём пример для отзывчивых изображений:

<a href="img/2-1.jpg"
    data-at-450="img/thumbs/2-1.jpg"
    data-at-800="img/small/2-1.jpg"
    data-at-1366="img/medium/2-1.jpg"
    data-at-1920="img/big/2-1.jpg">
        <img src="img/thumbs/2-1.jpg">
</a>

Создадим чанк tpl.image.row и с помощью PhpThumbOn отресайзим изображения:

<a href="[[+file]]" class="thumbnail"
    data-at-450="[[+file:phpthumbon=`w=450&zc=1`]]"
    data-at-800="[[+file:phpthumbon=`w=800&zc=1`]]"
    data-at-1366="[[+file:phpthumbon=`w=1366&zc=1`]]"
    data-at-1920="[[+file:phpthumbon=`w=1920&zc=1`]]">
        <img src="[[+file:phpthumbon=`w=180&h=180&zc=1`]]" rel="lazyload">
</a>

Закачаем изображения в какой-нибудь каталог и выведем их с помощью сниппета Filedir и заключим его в контейнер с классом .gallery:

<div class="gallery">
[[filedir?
&dir=`assets/images/123/`
&tpl=`tpl.image.row`
]]
</div>

где assets/images/123/ - это путь к каталогу с изображениями.

Применим стили для нашего лайтбокса:

<link rel="stylesheet" href="css/baguetteBox.css">

Теперь остаётся вызвать в шаблоне сам скрипт и применить его к нашим изображениям:

<script src="js/baguetteBox.js" async=""></script>
<script type="text/javascript">
    $(function() {
        baguetteBox.run('.gallery');
    });
</script>

На выходе у нас выйдут вертикальные изображения, можно немного добавить стилей или, так как я использую Bootstrap, добавить несколько классов для красивого отображения миниатюр.
Код шаблона будет следующим:

Код чанка tpl.image.row тоже немного поменяется:

Demo

Пишите внизу замечания и предложения. Публикуйте ссылки на ваши любимые ресайзеры или плагины для галерей (лайтбоксы).