MIGX галерея
изображений или слайдер
Удобное решение, которое позволит создать галерею для определенного шаблона, если необходимо вывести небольшое число изображений. Например, можно использовать для карточки товара интернет-магазина. Не забудьте проверить, чтоб у вас был установлен компонент MIGX из официального репозитория пакетов.
Если нужно загружать большое количество изображений — следуйте инструкции по созданию галереи MIGX с мультизагрузкой и источником файлов.
Создаём TV-параметр: имя gallery, название «Галерея», делаем доступным для нужного шаблона, тип ввода — «migx». Тут нас интересуют две настройки.
Вкладки формы
[{"caption":"", "fields": [
{"field":"image","caption":"Изображение","inputTVtype":"image"},
{"field":"title","caption":"Название"}
]
}]Разметка колонок
[{
"header": "Изображение", "sortable": "false", "dataIndex": "image", "renderer": "this.renderImage"
},
{
"header": "Название", "sortable": "true", "dataIndex": "title"
}]Мы создали 2 поля для ввода, изображение и название. В случае, если вы создаете слайдер, можно добавить дополнительные поля, например ссылку на подробное описание. Или же, вы можете убрать поле название.
Сохраняем, заходим в ресурс, который использует шаблон с нашим TV параметром, и в дополнительных полях видим таблицу. С помощью нее мы будем добавлять, редактировать и удалять наши изображения. У меня она выглядит следующим образом (поле "Название" я не использую, добавляются только изображения).
Заходим в редактирование шаблона, в месте где будет выводится галерея, добавляем вызов сниппета "getImageList" (он устанавливается вместе с компонентом MIGX).
[[getImageList?
&tvname=`gallery`
&tpl=`gallery_item_tpl`
]]Мы указали параметры:
&tvname— имя TV-поля с типом ввода migx;&tpl— чанк, который выводит каждую строку нашей таблицы с галереей.
Остальные параметры можно посмотреть в самом сниппете «getImageList».
Нам осталось создать чанк gallery_item_tpl, содержимое у меня получилось такое:
<a href="[[+image]]" title="[[+title:esc]]" rel="gallery" class="fancybox">
<img src="[[phpthumbon? &input=`[[+image]]` &options=`w=200&h=150&zc=1`]]" alt="[[+title:esc]]">
</a>Обратите внимание, что превью изображений уменьшаются с помощью сниппета "phpthumon", вам нужно его установить или же использовать "phpthumbof". Так же, в моем примере, используется "Fancybox" для увеличения изображений и объединения их в галерею.