Modx migx: Большой и страшный. Знакомство. / Русскоязычное сообщество MODX

Большой и страшный. Знакомство. / Русскоязычное сообщество MODX

Привет сообществу!

Представляю цикл уроков (да, это будет цикл уроков, потому как мало кому нравиться читать большие тексты) про компонент MIGX.

Внимание! Уберите от экранов детей, беременных женщин и разработчиков средней руки. Вам тут делать нечего!

Зачем?

В последнее время заметил, что про этот чудный (в хорошем смысле) инструмент вопросов очень много, да и ответов не мало, но видимо люди занятые поиском просвещения и те кто этими знаниями владеет живут на разных улицах.

Что это?

MultiItemsGridTv for MODX — сокращенно MIGX. Т.е. это тип ввода данных в виде множественных элементов.

Привет Evoлюционерам, это Multitv только функционала тут гораздо больше.

Уточняю еще один момент, я целенаправленно буду пропускать некоторые моменты по двум причинам:

1. Многим она не нужна и вряд-ли понадобится (MIGX DB например)
2. Будет освещено в следующих уроках (Если поддержите данный урок)

Начало

После установки компонента мы увидим несколько новых типов ввода при создании и редактировании TV, и нас интересует только одноименный тип который так и называется migx. Еще в комплекте идёт сниппет getImageList и он предназначен для удобного вывода наших данных. Кто начинает изучение MODX и хочет сразу с синтаксиса fenom, то я и про вас не забыл.

Советую сразу после установки перейти в меню «Меню», найти там в дереве MIGX, открыть на редактирование и в поле привелегии указать какой нибудь ключ, например: settings. Это делается для того, чтобы менеджеры не увидели и что еще страшнее не испортили ваши конфигурации.

Там же, только уже в поле Параметры можно указать: &configs=migxconfigs вместо &configs=packagemanager||migxconfigs||setup, если у вас нет необходимости работать над собственными таблицами.

Первый TV с типом MIGX

И так, допустим, что у нас стоит задача вывести на странице список отзывов и каждый отзыв должен иметь следующие поля:

• Фотография
• ФИО
• Тип работы
• Текст отзыва

Приступим и идём в меню «Приложения» -> «MIGX», переходим во вкладку «MIGX» и нажимаем кнопку «Добавить элемент», откроется модальное окно которое выглядит так:

Нас интересуют вкладки: Settings, Formtabs и Columns.

Вкладка Settings

• Name — Название конфигурации (Его нужно будет указать при создании самого TV). Пишем: reviews
• Category — Выбор категории (Нужно в тех случаях если у вас конфигураций непомерно много), с его помощью можно фильтровать конфигурации. Пропускаем
• Add new Category — Если нужной категории нет или их нет вовсе, то в это поле вводится название. Пропускаем
• Замена «Добавить элемент» — текст кнопки которая будет добавлять новый элемент. Пишем: Добавить отзыв
  
• Disable Add Items — Если включить, то не будет возможности добавлять новые элементы. (Нужно для случаев, когда вы уже вводите необходимое количество элементов/данных и хотите оставить возможность их только редактировать). Пропускаем
• Add Items directly — Если включить, то элемент буден создан без открытия модального окна. Пропускаем
• Form Caption — Заголовок формы (тут кстати обрабатываются MODX теги). Если например написать: Отзывы на странице [[*pagetitle]], то мы при создании отзыва будем видеть такую картину
  
  
• Window Title — Заголовок модального окна создания/редактирования. Пишем: Добавить/редактировать отзыв
  
  
• max MIGX records — Лимит количества элементов. Тут надеюсь всё понятно, если оставить пустым, то не будет ограничений по количеству
• Add new MIGX records at — Тут 2 выбора: bottom и top В зависимости от которого новые элементы, а в нашем случае отзывы будут добавляться в конец или в начало, но не переживайте, ведь сортировать элементы мы будем иметь возможность всегда, перетаскиванием.

Вкладка Formtabs

• Fields — Список вкладок. См. ниже
• Остальные поля Multiple Formtabs — Их мы затронем в другом уроке

Нажимаем кнопку «Добавить элемент», откроется еще одно модальное окно с полями:

• Caption — Название вкладки. Можно оставить пустым, ведь если вкладка будет одна, то она все равно не будет выводиться, поля вкладки будут выводиться, но сама вкладка нет. Но если у вас в одном элементе (в нашем случае отзыве) много полей, то имеет смысл разделять их по разным вкладкам для удобства ввода данных
• Fields — Поля вкладки. Ну вот мы и дошли до того момента, когда мы уже будем создавать поля для ввода данных

Нажимаем кнопку «Добавить элемент», откроется еще одно модальное окно с вкладками:

• Field — настройки поля
  
  • Fieldname — название/ключ в массиве (по аналогии с обычным TV)
  • Caption — название/подпись поля (по аналогии с обычным TV)
  • Description — Описание поля. Выводится рядом с полем (по аналогии с обычным TV)
  • Input TV — название TV (будут применены конфигурации данного TV).

    Не советую использовать данный метод, так как сталкивался с тем что у проектов созданы несколько TV и они просто висят в Базе Данных как сущности и не используются, зачастую из-за нужды в использовании источника файлов отличным от системного

    Далее покажу как не плодить TV
  • Input TV type — Тип поля/tv. Тут указывается тип поля, а если быть точнее, то тип TV, можно указывать все типы TV, даже migx, если оставить пустым, то мы получим простое текстовое поле

    В следующих уроках рассмотрим вложенные MIGX

    
    
  • Configs — Конфигурация данного поля в JSON-массиве. Для разных типов полей есть разные свойства, поэтому переходим по ссылке и изучаем документацию, там всё расписано
  • Display — Показывать или нет данное поле
• Mediasources — настройки источника файлов для данного поля
  • source From — Где указан источник файлов.
  • Sources — Список пар привязок: контекст (ресурса) -> источник-файлов (Если в source From указано: config).
• Input Options — настройки вводимых данных данного поля
  • Input Option Values — Возможные значения (по аналогии с обычным TV)
  • Default Value — Значение по умолчанию (по аналогии с обычным TV)

И так, создаем 4 поля с такими характеристиками:

1. Fieldname: — image
   • Caption: — Фотография
   • Input TV type: — image
   • source From: — config
   • Sources: — Context: web, Source: (id - источника файлов отличным от системного)
2. Fieldname: — name
   • Caption: — Ф. И.О.
3. Fieldname: — type
   • Caption: — Тип работы
4. Fieldname: — text
   • Caption: — Текст отзыва
   • Input TV type: — textarea или richtext на свой вкус

Сделали и не заблудились в моем тексте?!? Отлично, еще немного осталось.

Должно выглядеть примерно вот таким образом:

Нажимаем «Выполнено» и переходим на следующую вкладку:

Вкладка Columns

На данной вкладке мы настраиваем уже вывод данных в панели управления при создании и редактировании ресурса. Тут одно одноименное поле и если мы нажмем на кнопку «Добавить элемент» мы увидим такую картину:

По порядку:

• Вкладка «Column»
  • Header — Текст/заголовок столбца
  • Field — Название/ключ поля которое было создано нами в предыдущих шагах
  • Column width — Ширина столбца (вводится непонятным для меня виде, но скажу, что принимает целые числа, прицелитесь и приспособитесь методом проб)
  • Sortable — Сортируем или нет
  • Show in Grid — Показывать в таблице или нет
• Вкладка «Renderer»
  • Renderer — Как будет выводиться/отображаться. Ведь одно дело вывести текст, а когда нужно будет например выводить картинку тут уже просто ссылку на него выводить было бы нелепо
• Вкладка «Cell Editor»
  • Editor — Прямое редактирование (так сказать: directly) без модального окна. Тут уж 2 варианта: this.textEditor и this.listboxEditor. Первым можно редактировать обычный текст, а вторым поля с типом listbox

И так, создаем опять же 4 столбца с такими характеристиками:

1. Header: — Фотография
   • Field: — image
   • Renderer:
     — this.renderImage
2. Header: — Ф.И.О.
   • Field: — name
   • Editor: — this.textEditor
3. Header: — Тип работы
   • Field: — type
   • Editor: — this. textEditor
4. Header: — Текст отзыва
   • Field: — text
   • Editor: — this.textEditor и если в настройках поля указали richtext, то данное поле нужно оставить пустым

Если мы все сделали правильно, то можно будет увидеть такую картину:

Ну и всё. Жмем кнопку «Выполнено» и идём создавать непосредственно наш TV.

Создаем TV, называем его reviews, подпись указываем Отзывы, выбираем тип ввода migx и в поле Конфигурации пишем название нашей конфигурации, т.е. reviews, указываем шаблоны и идём смотреть результат нашей работы.

Если мы всё сделали верно, то мы увидим следующее:

После нажатия на кнопку добавления, это:

Быстренько заполняем:

и приступаем к выводу наших данных.

Вывод данных

Открываем шаблон страницы и пишем на том месте, где мы хотим вывести наши отзывы вот такой код:

 [[getImageList?
&tvname=`reviews`
]]

Я специально не указал параметр tpl для того чтобы продемонстрировать данные в сыром виде и узнать какие плейсхолдеры будут доступны в чанке, вывод будет такой:

Array
(
    [MIGX_id] => 2
    [image] => files/avatars/3. png
    [name] => Алексей Гумелев
    [type] => Ремонт квартиры
    [text] => Спасибо компании “Название компании”! Делали ремонт в однокомнатной квартиры 42 кв.м в новостройке в жилом комплексе Новое Пушкино. Квартира предназначена для дочери. У молодежи свои требования. Ремонт хороший, все сделано, как было оговорено, хотя мы находились в другом городе. Она осталась довольна. Ремонт закончили в срок. Бригада работала без предоплаты. Выплаты шли по факту выполненных работ. Хочу поблагодарить фирму за проявленную заботу, понимание и советы по выбору материалов. Рекомендую. Работа была окончена летом 2016.
    [_alt] => 0
    [_first] => 1
    [_last] => 
    [idx] => 1
    [property.tvname] => reviews
)
Array
(
    [MIGX_id] => 3
    [image] => files/avatars/1.png
    [name] => Мария Петровна
    [type] => Ремонт квартиры
    [text] => Хочу написать наш отзыв о компании "Название компании". Вначале было много сомнений. Доверять ли мастерам? Мало ли что? Люди  разные бывают.
 
    Зря волновалась! Результат отличный. Ребята очень внимательные и порядочные. Сделали ремонт в квартире на "Ура!" Кирилл мастер своего дела. Я очень довольна результатом! Цены не завышены как у других.Рада, что обратилась именно к Вам. 
    [_alt] => 1
    [_first] => 
    [_last] => 
    [idx] => 2
    [property.tvname] => reviews
)
Array
(
    [MIGX_id] => 4
    [image] => files/avatars/2.png
    [name] => Инна Макаревич
    [type] => Ремонт квартиры
    [text] => "Название компании" делали нам ремонт в начале 2016 года!  Двушка в новостройке. Цена у них фиксирована - ни копейки не добирали. На каждом этапе фотоотчеты, что нам очень понравилось. Кирилл на связи всегда! Все работы выполнены на совесть! Все убрали за собой. Молодцы, команда!
    [_alt] => 0
    [_first] => 
    [_last] => 1
    [idx] => 3
    [property.tvname] => reviews
)

Давайте разберем данные:

• MIGX_id — уникальный идентификатор элемента
• image, name, type, text — наши поля которые мы с вами создали

  Обратите внимание, что пути к изображениям хоть и в базе хранятся без источника файлов, но сниппет getImageList нам их предусмотрительно дописал

  
  
• _alt — Четный (1) или нечетный (0) элемент
• _first — Является, ли элемент первым
• _last — Является, ли элемент последним
• idx — Индекс элемента начиная с 1
• property. tvname — Название TV

т.е. наш сниппет расширяет массив данных и дописывает пути к источникам файлов если мы их указали.

А теперь посмотрим как выглядит вывод на всеми любимым fenom. Данный код:

{$_modx->resource.reviews| fromJSON | print}

выведет следующее:

Array
(
    [0] => Array
        (
            [MIGX_id] => 2
            [image] => avatars/3.png
            [name] => Алексей Гумелев
            [type] => Ремонт квартиры
            [text] => Спасибо компании “Название компании”! Делали ремонт в однокомнатной квартиры 42 кв.м в новостройке в жилом комплексе Новое Пушкино. Квартира предназначена для дочери. У молодежи свои требования. Ремонт хороший, все сделано, как было оговорено, хотя мы находились в другом городе. Она осталась довольна. Ремонт закончили в срок. Бригада работала без предоплаты. Выплаты шли по факту выполненных работ.
  Хочу поблагодарить фирму за проявленную заботу, понимание и советы по выбору материалов. Рекомендую. Работа была окончена летом 2016.
        )
    [1] => Array
        (
            [MIGX_id] => 3
            [image] => avatars/1.png
            [name] => Мария Петровна
            [type] => Ремонт квартиры
            [text] => Хочу написать наш отзыв о компании "Название компании". Вначале было много сомнений. Доверять ли мастерам? Мало ли что? Люди  разные бывают.  Зря волновалась! Результат отличный. Ребята очень внимательные и порядочные. Сделали ремонт в квартире на "Ура!" Кирилл мастер своего дела. Я очень довольна результатом! Цены не завышены как у других.Рада, что обратилась именно к Вам. 
        )
    [2] => Array
        (
            [MIGX_id] => 4
            [image] => avatars/2.png
            [name] => Инна Макаревич
            [type] => Ремонт квартиры
            [text] => "Название компании" делали нам ремонт в начале 2016 года!  Двушка в новостройке.   Цена у них фиксирована - ни копейки не добирали. На каждом этапе фотоотчеты, что нам очень понравилось. Кирилл на связи всегда! Все работы выполнены на совесть! Все убрали за собой. Молодцы, команда!
        )
)

Немного другая картина, да?? В данном варианте как мы можем видеть, пути без источника файлов и конечно же нет других полей, кроме тех, что мы создали, ну и MIGX_id который создается и принимает значение автоматически. Мне лично больше нравиться работать с fenom, а вы решайте сами!

Осталось только создать чанк под вашу верстку, указать в вызове getImageList и наслаждаться проделанной работой?

[[getImageList?
&tvname=`reviews`
&tpl=`myChunk`
]]
// myChunk
<div>
    <img src="[[+image]]">
    <span>[[+name]]</span>
    <span>[[+type]]</span>
    <p>[[+text]]</p>
</div>

а кто хочет использовать fenom, то пожалуйста:

{var $reviews = $_modx->resource. reviews| fromJSON}
{if $reviews}
{foreach $reviews as $i}
<div>
    <img src="files/{$i.image}">        // Дописываем путь к источнику файлов вручную
    <span>{$i.name}</span>
    <span>{$i.type}</span>
    <p>{$i.text}</p>
</div>
{/foreach}
{/if}

Вот такую красоту можно сделать:

Итог

Почему большой? Большой потому, что функционал и область его применения реально большой: слайдеры, фото и видео галереи, блоки, отзывы, списки, таблицы и еще много чего, поверьте.
Я даже слышал, что где-то в Средней Азии с его помощью собирают хлопок… Но это не точно!

Не везде где его можно использовать он хорош, но он хорош тем, что он везде может быть использован

Почему страшный? Потому, что многие его боятся (мне так кажется). Я бы его сравнил с огнедышащим драконом из мультфильма Шрек. Всмысле??? Да потому, что если ты её(его) не знаешь, то она(он) тебе кажется страшной(ым), а если покорить её(его), то она(он) очень даже ничего?

Выскажите своё мнение по поводу урока и скажите продолжить или нет? Стоить ли раскрыть завесу тайны? Пойти ли мне в дремучий и загадочный лес? Подняться ли мне до вершины просвещения? Идти ли мне в путешествие на поиски знаний? Пройти ли мне этот долгий и неизведанный путь? Найти ли мне наконец истину? Сделать ли мне неизвестность известной? Расширить ли наш коллективный разум? Ну в общем вы поняли?

Спасибо всем за внимание! Если чё я Баха!

Если вдруг кому-то захочется поблагодарить рублём, то так уж и быть: Карта Сбербанка +79609354545

Документация на русском по MODX MIGX

Здесь представлен перевод статей с rtfm.modx.com, а также добавлен из некоторых других источников. Если вы нашли ошибку или опечатку, напишите об этом в комментарии.

• Что такое MIGX?
• Как работает специльный тип дополнительных полей (TV) MIGX
• Создание первого TV MIGX
  • Шаг 1: Создайте TV MIGX
  • Шаг 2: Настроить поля ввода MIGX
  • Шаг 2. 1: Вкладки формы
  • Ключи для «Вкладки форм»
  • Шаг 2.2: Разметка колонок
  • Ключи для «Разметки колонок»
• Ввод данных
  • Шаг 1: Установка
  • Шаг 2: Ввод данных
  • Шаг 3: Изменение данных
  • Шаг 4: Упорядочивание данных
• Вывод данных через getImageList
  • Отображение элементов MIGX
  • Пример использования getImageList
  • Вывод MIGX TV внутри шаблона getResources
  • Параметры сниппета getImageList
  • Доступные плейсхолдеры в шаблоне вывода getImageList
• Продвинутое использование
  • Динамическая замена шаблона
• Еще примеры использования MIGX:
  • Слайдер MIGX — Пример вызова с картинкой из специального источника файлов
  • Пример вызова с сортировкой и лимитом
  • Вариант реализации MIGX (выпадающий список из системной настройки)
  • Как не выводить пустой getImageList. Использование wrapperTpl — альтенатива частично нерабочему toPlaceholder.
  • Тип поля «Список ресурсов» (resourcelist) с ограничением по родителю (parents)
  • Простая и симпатичная галерея fancybox

Генератор настроек MIGX

Что такое MIGX?

MIGX это специальный тип дополнительных полей (TV), созданный для того чтобы объединить несколько разных TV в один. Такая система объединенных полей очень сильно упрощает администрирование сайта, когда есть необходимость заполнять много информации. Поля ввода в MIGX могут быть всеми стандартными типами — Текст, цифра, выпадающий список, картинка, чекбокс и пр.

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

Дополнение поставляется со снипппетом getImageList, который позволяет быстро и просто вывести данные из заполненного дополнительного поля MIGX

MIGX расшифровывается как MultiItemsGridtv for MODX

Как работает специльный тип дополнительных полей (TV) MIGX

MIGX позволяет хранить сложную структуру данных в едином TV-поле. Данные хранятся в формате JSON. Данная документация предполагает, что вы имеете представление о том, что такое JSON.

Создание первого TV MIGX

Заготовка для конфигурации MIGX находится в директории /core/components/MIGX/examples/. В нижеследующем примере мы будем использовать заготовку «tabs.txt». Эта документация предполагает, что у вас установленно дополнение TinyMCE.

Файл tabs.txt содержит пример реализации простой галереи изображений. Галерея будет состоять из единого элемента, который объединяет в себе одно текстовое поле с редактором (описание изображения), одно поле изображения (само изображение), и короткую строку (заголовок). Все эти данные будут храниться в одном TV-поле.

Шаг 1: Создайте TV MIGX

• Заполните название, заголовок и все остальное как у любого другого TV-поля.
• Укажите к какому шаблону относится TV-поле
• Укажите тип ввода — MIGX

Шаг 2: Настроить поля ввода MIGX
Шаг 2. 1: Вкладки формы

Вкладки формы определяет какие поля ввода будут предоставлены пользователю.

Скопируйте содержимое tabs.txt в поле «Вкладки формы»

[
{
  "caption":"Info",
  "fields": [
    {
      "field":"title",
      "caption":"Title"
    },
    {
      "field":"description",
      "caption":"Description",
      "inputTVtype":"richtext"
    }
  ]
},
{
  "caption":"Image",
  "fields":[
    {
      "field":"image",
      "caption":"Image",
      "inputTVtype":"image",
      "sourceFrom":"MIGX"
    }
  ]
}
] 

Сейчас мы разберем этот JSON на составляющие чтобы понять что есть что.

• Первый ключ "caption" отвечает за то какой заголовок будет у вкладки. В данном случае — "Info".
• Второй ключ "fields" Содержит информаци о полях, доступных для редактирования в этой вкладке.
  • Первый ключ элемента fields — "field". Значение этого ключа соотвествует имени плейсхолдера при выводе данных через getImageList.
  • Второй ключ элемента fields — "caption". Это заголовок, который увидит пользователь, заполняющий данные в панели управления.
  • Третий ключ элемента fields — "inputTVtype". Позволяет указать тип TV (ДАТЬ СПИСОК)(по-умолчанию «text»)
• • Во второй вкладке мы указали "inputTVtype":"image" для того чтобы можно было загружать изображения.
  • "sourceFrom":"MIGX" — если нужно чтобы изображения брались из предустановленного в настройках TV-поля источника файлов.

Ключи для «Вкладки форм»

Ключ	Описание
field	Имя плейсхолдера, которое можно будет использовать в шаблоне при выводе через getImageList.
caption	Заголовок для поля ввода в панели управления.
description	Описание поля ввода в панели управления.
inputTVtype	Используется для определения типа ввода (по-умолчанию «text»).
inputTV	Название TV-поля, которые будет использовано. Например, можем создать ТВ «списко ресурсов», указать тут его название и получим список ресурсов внутри MIGX
default	The default value of that field.

Шаг 2.2: Разметка колонок

Мы размечаем колонки чтобы дать пользователю общее представление о том, что содержится внутри элемента.

Скопируйте содержимое columns.txt в поле «Разметка колонок»

[
{"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title"},
{"header": "Image", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this. renderImage"}
]

Ключи для «Разметки колонок»

Ключ	Описание
header	Название столбца
sortable	Можно ли сортировать столбец?
dataIndex	Поле, которое вы хотите вывести в этом столбце (значение ключа «field» из Вкладки форм)
renderer	Можно использовать средства визуализации для каждого столбца. Например, для того чтобы отображить миниатюры изображений в таблице, должна быть включена функция «this.renderImage». Возможные значения параметра renderer: this.renderimage this.renderImageFromHtml this.renderPlaceholder this.renderFirst this.renderLimited this.renderCrossTick this.renderClickCrossTick this. renderSwitchStatusOptions this.renderPositionSelector this.renderRowActions this.renderChunk ImagePlus.MIGX_Renderer this.renderDate this.renderOptionSelector
editor	Cell Editor: For ingrid-editing, select an Editor for this column. this.textEditor — simple Text-input this.listboxEditor — shows a listbox with the input-options of that field

Ввод данных

Шаг 1: Установка

Убедитесь, что вы установили MIGX, настроили MIGX TV, применили его к шаблону, и создал ресурс с этим шаблоном.

Шаг 2: Ввод данных

1. Зайдите в ваш ресурс, а затем перейдите на вкладку «Дополнительные поля». Вы должны увидеть новое дополнительное поле.
2. Нажмите на кнопку «Добавить»
   Заполните поля, которые вы определили в настройках дополнительного поля. Если вы не видите никаких полей, убедитесь, что заполнили поле «Вкладки формы» соблюдая синтаксис JSON (Иногда при копировании примеров вы можете вставить неразрывные пробелы вместо обычных, в таком случае JSON не будет валидным)
3. Нажмите кнопку «Готово»
4. Нажмите кнопку «Сохранить», чтобы сохранить ресурс

Шаг 3: Изменение данных

Щелкните правой кнопкой мыши на любом элементе. Выберите либо Update, дублировать или удалить.

Шаг 4: Упорядочивание данных

Зажмите и перетащите элемент, чтобы изменить его положение в таблице.

Вывод данных через getImageList

Отображение элементов MIGX

В комплекте с пакетом MIGX поставляется сниппет getImageList, который подходит для вывода данных из заполненного TV MIGX. Не смотря на название он может быть использован не только для вывода изображений, но для всех типов данных. Это что-то вроде getResources, но специально для MIGX.

getImageList может быть использован для организации любой структуры данных, например:

• галерея изображений
• слайдер с картинками или HTML
• табличные данные
• CSV или XML
• Что угодно на самом деле

Пример использования getImageList

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

<ul>
 [[getImageList? 
  &tvname=`myMIGXtv`
  &tpl=`@CODE:<li>[[+idx]]<img src="[[+image]]"/><p>[[+title]]</p></li>
 `]]
</ul>

tvname — название TV-поля. tpl — шаблон вывода. В tpl вы можете указать как название чанка, так и строку кода. Убедитесь, что указали @CODE:, если решили использовать указать шаблон строчно. При использовании чанка достаточно указать только название этого чанка.

Вывод с использованием RezImgCrop:

<li>
 <img src="[[+image:rezimgcrop=`r-250`]]" alt="[[+title]]"/>
</li>

Вывод MIGX TV внутри шаблона getResources

<li>
 <a href="[[~[[+id]]]]">[[+pagetitle]]</a> 
 [[getImageList?
  &tvname=`myMIGXtv`
  &tpl=`thumbTpl`
  &limit=`1`
  &docid=`[[+id]]`
 ]]
</li>

Использование переменных из getResources в getImageList

Если вы хотите использовать переменные, поставляемые в шаблон getResources внутри шаблона getImageList вы можете передать эти данные в параметрах вызова getImageList. Вы можете задать произвольные имена этим параметрам, а вызывать их с помощью конструкции [[+property.myparam1]] в шаблоне getImageList.

[[getImageList?
  &tvname=`myMIGXtv`
  &tpl=`thumbTpl2`
  &docid=`[[+id]]`
  &limit=`1`
  &pagetitle=`[[+pagetitle]]`
  &originalResourceId=`[[+id]]`
]]

<li>
  <a href="[[~[[+property.originalResourceId]]]]">Показать еще изображения от [[+property.pagetitle]]</a>
</li>

Параметры сниппета getImageList

Ключ	Описание
tvname	Название дополнительного поля, которое нужно вывести
tpl	Название чанка для вывода. Можно также использовать конструкции @CODE: или @FILE:. Если оставить поле пустым, то будет выведен массив (как через pront_r в php)
wrapperTpl	Название чанка-обертки для результата работы сниппета. Принимает только один плесхолдер — [[+output]]. Как вывести getImageList только если он не пустой
docid	ID ресурса, дополнительное поле которого нужно вывести. Пригодится при выводе в шаблоне getResources: &docid=`[[+id]]`	[[*id]]
value	Можно указать данные в формате JSON, вместо использования данных из TV-поля. Если указан, то docid и code{ignored} игнорируются.
limit	Если не ноль, то указывает сколько выводить элементов	0
offset	Кол-во элементов, которые нужно пропустить.	0
totalVar	Плейсхолдер, содержащий общее количество элементов. Полезно при использовании getPage.	total
randomize	Укажите &randomize=`1` если хотите организовать вывод в случайном порядке	0
preselectLimit	together with &randomize, this will preselect items from top to limit, for images you want to see in any case in ranomized output	5
where	Отфильтровать элементы. Пример: {"active:=":"1","rating:>":"5"}
sort	Сортировка может быть по нескольким полям одновременно. Пример: [{"sortby":"age","sortdir":"DESC","sortmode":"numeric"}, {"sortby":"name","sortdir":"ASC"}]
toPlaceholder	Название плейсхолдера, в который следует поместить результат работы сниппета. К примеру есть указать &toPlaceholder=`MIGX`, то результат будет доступен в [[+MIGX]]. Примечание переводчика — почему-то этот плесхолдер не проходит проверку на пустоту. Чтобы решить эту проблему пользуйтесь wrapperTpl
toSeparatePlaceholders	Разделяет результат работы сниппета на отдельные плейсолдеры. Например есть указать &toSeparatePlaceholders=`MIGX`, то результат ля каждого элемента будет сохранен в отдельном плейсхолдере: [[+MIGX. 1]] [[+MIGX.2]] ……
placeholdersKeyField	Применяется только в связке с &toSeparatePlaceholders. Пример: &placeholdersKeyField=`title` — получим [[+MIGX.firsttitle]] [[+MIGX.thirdtitle]] ……
outputSeparator	Разделитель у элементов
toJsonPlaceholder	output items as json into a placeholder, usefull when you want for example show randomized items on different places. example: &toJsonPlaceholder=`jsonoutput` -> [[getImagelist? &value=`[[+jsonoutput]]`…………….]]
jsonVarKey	example: &jsonVarKey=`MIGX_json` — this will use the value from $_REQUEST[‘MIGX_json’] as value, if any useful together with the backend-preview-feature	MIGX_outputvalue

Доступные плейсхолдеры в шаблоне вывода getImageList

Ключ	Описание
[[+fieldname]]	Подставьте вместо ‘fieldname’ заданное вами значение поля
[[+idx]]	Индекс текущего элемента. Начинается всегда с 1
[[+_first]]	Содержит 1 если это первый элемент
[[+_last]]	Возвращает 1 если это последний элемент
[[+_alt]]	Возвращает 1 для каждого второго элемента
[[+total]]	Возвращает общее кол-во элементов, можно заменить ‘total’ настройкой &totalVar
[[+property.name]]	Можно использовать любые переданные параметры. К примеру если вы указали &docid=`20`, то [[+property.docid]] вернет 20

Продвинутое использование

Динамическая замена шаблона

Используя &tpl=`@FIELD:` можно установить любое поле шаблоном для вывода.

[[getImageList?
 &tvname=`myMIGXtv`
 &tpl=`@FIELD:mytplfield`
]]

Если вы определили поле «mytplfield» в настройках MIGX TV, getImageList будет использовать значение этого поля как шаблон для вывода данного элемента. Шаблон внутри поле «mytplfield» должен быть точно таким же, как содержание чанка, используемого обычно в &tpl=`chankname`.

Как настроить и использовать MIGX TV для MODX

Внимание! Этот учебник довольно устарел. Есть лучший способ работать с Migx, используя его CMP. Со временем я сделаю исправленную версию этого урока.

Что такое MIGX TV?

Одним из недостатков переменных шаблона является невозможность добавления более одного набора. Они отлично подходят для добавления даты календаря или фонового изображения заголовка, но не могут создать слайдер изображения, поскольку телевизор не может быть реплицирован. Вот тут-то и появляется MIGX, MIGX означает MultiItemsGridtv и представляет собой «пользовательский тип ввода переменной шаблона (TV) для объединения нескольких телевизоров в один телевизор». Единственная проблема заключается в том, что официальная документация может быть несколько сложной для понимания новыми разработчиками. В этой статье мы попытаемся улучшить официальную документацию MIGX, чтобы показать, насколько она мощна и проста в использовании.

О чем пойдет речь в этой статье?

Эта статья представляет собой пошаговое руководство по использованию MIGX для настройки легко обновляемого слайдера изображений.

Начало работы

Для начала вам необходимо установить MIGX с помощью диспетчера пакетов, который можно найти в разделе «Дополнительно» > «Установщик», найдите MIGX и загрузите верхний элемент. Вернитесь к своему диспетчеру пакетов и установите Extra, нажав зеленую кнопку «Установить».

Если вы следуете официальной документации, вы можете пропустить шаг 2, так как на момент написания текущей версии релиза была 2.12.0.

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

• Image
• Заголовок (альтернативный текст)
• Описание
• URL (для гиперссылки на изображение)

Создание TV

Первое, что нам нужно сделать, это создать новую переменную шаблона (TV) на вкладке Elements и назвать ее как-нибудь подходящим и ленивым. .. ‘Slider’ будет работать. Затем на вкладке «Параметры ввода» выберите «migx» в раскрывающемся списке «Тип ввода» и предоставьте телевизору доступ к BaseTemplate (или любому другому шаблону, который вы используете).

Шаги:

1. Создать новый телевизор с именем Slider
2. Установите тип ввода mix с помощью раскрывающегося меню
3. Предоставьте телевизору доступ к вашему шаблону, установив флажок рядом с шаблоном на вкладке Доступ к шаблону
4. Сохраните шаблон, нажав зеленую кнопку «Сохранить» в правом верхнем углу экрана

Создание конфигурации MIGX TV

После сохранения слайдера необходимо создать конфигурацию MIGX. В официальной документации показано, как передать код JSON, необходимый для этого шага. К счастью, вам не нужно ничего писать вручную, так как MIGX поставляется со своей собственной пользовательской страницей менеджера, которая записывает для нас JSON. Перейдите в Extras > Migx и нажмите на вторую вкладку под названием MIGX.

В поле «Действия» есть кнопка «Добавить элемент», нажмите ее, и вы увидите модальное окно, введите «Ползунок» в поле ввода «Имя» (самый первый ввод), затем нажмите «Формы». Здесь мы добавим необходимые входные данные, которые требует наш ползунок.

Шаги :

1. Нажмите кнопку «Добавить элемент»
2. Напишите «Слайд» в поле «Подпись». На данный момент вы можете игнорировать отображение вкладок выше, так как это не относится к этому руководству
.
3. Нажмите кнопку «Добавить элемент» под заголовком «Поля»

Создание полей конфигурации

Теперь вы должны увидеть всплывающее окно, здесь все становится немного сложнее, и вы можете найти полезным записать несколько вещей, чтобы помочь вам отслеживать. Вам также потребуется открыть документацию по типам ввода переменных шаблона. Здесь мы создадим повторяющиеся переменные шаблона, которые планировали ранее.

Повторяемые шаги:

1. имя поля : т. е. slider_image
2. Заголовок : то есть изображение (удобочитаемое)
3. Ввод TV : (для простоты должно совпадать с именем поля) slide_image
4. Тип ввода TV : изображение (см. документацию по типам ввода переменных шаблона) — нижний регистр
5. Нажмите Готово

В этом уроке мы не будем вдаваться в добавление источников мультимедиа или значений по умолчанию, так как уже многое предстоит охватить. После того, как вы нажали «Готово», вы должны вернуться к предыдущему всплывающему окну, но на этот раз ваше поле появится в таблице. Повторите описанные выше шаги, чтобы добавить следующие поля:

Имя поля	Заголовок	Вход ТВ	Тип входа ТВ
слайдер_изображение	Изображение	слайдер_изображение	изображение
слайдер_название	Титул	слайдер_название	текст
слайдер_описание	Описание	slider_desc	форматированный текст
слайдер_ссылка	Ссылка	слайдер_ссылка	адрес

(Примечание. Для правильной работы форматированного текста у вас должен быть установлен WYSIWYG-редактор, например Redactor)

Когда вы закончите, вы должны получить таблицу, показывающую вновь созданные поля, теперь нажмите «Готово» в правом нижнем углу. всплывающего окна. Далее нам нужно добавить столбцы, чтобы мы могли просмотреть слайд в ресурсе. Нажмите на вкладку «Столбцы» (рядом с вкладками форм вверху) и нажмите «Добавить элемент».

Вот где удобно записать (или хотя бы использовать запоминающуюся систему именования) поля, которые вы создали на предыдущем шаге. Во-первых, присвойте столбцу соответствующий заголовок, например «Изображение», затем введите поле, к которому относится этот столбец, т. е. slide_image, укажите ширину столбца, т. е. 40 (ширина указывает ширину столбца таблицы в %), и, наконец, установите для сортировки значение «Да». (необязательно, но мы всегда устанавливаем для первого столбца значение Да). После того, как вы закончите этот раздел, вы можете либо нажать «Готово», либо открыть вкладку «Визуализатор». Вкладка рендерера позволяет вам настроить способ представления данных в ресурсе, поэтому, если вы хотите, чтобы ваше изображение slide_image отображалось, выберите this.renderImage в раскрывающемся списке, иначе он просто выведет путь к вашему изображению.

Повторяемые шаги:

1. Заголовок : Дайте столбцу заголовок
2. Поле : введите поле, к которому относится этот столбец, например, название слайда
3. Ширина столбца : Значение от 1 до 100, старайтесь оставаться в диапазоне от 20 до 80 в целых числах
4. Сортируемый : Необязательно, если первый элемент можно сортировать, остальные не могут быть
5. Renderer : Необязательный, используется только для рендеринга значения поля в ресурсе, т. е. для отображения изображения слайда вместо пути к изображению

Когда вы закончите добавлять столбцы, нажмите «Готово», чтобы сохранить изменения и выйти из ТВ.

Добавление конфигурации MIGX

После выполнения вышеуказанных шагов наша конфигурация MIGX будет доступна в таблице управления MIGX. Теперь нам нужно получить конфигурацию JSON, чтобы мы могли добавить ее в Slider TV, который мы создали в начале этой статьи. Щелкните правой кнопкой мыши строку конфигурации, чтобы вызвать контекстное меню, затем нажмите «Экспорт/импорт». Откроется всплывающее окно, содержащее ваш JSON. Нажмите внутри текстовой области, выберите все содержимое  cmd+a  и скопируйте cmd+c  и нажмите «Готово».

Сортировка JSON

Теперь у вас есть JSON, вам нужно скопировать и вставить его в нужные поля. Самый простой способ справиться со следующей частью — вставить только что скопированный JSON в редактор кода.

Откройте Slider TV на вкладке «Элементы», затем нажмите «Параметры ввода», в текстовом поле «Вкладки форм» скопируйте и вставьте весь код JSON между «formtabs»:  квадратные скобки  [] . Сделайте то же самое для текстовой области Grid Columns ниже, скопируйте и вставьте все содержимое между  "столбцы": квадратных скобок [] .

Вот полный код JSON, который нужно вставить:

Вкладки формы:

 [
    {
      "MIGX_id":4,
      "заголовок":"Слайд",
      "print_before_tabs":"0",
      "поля": [
        {
          "MIGX_id":7,
          "поле":"слайдер_изображение",
          "заголовок":"Изображение",
          "описание":"",
          "description_is_code":"0",
          "inputTV":"слайдер_изображение",
          "inputTVtype":"изображение",
          "Проверка":"",
          "конфиги":"",
          "ограничительное_условие":"",
          "отображать":"",
          "источник":"конфигурация",
          "источники": "",
          "inputOptionValues":"",
          "по умолчанию":"",
          "useDefaultIfEmpty": "0",
          "поз":1
        },
        {
          "MIGX_id":8,
          "поле":"слайдер_название",
          "caption":"Заголовок",
          "описание":"",
          "description_is_code":"0",
          "inputTV":"slider_title",
          "inputTVtype":"текст",
          "Проверка":"",
          "конфиги":"",
          "ограничительное_условие":"",
          "отображать":"",
          "источник":"конфигурация",
          "источники": "",
          "inputOptionValues":"",
          "по умолчанию":"",
          "useDefaultIfEmpty": "0",
          "поз":2
        },
        {
          "MIGX_id":9,
          «поле»: «slider_desc»,
          "заголовок":"Описание",
          "описание":"",
          "description_is_code":"0",
          "inputTV":"slider_desc",
          "inputTVtype":"форматированный текст",
          "Проверка":"",
          "конфиги":"",
          "ограничительное_условие":"",
          "отображать":"",
          "источник":"конфигурация",
          "источники": "",
          "inputOptionValues":"",
          "по умолчанию":"",
          "useDefaultIfEmpty": "0",
          "поз":3
        },
        {
          "MIGX_id":10,
          "поле":"слайдер_ссылка",
          "заголовок":"Ссылка",
          "описание":"",
          "description_is_code":"0",
          "inputTV":"slider_link",
          "inputTVtype":"URL",
          "Проверка":"",
          "конфиги":"",
          "ограничительное_условие":"",
          "отображать":"",
          "источник":"конфигурация",
          "источники": "",
          "inputOptionValues":"",
          "по умолчанию":"",
          "useDefaultIfEmpty": "0",
          "поз":4
        }
      ],
      "поз":1
    }
  ]
 

 

Столбцы сетки:

 [
    {
      "MIGX_id":1,
      "заглавное изображение",
      "dataIndex":"слайдер_изображение",
      "ширина":40,
      "сортируемый": "ложь",
      "show_in_grid":1,
      "пользовательский рендерер": "",
      "рендерер":"this. renderImage",
      «клик»: «»,
      "селекторконфиг":"",
      "рендерчанктпл":"",
      «параметры рендеринга»: «»,
      "редактор":""
    },
    {
      "MIGX_id":2,
      "заголовок":"Заголовок",
      "dataIndex":"слайдер_название",
      "ширина":20,
      "сортируемый": "ложь",
      "show_in_grid":1,
      "пользовательский рендерер": "",
      "рендерер": "",
      «клик»: «»,
      "селекторконфиг":"",
      "рендерчанктпл":"",
      «параметры рендеринга»: «»,
      "редактор":""
    },
    {
      "MIGX_id":3,
      "заголовок":"Описание",
      "dataIndex":"slider_desc",
      "ширина":80,
      "сортируемый": "ложь",
      "show_in_grid":1,
      "пользовательский рендерер": "",
      "рендерер": "",
      «клик»: «»,
      "селекторконфиг":"",
      "рендерчанктпл":"",
      «параметры рендеринга»: «»,
      "редактор":""
    },
    {
      "MIGX_id":4,
      "заголовок":"Ссылка",
      "dataIndex":"слайдер_ссылка",
      "ширина":30,
      "сортируемый": "ложь",
      "show_in_grid":1,
      "пользовательский рендерер": "",
      "рендерер": "",
      «клик»: «»,
      "селекторконфиг":"",
      "рендерчанктпл":"",
      «параметры рендеринга»: «»,
      "редактор":""
    }
  ]
 

 

Последнее дополнение, которое мы хотели бы сделать, — это настроить кнопку «Добавить элемент». Для этого введите значение в поле «Добавить элемент» Замена: ввод, т. е. «Добавить новый слайд».

Не забудьте сохранить изменения, когда закончите. Вышеизложенное может показаться сложным для выполнения, но если вы все еще со мной, значит, вы уже сделали 70% работы!

ДОБАВЛЕНИЕ СЛАЙДОВ

На этом хлопотная часть окончена! Дальше немного легче. Теперь ваш следующий шаг — открыть ресурс, который будет содержать слайдер вашего изображения. Для нас это наш домашний ресурс, так как он использует шаблон baseTemplate, который использует наш Slider TV. Когда вы откроете свой ресурс и перейдете на вкладку «Переменные шаблона», вы увидите, что ваш Slider TV готов к заполнению контентом. Чтобы добавить новый слайд, нажмите кнопку «Добавить новый слайд». Откроется окно, содержащее поля, которые мы создали выше. Заполните форму и нажмите «Готово», когда закончите. Делайте это столько раз, сколько хотите, чтобы добавить больше слайдов, ради этого урока мы добавили еще два слайда.

Повторяемые шаги:

1. Щелкните Добавить новый слайд, чтобы открыть модальное окно ТВ
2. Заполнение полей формы
3. Нажмите «Готово», чтобы сохранить
4. Промойте и повторите (СОВЕТ: вы можете щелкнуть правой кнопкой мыши только что созданный слайд и продублировать его, это вызовет модальное окно с уже заполненными данными, что может значительно упростить жизнь.)
5. ВСЕГДА СОХРАНЯТЬ — Нажмите зеленую кнопку вверху справа, чтобы сохранить ресурс

Отображение ваших слайдов в вашем ресурсе

В зависимости от того, как вы настроили свои шаблоны и ресурсы, существует множество способов представления слайдов. В этой статье мы будем добавлять код непосредственно в ресурс (я не рекомендую делать это для рабочих веб-сайтов / веб-сайтов, автором которых будет кто-то другой. Всегда максимально упрощайте обновление / добавление нового контента в ваш Ресурсы).

Мы используем фрагмент с именем  getImageList  для отображения наших слайдов во внешнем интерфейсе. Добавьте во фрагмент следующие сведения:

Чтобы быстро проверить, работает ли ваш ползунок, скопируйте и вставьте следующее в содержимое вашего ресурса, сохраните его, затем просмотрите:

Обратите внимание, что мы использовали встроенный код вместо фрагмента для нашего шаблона, я настоятельно рекомендую вы используете фрагмент вместо встроенного, поскольку вы можете использовать дополнительные фрагменты и фрагменты для создания сложных систем.

Теперь вы должны увидеть слайды на своей веб-странице.

ЗАКЛЮЧЕНИЕ

Если вы освоите этот метод, создание новых телевизоров MIGX станет абсолютным пустяком, вам больше не нужно беспокоиться о форматировании кода JSON, использовании правильных имен ключей и т. д. Этот метод также открывает другие области дополнительных возможностей MIGX. для вас, чтобы изучить, мы использовали только небольшой процент при создании нашего слайдера изображения, MIGX может обрабатывать гораздо больше! Просто найдите время, чтобы сделать ошибки! Разочаровывайтесь в том, что что-то не работает, и учитесь на своих ошибках. Надеюсь, вам понравится использовать MODX так же, как и мне.

Отсутствует предмет из MODX MIGX

Задавать вопрос

спросил 10 лет, 5 месяцев назад

Изменено 10 лет, 1 месяц назад

Просмотрено 506 раз

У меня есть список изображений и соответствующих текстовых данных, которые я отображаю с помощью MIGX/getImageList.

Это работает нормально, пока мой список не содержит 13-й элемент. В этот момент он выберет один элемент списка и не отобразит его. Неотображаемый элемент не является последним элементом в списке, и все 13 элементов отображаются в конце списка.

Элемент, который не отображается, можно изменить, изменив порядок списка, но индекс отсутствующего элемента не всегда одинаков. Один и тот же элемент остается отсутствующим до тех пор, пока не будет выполнен повторный заказ и сохранение, т. Е. Он не случайно скрывает другой элемент каждый раз, когда я перезагружаюсь.

Я не вижу ссылок на какие-либо ограничения в шаблонах. Я также не вижу ссылки на 12 или 13. Текстовые данные и изображения в пунктах чистые, и работают для 12 пунктов почти 8 месяцев.

Вот код:

tpl

 

  <дел>
    
  
    <дел>
       
[[+имя]]
 
       
[[+позиция]]
 
      [[+описание]]
      Показать больше