- Что такое MIGX?
- Установка
- Основные моменты конфигурации
- Параметры ввода и рендера
- Типы ввода / полей (inputTVtype)
- Рендеры (Renderer)
- Плейсхолдеры getImageList
- Параметры getImageList
- Посадка блоков на MIGX
- Создание конфигураций
- Создание MIGX TV
- Заполняем созданное TV с конфигурацией MIGX
- Вывод поля MIGX в шаблоне
- Фикс путей до изображений при использовании источников файлов.
- Дополнительная информация
- Быстрое создание однотипных конфигураций
- Обрезка изображений
- Вывод TV поля MIGX одного ресурса на другом
- Сортировка в getImageList в обратном порядке
- Заключение
Сегодня обзорный урок — документация об очень полезном компоненте — MIGX. В рамках данного урока мы разберем все основные моменты работы этого компонента.
Что такое MIGX?
MIGX — это дополнение для MODX Revo, которое добавляет новый тип ввода дополнительных полей (TV/ТВ). Данный компонент предназначен для объединения ТВ — в много элементную сетку. Вместе с доп. полем MIGX, также идет сниппет getImageList который помогает извлекать элементы данных из многих TV. В общем этот компонент из ряда тех, которые должны быть обязательно установлены и советую с ним подружиться, так как он позволяет сделать очень многое.
Установка
Данный компонент находится в основном репозитории и процесс его установки обычный, как и у других пакетов.
Для MODX 2.8.x рекомендую скачивать стабильную pl версию MIGX 2.х.х с https://modx.com/extras/package/migx
Далее устанавливаем пакет в ручную — загрузить пакет с компьютера:
Основные моменты конфигурации
- «formtabs» — вкладки модального окна, если присутствует только одна вкладка, то они скрываются;
- «caption» — отображаемое название чего-либо(будь то вкладка или поле);
- «field» — уникальное название поля формы;
- «fields» — перечисление полей формы, находящиеся на данной вкладке, среди них:
— «name» — текстовое поле «Название»
— «url» — текстовое поле «Ссылка»
— «image» — поле с выбором изображения — «Изображение»
— «active» — список с одиночным выбором («Активный» или «Скрытый»).
Параметры ввода и рендера
- this.renderImage — вывод изображения;
- this.renderCrossTick — значки галочка\крестик для boolean полей;
- this.renderClickCrossTick — значки галочка\крестик для boolean полей с возможностью изменения значения кликом (поддерживается для MIGXdb);
- this.renderSwitchStatusOptions — изменение статуса кликом по полю (настраивается через Renderoptions);
- this.renderChunk — можно указать чанк, который будет выводиться для этого поля;
- this.renderDate — вывод даты.
Типы ввода / полей (inputTVtype)
- autotag -Авто-метка;
- text — Текст;
- textarea — Текстовая область;
- textareamini — Текстовая область (мини);
- richtext — Текстовый редактор;
- dropdown — Выпадающий список;
- listbox — Список (одиночный выбор);
- listbox-multiple — Список (множественный выбор);
- list-multiple-legacy — Устаревший список множественного выбора;
- option — Переключатели (radio);
- checkbox — Флажки (checkbox);
- image — Изображение;
- file — Файл;
- url — URL;
- email — Электронная почта;
- number — Число;
- date — Дата;
- tag — Тег;
Рендеры (Renderer)
- this.renderImage — вывод изображения;
- this.renderCrossTick — значки галочка\крестик для boolean полей;
- this.renderClickCrossTick — значки галочка\крестик для boolean полей с возможностью изменения значения кликом (поддерживается для MIGXdb);
- this.renderSwitchStatusOptions — изменение статуса кликом по полю (настраивается через Renderoptions)
- this.renderChunk — можно указать чанк, который будет выводиться для этого поля
- this.renderDate — используется для вывода даты
Плейсхолдеры getImageList
- [[+fieldname]] — любое поле из конфигурации MIGX или из переданных параметров в сниппет
- [[+idx]] — порядковый номер, начиная с 1
- [[+_first]] — вернет 1, если это первая запись
- [[+_last]] — вернет 1, если это последняя запись
- [[+_alt]] — вернет 1, если это четная запись
- [[+total]] — общее число элементов (можно изменить через &totalVar)
- [[+property.name]] — выведет параметр с именем &name= в вызове getImageList.
Параметры getImageList
- &tvname — название TV с типом ввода MIGX
- &tpl — имя чанка для вывода каждой записи. Можно использовать @CODE:, @FILE:, @FIELD
- &docid — можно указать ID документа, чей TV надо обработать. По умолчанию: [[*id]]
- &value — JSON строка для обработки getImageList. Если указан, параметры &docid и &tvname будут проигнорированы. Можно использовать для вывода в getImageList еще одного вызова getImageList
- &limit — количество записей для вывода. По умолчанию: 0
- &offset — количество записей, которые необходимо пропустить. По умолчанию: 0
- &totalVar — имя плейсхолдера, в котором содержится общее количество записей. По умолчанию: total
- &randomize — если установить 1, результаты будут отсортированы в случайном порядке. По умолчанию: 0
- &preselectLimit — вместе с параметров &randomize можно указать число записей, которые выведутся в любом случае. По умолчанию: 5
- &where — JSON строка с условиями выборки, например: {«active:=»:«1»,«rating:>»:«5»}
- &sort — JSON строка с условиями сортировки. Можно указывать несколько параметров: [{«sortby»:«age»,«sortdir»:«DESC»,«sortmode»:«numeric»},{«sortby»:«name»,«sortdir»:«ASC»}]
- &toPlaceholder — сохранить вывод в плейсхолдер
- &toSeparatePlaceholders — сохранить каждую запись в отдельный плейсхолдер.
- &outputSeparator — разделитель между результатами
- &wrapperTpl — чанк-обертка для вывода результатов. Принимает плейсхолдер [[+output]] для вывода результатов
- &processTVs — включить режим обработки вывода TV параметров (для полей с inputTV). По умолчанию: 1
Посадка блоков на MIGX
Давайте посадим наш первый экран на MIGX (секцию hero):
Данный блок состоит из следующих полей: заголовок, подзаголовок, кнопка и изображение. Создадим их.
Создание конфигураций
Чтобы создать конфигурацию для ТВ MIGX, нужно зайти в Пакеты -> MIGX и на вкладке MIGX нажать на Добавить элемент.
Откроется новое окно со множеством вкладок. В первой вкладке Settings, заполняем Name на английском (в будущем это будет название конфигурации для ТВ), а в поле Замена «Добавить элемент» пишем Заполнить блок (или добавить). Далее переходим во вкладку Formtabs.
На вкладке Formtabs, жмем по кнопке «Добавить элемент». Всплывет еще окно, в нем снова нажимаем по кнопке «Добавить элемент». И уже в 3м окне получается добавляем наше первое поле. Заполняем Fieldname — название поля на английском, Caption — название поля на русском, Description — при желании можно описать блок. Для обычного текстового блока достаточно заполнить Fieldname и Caption после чего можно жать по кнопке «Сохранить и закрыть».
Третье окошко закроется, при этом второе останется и в нем вы увидите только что созданное поле. Жмем по кнопке «Добавить элемент» и добавляем еще одно обычное текстовое поле.
Затем создаем таким же образом создаем 3е поле: name_buttons (Название кнопки), 4-е: link (Ссылка) и 5-е: image (Изображение) с imput Tv type = image.
В конечном итоге получаем 5 полей, жмем «Сохранить и закрыть».
В filds они поместятся в 1 id — отредактировать их можно нажав правой кнопкой мыши и выбрать редактирование (появиться окно которое только закрыли), переходим на вкладку Columns.
На данной вкладке мы получается делаем разметку колонок — то что вы будите видеть после заполнения созданных полей. Сюда нам нужно перенести либо все поля, либо их часть (в любой последовательности). Для этого жмем по кнопке «Добавить элемент». В сплывающем окне заполняем:
- header — обычно равен Caption (ранее созданного поля)
- Field — равен Fieldname (ранее созданного поля)
- Column width — по желанию, можно указать ширину колонки, например поставить 50
- renderer — для полей у которых есть рендеры (см. выше), указываем его, в данном случае нужно указать только для поля изображения = this.renderImage.
Сохранить и закрыть.
Потом снова «Добавить элемент». Покажу колонку с рендерем.
Так создаем нужные колонки, после чего охраняем и закрываем.
Повторюсь не обязательно создавать колонки для всех полей, особенно если их не 5 а к примеру 15 — они тупо не поместятся в сетку (когда вы их заполните в ресурсе).
С конфигурацию и ее разметку колонок создали. К стати ее всегда можно отредактировать (добавить поля, удалить поля, колонки, перемещать их последовательность и т.п.). Для этого щелкните правой кнопкой мыши по названию конфигурации, далее выберите редактировать, щелкаете ПКМ еще почему нужно — редактировать. Идем дальше.
Создание MIGX TV
Идем во вкладку элементы и создаем дополнительное поле, заполняем имя (на английском, обычно такое же как название конфигурации) и подпись, при желании указываем категорию, далее переходим на вкладку Параметры ввода.
На вкладке Параметры ввода, в поле «Тип ввода» выбираем migx и прописываем название созданной ранее конфигурации.
Далее идете на вкладку «Доступно для шаблонов», выбираете главный шаблон (он пока 1), ну и можете указать источник файлов (img — есть нюансы, о них ниже) и сохраняем.
Заполняем созданное TV с конфигурацией MIGX
Переходим в ресурс с указанным шаблоном, переходим во вкладку «Дополнительные поля», заполняем наше мултиполе и сохраняем ресурс.
В дальнейшем можно редактировать поля, нажав правой кнопкой мыши в любое место сетки (колонок) и выбрать Редактировать.
Осталось лишь вывести его (заменить статический код на динамический).
Вывод поля MIGX в шаблоне
У нас код данной секции сейчас выглядит так (отметил на нем что нужно разметить):
Нам в эти места нужно прописать поля в таком формате: [[+name_polya]]
, должен получится такой код:
<section id="hero" class="hero d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-lg-6 d-flex flex-column justify-content-center">
<h1 data-aos="fade-up">[[+h1]]</h1>
<h2 data-aos="fade-up" data-aos-delay="400">[[+h2]]</h2>
<div data-aos="fade-up" data-aos-delay="600">
<div class="text-center text-lg-start">
<a href="[[+link]]" class="btn-get-started scrollto d-inline-flex align-items-center justify-content-center align-self-center">
<span>[[+name_buttons]]</span>
<i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-6 hero-img" data-aos="zoom-out" data-aos-delay="200">
<img src="[[+image]]" class="img-fluid" alt="[[+h1]]">
</div>
</div>
</div>
</section>
Весь этот код вырезаем в отдельный чанк, пусть будет называться как и TV: hero
, соответственно сохраняем данный чанк. А на месте этого кода пишем вот такую конструкцию:
[[getImageList? &tvname=`hero` &tpl=`hero`]]
где tvname название ТВ в MIGX, а tpl — чанк с разметкой кода с выводом TV.
Если вы пошли по пути разработки на шаблонизаторе fenom, то упрощённый вызов будет таким:
{set $rows = json_decode($_modx->resource.hero, true)}
{foreach $rows as $row}
и здесь весь код блока размеченный полями вот так: {$row.h1} {$row.h2} {$row.link} {$row.name_buttons} {$row.image}
{/foreach}
При таком подходе можно не создавать лишних чанков. В конечном итоге у вас должен измениться контент в заполненном блоке.
С MIGX есть небольшой нюанс с изображениями (он не учитывает дополнительные источники файлов их путь), и если вместо картинки видите битый путь. У вас есть несколько вариантов поправить его.
Фикс путей до изображений при использовании источников файлов.
Первый путь, это зайти в созданное TV поле, и во вкладке Источник файлов, указать Filesystem, сохранить TV. Затем получается перезаполнить поле с изображением (при редактировании ресурса).
Второй путь, добавить в чанк путь источника перед изображением:
access/img/{$row.image}
Для информации, прям точно также сажается
Такой же набор полей (только 2 заголовка),
Дополнительная информация
Быстрое создание однотипных конфигураций
К примеру следующий следующий блок в шаблоне:
сажается как и первый, и у него прям такой же набор полей (+ 1 доп поле). Чтобы не бегать по вкладкам и не создавать каждое поле руками, можно создать новую пустую конфигурацию с именем секции.
После этого из нужной готовой конфигурации копируем поля, для этого нажимаем по ней правой кнопкой мыши и выбираем пункт «Экспорт/Импорт». Всплывет окошко в котором вы увидите Json код, выделяем и копируем его, закрываем.
Теперь так же щелкаем по пустой конфигурации — «Экспорт/Импорт», в сплывающем окне удаляем весь Json и на его место вставляем только что скопированный, сохраняем и закрываем.
Готово, все добавлено, мы с экономили пару минут)).
Обрезка изображений
К примеру требуется резать изображения до определенного размера при помощи сниппета pthumb, тогда в вызов нужно добавлять такую конструкцию.
{foreach $rows as $row}
{set $thumb = $_modx->runSnippet('!pthumb', [
'input' => 'img/' ~ $id ~ '/' ~ $row.image,
'options' => 'w=373&h=230&zc=1&q=71'
])}
<img src="{$thumb}"><p>{$row.description}</p>
{/foreach}
Вывод TV поля MIGX одного ресурса на другом
Часто на сайтах есть сквозные блоки, которые выводятся на многих страницах, чтобы не заполнять одно и тоже на разных ресурсах, можно вывести заполненные поля с одного ресурса на другом, для этого добавьте в вызов параметр docid — id ресурса где заполнено поле.
[[getImageList? &docid=`1` &tvname=`hero` &tpl=`hero`]]
вывод при помощи fenom:
{set $rows = 1 | resource : 'hero' | fromJSON}
{foreach $rows as $row}
поля {$row.image} {$row.h1} и т.д.
{/foreach}
Сортировка в getImageList в обратном порядке
Иногда нужно вывести результаты в обратном порядке. А всеми известного параметра sortdir в MIGX нет. Но зато есть параметр reverse, который позволяет изменить порядок вывода элементов на обратный относительно того, как они забиты в админке. Пример:
[[getImageList? &tvname=`hero` &reverse=`1` &tpl=`hero`]]
Заключение
Сейчас мы разобрали всю документацию по MIGX и все основные моменты с которыми можете столкнутся. Произвели натяжку довольно простого блока, по факту мы можем посадить как минимум половину блоков на главной или вообще все если у вас одностаничник.
В следующем уроке, покажу как сажать сложные блоки на MIGX (Input TV type — migx и Configs название конфигурации) и затем покажу как можно сделать на базе MIGX редактор блоков (Migx внутри Migx). В общем чем дальше тем интереснее.
Приветствую!
Как сделать в MIGx публикацию фото, например, в слайдере, чтобы в админке просто выключить или включить. Добавляю поле listbox, ставлю рендер this.renderSwitchStatusOptions, onClick switchOption, а где поставить публиковать или нет, то есть выключить из подборки временно?
Привет. Скорее всего примерно так: в чанке вывода будет условие [[+listbox:is=`1`:then=`код`]] — если отмечена галка, то выводим какой то код, если нет, то нет)
Здравствуйте! Если можете, подскажите, пожалуйста, как вывести элементы поля MIGX в обратном порядке, если использовать способ вывода через Fenom и foreach?
Дело в том, что сделал поле MIGX для добавления отзывов. В таблицу новый отзыв добавляется в конце. А на сайте нужно выводить отзывы так, чтобы на первой позиции отображался более свежий отзыв. Т.е. нужно делать вывод в обратном порядке.
Здравствуйте. Обновил статью — ответ в ней как сделать при условии что вывод обычный. С помощью json пока не подскажу — не под руками сайтов на Fenom)
Очень прощу помочь! Вопрос касается этого «Если вы используете источник файлов не по умолчанию, то картинки у вас не выведутся». Моя ситуация, видимо, похожа. Сделал дополнительное поле с простой картинкой (не MIGX), для которой использую источник не по-умолчанию. Пытаюсь вывести с помощью pdoResources ресурсы с этой картинкой, у которой источник не по-умолчанию, но ничего не получается. В чанке вывода ресурса не пойму, как правильно вручную указать путь до источника. Если делаю для поля картинки источник по умолчанию, то все работает…
А источник для картинки делал такой, при котором для ресурса автоматически создается папка с именем идентичным айдишнику ресурса, для хранения файлов. Наверное, вы знаете про данный способ создания источника файлов
Здравствуйте. С pdoResources нет проблем с путями до источника файлов, хотя может быть такая проблема, если нет тега base, то картинки будут иметь скорее всего нерабочий путь, решение прописать тег base, либо указывать параметр при вызове pdoResources &scheme=`full`. В общем смотрите какой путь формируется, а от туда уже и решение найдется