Давайте создадим галерею с отзывчивыми изображениями. Для этого нам понадобится плагин для вывода галереи и какой-нибудь сниппет для 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`
]]