Урок 15. Создание слайдера с помощью MIGx TV

В этом занятии мы рассмотрим основы MIGX и поработаем над новым слайдером, который можно использовать в своём блоге.

Конечный результат того, что мы сделаем, будет приблизительно такой слайдер

Требования:

• MODX Revolution сайт.
• Установлен MIGX пользовательский тип Переменных шаблона (через управление пакетов).
• Слайдер или скрипт галереи, который бы мы хотели интегрировать. Я использовал FlexSlider студии WooThemes так как он подгоняет себя под ширину контейнера (что очень важно для отзывчивого дизайна!). Также он легко конфигурируем, поддерживает прокрутку на смартфонах и выглядит просто отлично без доработок.
• Установленный сниппет phpthumbof через Менеджер пакетов для автообрезания изображений.
• Какие-либо изображения!

Начинаем

В работе используется несколько частей. Вначале нужно установить MIGX TV и нам нужно взять эти данные из фронт-энда и заставить наш слайдер работать. Этот урок подразумевает использование FlexSlider, мы убедимся в том, что разметка – это то, что ему нужно, но также это должно быть очень легко адаптироваться под другие слайдеры.

Шаг 1:Установка MIGX TV для управления изображениями

Давайте начнём с установки TV. Сила MIGX в том, что вы можете определять нужные вам поля. Вы будете видеть их как таблицу и нужно лишь дать названия заголовкам. В этом случае мне нужны будут три разных поля:

• Поле ввода для выбора изображения в файловой системе (или в 2.2 от ваших медиа источников).
• Поле ввода текста для ввода подписи / тега / описания. FlexSlider отлично справляется с подписями, поэтому будем их и использовать.
• Также я добавил ввод текста для "Set". Как мы позже увидим, я им воспользуюсь для бесконечного количества отдельных слайдеров, которые будут добавляться из любой точки ресурса..

Вы можете использовать другие поля, если хотите, но урок будет подразумевать именно те поля, которые я привёл выше.

Давайте перейдём к созданию TV. Вот слайдер с описанием изображений (для случая, если в миниизображении ничего не видно).

Создайте новую переменную шаблона во вкладке «Элементы» и дайте ей соответствующее название. Я назову её ws.images, если вы дадите ей своё название, то не забудьте заменить [[*ws.images]] на ваше название. Во вкладке Тип ввода (Input Options) выберите тип "migx" из выпадающего меню. Если вы не видите этот тип, то проверьте установили ли вы MIGX пакет через Управление дополнениями (Package Manager). Вы заметите, что несколько опций было добавлено внизу экрана, включая Вкладки формы (Form Tabs) и Разметка колонок (Grid Columns). Данное применимо к версии MODX >2.0, для более ранних версий рекомендую обновиться.

Обратите внимание: поля «Вкладки формы» (Form Tabs) и «Разметка колонок» (Grid Columns) должны быть заполнены корректными JSON строками. JSON – это в общем способ показа объектов, массивов или комбинаций ключ -> значение способом, который поддерживает почти любой язык программирования. Вот техническая спецификация и несколько примеров с официального сайта JSON.

Установка Вкладок формы

Форма позволяет использовать различные вкладки. Каждая вкладка имеет описание и несколько полей. Вы можете сделать много продвинутых вещей с этим, так как в большинстве случаев будете использовать одиночную вкладку, поэтому сейчас запомните просто на будущее. Вот JSON код для Вкладок формы (Form Tabs), который я использую:

Давайте пройдёмся по каждой строчке:

• Первая – показывает открытие массива вкладок квадратной скобкой ( [ ), и открывающийся объект вкладки фигурной скобкой ( { ). После этого мы определяем подпись (caption) поля Image. Обратите внимание, что нужно использовать двойные кавычки ( " " ) для свойств и их значений, одинарные могут привести к неожиданным результатам. Если у вас эти скобки попадутся в любых свойствах, значениях, экранируйте их слешем ( \ ). После определения описания (caption) давайте продолжим и начнём определять массив «полей», открывая его квадратными скобками ( [ ).
• Мы определим наше первое поле как set. "field": “set”, значит, что мы хотим иметь в этом поле ввод обычного текста. “Caption”:”Set” – мы даём описание названия "set" – это будет название для ввода обычного текста. Далее дадим ему подпись "Set", которая будет показана в форме как метка поля.
• Далее определим поле описания таким же образом
• 4 строчка определяет изображение. Что здесь особенного – мы используем еще одну ТВ (с именем "image") как тип ввода. Это очень сильная особенность MIGX, которая позволяет вам использовать другие ТВ для построения вашей формы. В этом случае ТВ "image" очень проста: тип ввода – изображение, и в 2.2 вы можете назначать её к правильному медиа источнику. Вам не нужно связывать её с шаблонами как нужно делать в случае с обычной ТВ. Другой способ, сделать это (который я использую в других MIGX TV) – это сделать радио-боксы или селект-боксы.
• Пятая строка закрывает массив полей. Также обратите внимание, что последняя строчка определяющая поле (изображение) не заканчивается запятой – это важно! Если вы поставите запятую в массиве, он JSON не будет обработан и ваша форма не будет работать.
• Шестая строка закрывает объект-вкладку и весь массив вкладок.

Итак, таким образом мы создали "image" TV! У вас должна уже работать форма для заполнения данных, но для их показа нужна разметка…

Установка Разметки колонок

Пройдёмся по каждой строке:

• Открываем массив заголовков квадратными скобками ( [ ) и заголовок пятой колонки фигурной скобкой ( { ).
• Даём название заголовку "Set" указываем, что он может сортироваться (sortable) и указываем параметр "set", что отвечает определению Набор вкладок формы (Set Form Tabs), которые имеют "field":"set".
• Конец Set / начало Description
• Даём название заголовку "Description", сортируемый и сопоставляем его с полем description dataIndex.
• Конец Description / начало Image
• Дайте название заголовку "Image", несортируемый и сопоставьте его с полем dataIndex - image. Также определим рендерер, который в ExtJS позволит вам изменить вид выводимых данных. В данном случае "this.renderImage" рендерер автоматически возьмёт урл выбранного изображения и сформирует миниатюру вместо него.
• Окончание объекта Image и массива заголовков.

После этого вы можете назначить эту MIGX TV к вашему шаблону и проверить результат работы. Не показывается разметка? Идите назад к вкладкам и убедитесь, что все значения заключены в двойные кавычки, а не одинарные и проверьте нет ли лишних запятых.

Далее всё просто:

• Заполните данные
• Выведите данные на сайт

Заполним произвольными данными нашу переменную шаблона ws.image

Если вы попытаетесь вывести эти данные как обычную ТВ, то увидите приблизительно следующее:

Это JSON массив с введенными полями и значениями!

Так как MIGX идёт в комплекте со сниппетом getImageList можете попытаться вывести данные с его помощью. Документацию по данному сниппету можете найти здесь. Либо сделать свой сниппет (parseMIGXToGallery), который я использую для генерации разметки из &tpl чанка, базируясь на ТВ данных:

Давайте пройдём каждую строчку:

• Берём переменную $input (которая берёт данные содержащиеся в параметре &input в вызове сниппета, об этом немного позднее) и парсит JSON в пхп-массив.
• Мы установим пустой массив для хранения нашего вывода.
• Убедимся, что переменная $input variable не NULL или Ложь, что бы значило, что JSON не передан или что он неправильный, а также проверим $tpl переменную (переданную параметром &tpl в вызове сниппета) не пуста ли она. Если какое либо условие Истина мы выведем сообщение об ошибке "пусто', что послужит подсказкой для контент-менеджера, что что-то неправильно.
• Далее проход через каждый элемент массива $input как $row.
• Проверяем установлена ли переменная $set (которая устанавливается в вызове сниппета в параметре &set) и если она не пуста мы сверяем её значение со значением "set" текущего ряда. Если это не то, что нужно переходим к следующему элементу массива.
• Получаем чанк с именем $tpl и вставляем значения текущего ряда в него в виде заполнителей (плейсхолдеров).
• Закрываем цикл foreach.
• Наконец склеиваем вместе массив $output, отделяя каждый элемент разрывом строки и выводим его на страницу.
• Итак суммируя вышесказанное мы берём введенные данные, проходим по каждому ряду и проверяем принадлежат ли они к набору, что мы определили, далее это получает чанк и складывается всё в вывод.
• Запуск сниппета

Всё, что нам нужно – это сниппет вызов, где нам нужны наши изображения и чанк, который выведет всё в нужном виде для FlexSlider. Вот как вызывается сниппет:

И чанк images.gallery.tpl:

Также нужно обернуть весь вывод сниппета в div и неупорядоченный список, согластно документации FlexSlider. Чтобы сделать это всё проще – положим всё это в один чанк. Мой чанк называется slider и содержит следующее:

Используя данный чанк я могу просто ссылаться на что-либо в контенте, что намного легче запомнить или занести в шпаргалку.

Теперь можно приступить к разметке слайдера FlexSlider

Шаг 3: Использование FlexSlider

FlexSlider относительно лёгок в использовании (загрузите его файлы здесь) и есть куча примеров на его сайте. Также вам нужно включить вызов jQuery на странице и его CSS файл (запакован в zip файл) и FlexSlider плагин (также находится в архиве zip). После этого вам нужно инициировать правильный элемент используя следующий код:

На сайте советуют поместить всё в head файла, но я лично размещаю всё это внизу. Если ваш слайдер выводится наверху страницы, то тогда лучше поместить его в <head>, чтобы он загружался перед появлением страницы, поэтому размещайте где вам угодно.

Вот и всё! Надеюсь эта длинная статья поможет кому-то начать использовать MIGX и такие слайдеры как FlexSlider!

Демо

При создании урока использовались материалы блога Марка Хамстры статья How to: Managing Galleries with MIGX