Использование MIGX. Создание фотогалереи.
MIGX ( многоэлементный tv параметр для MODx Revo) обычный tv параметр для добавления нескольких элементов в одном tv и сниппет для вывода этих элементов во фронт-энд.
MIGX, являеться универсальным средством, если вам нужно быстро и просто создать таблицы, фотогалереи, слайдеры и т.д.
Установка
MIGX устанавливается, как и все элементы MOdx через установщик пакетов. Можно скачать как напрямую с репозитория, так и загрузить локально.
Использование.
Допустим нам нужно создать фотогалерею, каждая фотография будет содержать еще и название и краткое описание.
Создаем новый tv-параметр, называем его «gallery».
Выбираем параметр ввода migx и заполняем поля «Вкладки формы» и «Разметка колонок»
«Вкладки формы»
[{"caption":"gallery","fields": [{"field":"pagetitle","caption":"Название"},{"field":"description","caption":"Описание"},{"field":"images","caption":"Изображение","inputTV":"ImageTV"}]}]
Хочу обратить ваше внимание на поле изображение. Данная конструкция «inputTV":"ImageTV», говорит о том, что мы используем в tv параметре «migx» tv-параметр «ImageTV», который был создан заблаговременно, тип ввода «Изображение»
«Разметка колонок»
[{"header": "Название", "width": "250", "sortable": "false", "dataIndex": "pagetitle"}, {"header": "Изображение", "sortable": "false", "dataIndex": "images","renderer": "this.renderImage"}]
Далее мы выбираем для каких шаблонов будет доступен данный параметр и нажимаем кнопку «Сохранить»
Заходим в нужный нам документ на вкладку «Дополнительные поля» и видим вот такую табличку.
Нажав кнопку «Добавить элемент» мы получаем форму для заполнения.
Заполняем и нажимаем кнопку «Выполнено» и получаем новый добавленный элемент. Аналогично добавляем другие. После того как табличка заполнена обязательно нажимаем кнопку «Сохранить» у ресурса.
Теперь осталось только лишь вывести нашу галерею во фронт-энде, для этого мы используем встроенный снипет migx – getImageList.
[ [getImageList? &tvname=`gallery ` &tpl=`galleryTpl`]]
И содержимое чанка «galleryTpl»
<h1>[ [+pagetitle]]</h1><p>[ [+description]]</p> <img src="[ [+images]]" alt="[Alternative text]" />
Вот, собственно, и все фотогалерея создана. На самом деле, migx имеет настолько богатый функционал, что в одной статье его описать невозможно, я постараюсь в последующих статьях расширить и углубить информацию о его использовании и возможностях.
androbim:
21.05.2015г. в 17:03
Есть один момент. Я сначала дополнительное поле ImageTV назвал по-своему - в админке все было нормально, но во фронтэнде картинки не отображались. Возможно, ImageTV где-то зашито в сниппете, разбираться времени нет. Просто лучше называть именно так.
Наталья:
23.05.2015г. в 18:24
На самом деле название ImageTV взято с потолка!:) Использовала много раз и другие названия все ок, разве что, оно должно не совпадать с системными переменными и не забывать создавать tv с нужным названием и типом ввода "Изображение"
Данил:
24.12.2015г. в 17:54
ошибки у вас!Потрудитесь,елис для людей выкладываете,выкладывать грамотно.
1. Смотрим документацию: https://rtfm.modx.com/extras/revo/migx/migx.backend-usage#MIGX.Backend-Usage-CreatingyourfirstMIGXTV
Правильно будет "caption":"Image" - и во вкладках формы и в разделах колонок!Без S
2. Квадратные скобки должны ставиться без пробелов, как у вас!
3. Все же благодаря ошибкам в вашей статье,я сам смог разобраться,как новичок в migx и мне теперь будет проще дальше с ним работать.)
В целом пишите еще, но пожалуйста,проверяйте написанное.
Наталья:
25.12.2015г. в 15:31
Данил, спасибо за Ваши комментарии.
1. По поводу "caption":"Image" - это всего лишь заголовок/название, оно может быть каким угодно, например "caption":"HereTheNameOfImage" и да, конечно, они должны совпадать во вкладках формы и в разделах колонок
2. Да, с этим согласно, но сам блог на modx и если я поставлю без пробелом, то движек выведет не текстом, а запустит скрипты:)
Евгений:
29.09.2016г. в 17:23
А есть возможно не по одной фотки выбирать? а сразу несколько? что то типо мультизагрузки?
Наталья:
08.10.2016г. в 18:38
Евгений, да, такая возможность есть. В документации она даже описана - https://docs.modx.com/extras/revo/migx/migx.tutorials/migx.use-resource-specific-media-source-and-multifile-uploader
Может быть, когда-нибудь, найду время и переведу ее.
Олег:
07.01.2017г. в 14:37
Есть ли возможность разбить фотогалерею на страницы, чтобы была пагинация?
Наталья:
13.01.2017г. в 14:17
Олег, да, такая возможность есть используйте либо getPage, либо pdoPage.