MIGX галерея изображений или слайдер

Удобное решение, которое позволит создать галерею для определенного шаблона, если необходимо вывести небольшое число изображений. Например, можно использовать для карточки товара интернет-магазина. Не забудьте проверить, чтоб у вас был установлен компонент 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="[[+image:phpthumbon=`w=200&h=150&zc=1`]]" alt="[[+title]]" />
</a>

Обратите внимание, что превью изображений уменьшаются с помощью сниппета «phpthumon», вам нужно его установить или же использовать «phpthumbof». Так же, в моем примере, используется «Fancybox» для увеличения изображений и объединения их в галерею.