Использование MIGX. Создание фотогалереи.

Опубликовано: 01 Мая 2014

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 имеет настолько богатый функционал, что в одной статье его описать невозможно, я постараюсь в последующих статьях расширить и углубить информацию о его использовании и возможностях.

 

Комментарии (8)

  1. androbim:
    21.05.2015г. в 17:03

    Есть один момент. Я сначала дополнительное поле ImageTV назвал по-своему - в админке все было нормально, но во фронтэнде картинки не отображались. Возможно, ImageTV где-то зашито в сниппете, разбираться времени нет. Просто лучше называть именно так.

  2. Наталья:
    23.05.2015г. в 18:24

    На самом деле название ImageTV взято с потолка!:) Использовала много раз и другие названия все ок, разве что, оно должно не совпадать с системными переменными и не забывать создавать tv с нужным названием и типом ввода "Изображение"

  3. Данил:
    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 и мне теперь будет проще дальше с ним работать.)
    В целом пишите еще, но пожалуйста,проверяйте написанное.

  4. Наталья:
    25.12.2015г. в 15:31

    Данил, спасибо за Ваши комментарии.
    1. По поводу "caption":"Image" - это всего лишь заголовок/название, оно может быть каким угодно, например "caption":"HereTheNameOfImage" и да, конечно, они должны совпадать во вкладках формы и в разделах колонок
    2. Да, с этим согласно, но сам блог на modx и если я поставлю без пробелом, то движек выведет не текстом, а запустит скрипты:)

  5. Евгений:
    29.09.2016г. в 17:23

    А есть возможно не по одной фотки выбирать? а сразу несколько? что то типо мультизагрузки?

  6. Наталья:
    08.10.2016г. в 18:38

    Евгений, да, такая возможность есть. В документации она даже описана - https://docs.modx.com/extras/revo/migx/migx.tutorials/migx.use-resource-specific-media-source-and-multifile-uploader
    Может быть, когда-нибудь, найду время и переведу ее.

  7. Олег:
    07.01.2017г. в 14:37

    Есть ли возможность разбить фотогалерею на страницы, чтобы была пагинация?

  8. Наталья:
    13.01.2017г. в 14:17

    Олег, да, такая возможность есть используйте либо getPage, либо pdoPage.


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: