Удобное решение, которое позволит создать галерею для определенного шаблона, если необходимо вывести небольшое число изображений. Например, можно использовать для карточки товара интернет-магазина. Не забудьте проверить, чтоб у вас был установлен компонент MIGX из официального репозитория пакетов.
Если вам необходимо загружать большое количество изображений, следуйте инструкции по созданию галереи MIGX с мультизагрузкой и источником файлов.
Создаем TV параметр, имя «gallery», название «Галерея», делаем доступным для нужного вам шаблона, тип ввода «migx». Тут нас интересуют 2 настройки:
Вкладки формы
[{"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]]" rel="gallery" class="fancybox">
<img src="" alt="[[+title]]" />
</a>Обратите внимание, что превью изображений уменьшаются с помощью сниппета "phpthumon", вам нужно его установить или же использовать "phpthumbof". Так же, в моем примере, используется "Fancybox" для увеличения изображений и объединения их в галерею.