Migx modx: Большой и страшный. Знакомство. / Русскоязычное сообщество 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
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

Урок 14. Использование MIGX. Создание таблицы MODX

Конфигурация MIGX TV

Допустим нам нужна простая таблица с распорядком работы магазина и время, когда он открывается/закрывается. Создайте новую TV (назовём её «operatingHours») используя Тип ввода MIGX TV(подразумеваю, что вы уже установили пакет MIGX через Система -> Управление дополнениями)

Я сделаю это через быстрое создание ТВ, вот как это выглядит:

Используйте следующий код для Вкладок формы. Вы увидите, что я написал JSON немного по-другому, чем автор MIGX плагина, но если синтаксис JSON правильный — значит всё в порядке.

Итак, код для Вкладок формы:

Даём имя для описания вкладки «Operating Hours» и далее добавляем три поля к ней: день, начало и конец работы. Мы не определяем тип ввода, просто подразумеваем, что это текстовое поле.

Теперь для вывода этого в панели ресурса, нам нужно установить Разметку колонок. Мы используем следующий код для этого:

Вставьте код приведенный выше в поля ТВ operatingHours:

Мы установили три колонки («Day», «From» и «Until»), определили их ширину и соответствующий dataIndex (который должен быть тем же самым как и значение «поля» в форме) и также указываем, что он не должен сортироваться.

Наконец мы определили замену для «Add Item» в моём случае – это «Добавить новую строчку «.

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

Создайте несколько рядов и добавьте в них нужные данные:

Парсинг данных

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

Ниже приведен вызов сниппета, который нужно поместить в ваш шаблон в нужное для этого место:

Как видно на рисунке — я поместил вызов этого сниппета в поле Content, а для вывода его использовал обычный шаблон Base Template, который идёт вместе с базовой установкой MODX Revolution.

Это проверит TV operatingHours и спарсит её значения чанком operatingHoursTpl.
Вот чанк, который мы использовали:

В основном мы выводим табличный ряд для каждого ряда ТВ и помещаем соответствующие значения. В конце, когда уже значение from пусто, выводятся две колонки с текстом «Closed».

Результат

Демо

Это всего лишь маленький пример того, что можно сделать с помощью MIGX! Конечно же, можно сделать намного больше добавили больше колонок, других форм и т.д. Мы об этом поговорим в следующих уроках.

При работе над уроком использовал RTFM MIGX

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

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

Что такое 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-поля источника файлов.

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

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

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

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

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

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

Ввод данных

Шаг 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. Вставьте этот код там, где вы хотите увидеть картинки.

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

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

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

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

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

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

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

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

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

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

Что такое 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-поля источника файлов.

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

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

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

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

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

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

Ввод данных

Шаг 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. Вставьте этот код там, где вы хотите увидеть картинки.

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

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

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

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

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

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

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

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

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

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

Что такое 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-поля источника файлов.

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

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

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

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

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

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

Ввод данных

Шаг 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. Вставьте этот код там, где вы хотите увидеть картинки.

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

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

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

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

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

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

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

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

создания сложных TV-полей через json (пример)

Порой бывает недостаточно простых TV-полей для решения конкретных задач. К примеру, нам нужно создать слайдер, в котором каждый слайд содержит картинку, заголовок и подзаголовок (Да и вообще может содержать ещё больше разных полей).

То есть у одного слайда три поля и самих слайдов может быть сколько угодно.

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

Для начала загрузите и установите этот компонент через «Установщик» в админке сайта.

Создайте новое TV-поля типа «Migx»

Появятся дополнительные вкладки. Заполняем их.

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

[{"caption":"Image", "fields": 
  [
   {"field":"set","caption":"Заголовок"},
   {"field":"description","caption":"Описание"}, 
   {"field":"image","caption":"Изображение","inputTVtype":"image"}
  ]
}]

Разметка колонок:

[
 {"header": "Заголовок", "sortable": "true", "dataIndex": "set"},
 {"header": "Подзаголовок", "sortable": "true", "dataIndex": "description"},
 {"header": "Изображение", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
]

Возможные значение inputTVtype:

• text — простое текстовое поле
• textarea — мультистрочное текстовое поле
• richtext — текстовый редактор
• image — изображение
• checkbox — чекбоксы
• option — radio кнопки
• listbox — список (одиночный выбор)

Вывод MIGX через сниппет getImageList

Данный сниппет идёт в сборке с MIGX.

В «&tvname» мы указываем имя TV, а в &tpl Шаблон вывода (чанк).

Затем создали пару слайдов. Далее остаётся вывести наш слайдер. Для этого используем сниппет компонента MIGX «getImageList».

[[!getImageList?
    &tvname=`slider_main`
    &tpl=`@CODE:
    <li>
        <h3>[[+set]]</h3>
        <h4>[[+description]]</h4>
        <img src="[[+image]]" />
    </li>`
]]

Вывод MIGX через Fenom

Для тех, кто использует Fenom не нужны никакие сниппеты, выводим так:

{set $rows = json_decode($_modx->resource.slider_main, true)}
{foreach $rows as $row}
    <h3>{$row.set}</h3>
    <h4>{$row.description}</h4>
    <img src="{$row.image}" />
{/foreach}

Пояснение: по сути TV с типом MIGX это json-поле, через Fenom мы можем преобразовать его в массив и вывести в цикле, без всяких сниппетов.

Мой пример вызова для слайдера с обрезкой изображений

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

{if $_modx->resource.slider_main}
    <section>
        <ul>
        {set $rows = json_decode($_modx->resource.slider_main, true)}
        {foreach $rows as $row}
            <li>
                {if $row.link}<a href="{$row.link}"/>{/if}
                {set $image = $_modx->runSnippet('!pthumb', [
                    'input' => $row.image,
                    'options' => 'h=300&w=600&zc=C',
                ])}
                <img src="{$image}" title="{$row.title}" />
                {if $row.link}</a>{/if}
            </li>
        {/foreach}
        </ul>
    </section>
{/if}

Источник файлов для картинок

Если вам нужно, чтобы поле «изображение (image)» имел источник файлов не Filesystem, а другой, то прописываем в json-параметр sourse, дя этого поля.

[{"caption":"Image", "fields": 
  [
   {"field":"image","caption":"Изображение","inputTVtype":"image","sources":"[{\"MIGX_id\":\"1\",\"context\":\"web\",\"sourceid\":\"4\"}]"}
  ]
}]

Где в sourceid указываем id нужного источника файлов.

Вы можете добавлять сколько угодно полей и причем разного типа. Полная официальная документация компонента здесь.

Примеры полей

Чекбокс (активность)

// Вкладки формы
{"field":"active", "caption":"Активен", "inputTVtype":"checkbox", "inputOptionValues":"Да==1","default":"1"}
// Разметка колонок
{"header": "Активен", "dataIndex":"active", "show_in_grid":1, "renderer":"this.renderCrossTick"}

Select (Выбор из списка)

// Вкладки формы
{"field":"filter","caption":"Фильтр","inputTVtype":"listbox","inputOptionValues":"первый==1||втоорой==2||третий==3"}
// Разметка колонок
{"header": "Фильтр", "sortable": "true", "dataIndex": "filter"}

Мультизагрузка изображений в админке MODX Revolution при помощи MIGX

В этой статье содержится информация о том, как использовать динамический медиа-источник с собственной автоматически созданной папкой для каждого ресурса. Для одновременной загрузки нескольких файлов мы будем использовать диалог multiupload MODX. Все загруженные файлы будут автоматически добавлены в качестве элементов в сетку MIGX. Удаление элементов приведет к удалению файла изображения.

Шаг 1. Создаем динамический медиа-источник.

В админке переходим в раздел Медиа — Источники файлов.
Создаем новый источник файлов со следующими параметрами:

• Имя: ResourceMediaPath
• Тип источника файлов: Файловая система

Редактируем созданный источник файлов:

Вам также может потребоваться создать каталог с разрешениями на запись для php: assets/resourceimages/

Шаг 2. Создаем переменную (TV)

Закладка «Общая информация»
Имя: resourcealbum
Закладка «Параметры ввода»
Тип ввода: migx
Конфигурации: resourcealbum
Закладка «Доступно для шаблонов»
Отмечаем нужный шаблон, к которому будет привязана переменная
Закладка «Источники файлов»
Для вашего контекста (по умолчанию — web) укажите источник файлов ResourceMediaPath

Шаг 3. Создаем конфигурацию

Переходим: Приложения->MIGX->Закладка: MIGX
Создаем новую конфигурацию кликом по «Добавить элемент»
name: resourcealbum
Жмем ‘Выполнено’ для сохранения конфигурации
Кликаем правой кнопкой мыши по созданной конфигурации и выбираем ‘Экспорт/импорт’
Вставляем в поле Json следующий код:

{
  "formtabs":[
    {
      "MIGX_id":71,
      "caption":"Image",
      "print_before_tabs":"0",
      "fields":[
        {
          "field":"title",
          "caption":"Title",
          "MIGX_id":327,
          "pos":1
        },
        {
          "MIGX_id":329,
          "field":"description",
          "caption":"Description",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"test",
          "useDefaultIfEmpty":"0",
          "pos":2
        },
        {
          "MIGX_id":330,
          "field":"showBtn",
          "caption":"Show button",
          "description":{
            "field":"showBtn",
            "caption":"Show button",
            "inputTV":"showBtn"
          },
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"checkbox",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"yes==yes",
          "default":"yes",
          "useDefaultIfEmpty":1,
          "pos":3
        },
        {
          "MIGX_id":425,
          "field":"image",
          "caption":"Image",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"image",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"none",
          "sourceFrom":"migx",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":4
        }
      ],
      "pos":1
    }
  ],
  "contextmenus":"edit_migx||duplicate_migx||remove_migx_and_image||movetotop_migx||movetotop_bottom",
  "actionbuttons":"loadfromsource||uploadfiles",
  "columnbuttons":"",
  "filters":"",
  "extended":{
    "migx_add":"Add Image",
    "disable_add_item":1,
    "add_items_directly":"",
    "formcaption":"Image",
    "update_win_title":"",
    "win_id":"resourcegallery",
    "maxRecords":"",
    "addNewItemAt":"bottom",
    "multiple_formtabs":"",
    "multiple_formtabs_label":"",
    "multiple_formtabs_field":"",
    "multiple_formtabs_optionstext":"",
    "multiple_formtabs_optionsvalue":"",
    "actionbuttonsperrow":4,
    "winbuttonslist":"",
    "extrahandlers":"this.handleColumnSwitch",
    "filtersperrow":4,
    "packageName":"",
    "classname":"",
    "task":"",
    "getlistsort":"",
    "getlistsortdir":"",
    "sortconfig":"",
    "gridpagesize":"",
    "use_custom_prefix":"0",
    "prefix":"",
    "grid":"",
    "gridload_mode":1,
    "check_resid":1,
    "check_resid_TV":"",
    "join_alias":"",
    "has_jointable":"yes",
    "getlistwhere":"",
    "joins":"",
    "hooksnippets":"",
    "cmpmaincaption":"",
    "cmptabcaption":"",
    "cmptabdescription":"",
    "cmptabcontroller":"",
    "winbuttons":"",
    "onsubmitsuccess":"",
    "submitparams":""
  },
  "columns":[
    {
      "MIGX_id":1,
      "header":"ID",
      "dataIndex":"MIGX_id",
      "width":10,
      "renderer":"",
      "sortable":"false",
      "show_in_grid":1
    },
    {
      "MIGX_id":2,
      "header":"Title",
      "dataIndex":"title",
      "width":20,
      "sortable":"false",
      "show_in_grid":1,
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":"this.textEditor"
    },
    {
      "MIGX_id":3,
      "header":"Image",
      "dataIndex":"image",
      "width":20,
      "renderer":"this.renderImage",
      "sortable":"false",
      "show_in_grid":1
    },
    {
      "MIGX_id":4,
      "header":"Published",
      "dataIndex":"published",
      "width":"",
      "sortable":"false",
      "show_in_grid":1,
      "renderer":"this.renderSwitchStatusOptions",
      "clickaction":"switchOption",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":[
        {
          "MIGX_id":1,
          "name":"published",
          "use_as_fallback":1,
          "value":1,
          "clickaction":"switchOption",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_ticked.png"
        },
        {
          "MIGX_id":2,
          "name":"published",
          "use_as_fallback":"",
          "value":1,
          "clickaction":"switchOption",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_ticked.png"
        },
        {
          "MIGX_id":3,
          "name":"unpublished",
          "use_as_fallback":"",
          "value":"0",
          "clickaction":"switchOption",
          "handler":"",
          "image":"assets\/components\/migx\/style\/images\/cb_empty.png"
        }
      ],
      "editor":""
    }
  ]
}

Готово, можно использовать

Теперь вы сможете создавать ресурсы-галереи, использовать пакетную загрузку изображений и синхронизировать элементы MIGX с вашими файлами. Для вывода изображений в Front-end используйте стандартные средства MIGX — getImageList:

[[getImageList?
  &tvname=`resourcealbum`
  &tpl=`@CODE:<h4>[[+title]]</h4><img src="[[+image]]" />`
  &where=`{"published":"1"}`
]]

Либо используйте внешний чанк, если предполагается обработка изображений при помощи phpthumb или что-то типа того:

[[getImageList?
  &tvname=`resourcealbum`
  &tpl=`imageTpl`
  &where=`{"published":"1"}`
]]

Все что вы видите выше, написано на основе документации.
Там все отлично описано, но.
Есть нюанс, достаточно неприятный: файлы сохраняются в папку assets/resourceimages/{id}/, но id у ресурса появится только после того, как ресурс будет сохранен. То есть если вы создадите ресурс и попытаетесь загрузить изображения — все они загрузятся в корень сайта. Это плохо. Чтобы не допустить подобного, спрячем наше поле и будем показывать его только для сохраненного документа. В тот момент, когда поле спрятано — отображаем вместо него сообщение с призывом сохранить документ. Встроенного механизма для отображения подобных сообщений в MODX нет, поэтому используем костыль:

Создаем новое TV с именем resourcealbum-fake типа checkbox, в поле «Подпись» или «Описание» размещаем нужный текст (например, «Документ не сохранен! Сохраните документ!»). Так как мы не указали никакой разметки для данного поля — при редактировании документа выведется только подпись и описание поля.

Осталось заставить админку MODX отображать поле resourcealbum-fake и прятать поле resourcealbum при создании документа (до первого сохранения) и наоборот, отображать поле resourcealbum и прятать поле resourcealbum-fake при редактировании документа.

Открываем Сервис — Настройка форм. Жмем «Создать новый профиль». Называем как нравится (gallery, например), ставим галочку «Активный», сохраняем.

На созданном профиле кликаем правой кнопкой мыши — «Редактировать». Теперь нам нужно добавить два набора правил. Жмем «Новый набор павил», действие: «Создать ресурс», шаблон: «Фотогалерея» (выбираете шаблон, к которому привязаны TV resourcealbum и resourcealbum-fake. Сохраняем.

На созданном только что правиле кликаем правой кнопкой мыши — «Редактировать». Выбираем закладку «Дополнительные поля» и снимаем галочку напротив resourcealbum.

Повторяем процедуру для поля resourcealbum-fake:

Открываем Сервис — Настройка форм. На профиле gallery кликаем правой кнопкой мыши — «Редактировать». Жмем «Новый набор правил», действие: «Обновить ресурс», шаблон: «Фотогалерея». Сохраняем.

На созданном только что правиле кликаем правой кнопкой мыши — «Редактировать». Выбираем закладку «Дополнительные поля» и снимаем галочку напротив resourcealbum-fake.

Все, теперь при создании ресурса после выбора шаблона в закладке «Дополнительные поля» вместо поля MIGX с возможностью загрузки изображений будет отображаться надпись «Документ не сохранен! Сохраните документ!».

После сохранения ресурса будет доступен инструментарий для мультизаливки файлов:

MIGX — MIGX | Документация MODX

Что такое MIGX? ¶

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

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

Пакет также поставляется с фрагментом (getImageList), который упрощает получение сложных элементов данных из настраиваемого типа ввода MIGX TV.

Пожалуйста, прочтите ниже инструкции по установке MIGX, поскольку они отличаются от типичных пакетов MODX.

MIGX означает M ulti I tems G ridtv для MOD X .

Требования¶

• MODX Revolution 2.1 rc4 или новее
• PHP5 или более поздняя версия MIGX также работает с Revolution 2.0.8 с ограниченной функциональностью.

Загрузить¶

MIGX можно загрузить из диспетчера Revolution через Управление пакетами или из репозитория MODX Extras, доступного здесь: https://modx.com/extras/package/migx

Инструкции по установке¶

Шаг 1. Установка пакета¶

Установите пакет по ссылке выше.

Шаг 2. Настройка страницы настраиваемого диспетчера конфигуратора MIGX (CMP) и диспетчера пакетов¶

Начиная с версии 2.8 эти шаги (1-19) больше не нужны.

Примечание. Было бы разумно создать снимок вашей базы данных MODX перед установкой, поскольку этот процесс изменит структуру вашей базы данных.

• Откройте меню «Система» из Revolution Manager.
• Щелкните пункт меню «Действия».
• Найдите категорию MIGX в списке действий слева. Щелкните по нему правой кнопкой мыши.
• Нажмите «Создать действие здесь»
• Тип «индекс» для контроллера
• Убедитесь, что для пространства имен выбран «migx».
• Выберите «Нет действий» для родительского контроллера.
• Нажмите «Сохранить»
• Обновить страницу
• Найдите категорию «Компоненты» в списке верхних пунктов меню справа.Щелкните по нему правой кнопкой мыши.
• Нажмите «Разместить действие здесь»
  • Лексический ключ: migx
  • Описание: конфигуратор и менеджер пакетов
  • Действие: migx — index (несколько страниц отсортированы по алфавиту. Убедитесь, что вы пропустили все основные действия)
  • Значок: (оставьте поле пустым)
  • Параметры: & configs = packagemanager || migxconfigs || setup
  • Обработчик: (оставьте поле пустым)
  • Разрешения: (оставьте поле пустым)
• Нажать «сохранить»
• Обновить страницу
• Открыть меню «Компоненты»
• Щелкните созданный вами новый элемент действия MIGX.
• Щелкните вкладку Настройка / Обновление
• ПРЕДУПРЕЖДЕНИЕ. Перед этим следующим шагом вы, вероятно, захотите убедиться, что создали моментальный снимок своей базы данных.
• Нажмите кнопку «Настройка»
• Готово!

Обновление до MIGX 2.0¶

Для правильной работы

MIGX 2.0 требуется новое поле в таблице MIGX в вашей базе данных. Эта процедура добавит новое поле auto_increment, MIGX_id, которое необходимо для правильной работы фрагмента getImageList. Перед изменением структуры базы данных важно создать моментальный снимок базы данных.

Шаг 1. Создайте резервную копию базы данных¶

Сделайте резервную копию таблиц базы данных, в частности таблицы modx_site_tmplvar_contentvalues.

Шаг 2: Обновление компонентов¶

1. Откройте меню «Компоненты» в Revolution Manager
2. Щелкните элемент действия MIGX
3. Щелкните вкладку Настройка / Обновление
4. ПРЕДУПРЕЖДЕНИЕ. Перед этим следующим шагом вы, вероятно, захотите убедиться, что создали моментальный снимок своей базы данных.
5. Нажмите кнопку «Обновить»
6. Готово!

Разработка и сообщение об ошибках¶

MIGX хранится и разрабатывается Bruno17 с использованием GitHub: https: // github.ru / Bruno17 / migx

Использование¶

Шаг 1: Установите MIGX¶

Следуйте инструкциям в этом документе.

Шаг 2. Использование серверной части¶

Создайте новый телевизор и примените его к шаблону

Посмотреть инструкции

Шаг 3: Ввод данных¶

Добавьте контент в свой новый телевизор.

Посмотреть инструкции

Шаг 4: Использование внешнего интерфейса¶

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

Посмотреть инструкции

Backend-Usage — MIGX | Документация MODX

Использование серверной части¶

Как работает переменная настраиваемого шаблона MIGX (TV)

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

С каждым сложным элементом данных может быть связано несколько полей. Эти поля могут быть (почти) любым стандартным или настраиваемым типом ввода MODX TV. Эти элементы данных определены в поле «Вкладки формы». Элементы можно сортировать по вкладкам, как определено в JSON.

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

Примеры конфигураций MIGX хранятся в / core / components / migx / examples /.Мы будем ссылаться на «tabs.txt» для этой страницы документации. На этой странице документации предполагается, что у вас установлена ​​надстройка TinyMCE.

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

Телевизоры

«Helper» по-прежнему работают, но больше не нужны; используйте inputTVtype: вместо inputTV:

Шаг 1. Создайте агрегат MIGX TV¶

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

Шаг 2: Настройте тип входа MIGX¶

Для вашего первого MIGX TV нас интересуют только два текстовых поля: «Вкладки формы» и «Столбцы сетки»

Шаг 2.1 Вкладки формы¶

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

Содержимое tabs.txt:

  [{
    "caption": "Информация",
    "fields": [{
        "поле": "заголовок",
        "caption": "Заголовок"
      },
      {
        "поле": "описание",
        "caption": "Описание",
        "inputTVtype": "richtext"
      }
    ]
  },
  {
    "caption": "Изображение",
    "fields": [{
      "поле": "изображение",
      "caption": "Изображение",
      "inputTVtype": "изображение"
    }]
  }
]
  

Это много JSON — давайте разберемся с ним.Первая клавиша, которую вы видите, называется «Заголовок». Имеется в виду название первой вкладки. Вкладка будет помечена как «Информация».

Второй ключ, который вы видите, называется «поля». Это относится к каждому из полей, которые будут доступны с этой вкладки. Поля хранятся в виде вложенной строки JSON. Давайте разберем это.

Первый ключ во вложенной строке JSON называется «поле». Это относится к заполнителю, который сгенерирует MIGX, к которому мы позже обратимся с помощью getImageList.Для первого элемента мы обозначили его «заголовком». Это относится к упомянутой выше короткой строке. Второй ключ помечен как «подпись». Это относится к метке, которую конечный пользователь увидит при заполнении элемента данных. Назовем его «Заголовок», чтобы наши пользователи знали, что заполняют заголовок изображения.

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

Мы закончили с первой вложенной строкой JSON. Теперь мы видим, что есть вторая вкладка — у нее есть метка «Image» и для inputTVtype указано «image». Чтобы указать источник мультимедиа для изображения, добавьте еще один ключ «sourceFrom»: «migx» и назначьте MIGx TV источнику мультимедиа с помощью вкладки «Источники мультимедиа» телевизора.

Мы наполовину закончили с нашим первым телевизором MIGX TV.Теперь мы создали форму для каждого отдельного элемента данных. Клавиши для каждого поля перечислены ниже в таблице для удобства просмотра. Давайте теперь определим сводное представление элементов данных с помощью столбцов сетки на шаге 3.2

Шаг 2.2 Столбцы сетки¶

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

Содержимое columns.txt:

  [
{
  "header": "Заголовок",
  "width": "160",
  "sortable": "true",
  "dataIndex": "название"
}, {
  "заглавное изображение",
  "width": "50",
  "sortable": "false",
  "dataIndex": "изображение",
  "рендерер": "this.renderImage"
}]
  

Вот еще несколько JSON для нас! Этот JSON показывает заголовок изображения, а также его предварительный просмотр.Давайте разберемся с этим.

Первый ключ, «header», относится к метке заголовка, которая будет использоваться для классификации четвертого ключа, «dataIndex». DataIndex относится к заполнителю, который мы указали выше на вкладках формы. Первая запись здесь использует dataIndex, который мы указали выше для «title». У нас также есть еще два ключа: width и sortable. Ширина определяет относительную ширину столбца, а sortable определяет, можно ли сортировать сетку по этому столбцу.

Вторая запись имеет пятый ключ: средство визуализации.Этот ключ позволяет нам рендерить здесь изображение.

Мы закончили определение нашего первого MIGX TV. Чувствует себя прекрасно, правда? Убедитесь, что вы нажали «Сохранить».

Не забудьте сохранить свой ресурс после добавления или редактирования элементов MIGX!

Мы наполовину закончили наш опыт MIGX. Следующий шаг: ввод данных

Ключи для этой сетки перечислены здесь:

Расширенная конфигурация MIGX¶

Множественные формы¶

Содержимое switchFormTabs.txt

  [
  [{
    "formname": "image_description",
    "formtabs": [{
        "caption": "Информация",
        "fields": [{
            "поле": "заголовок",
            "caption": "Заголовок"
          },
          {
            "поле": "tpl",
            "caption": "Tpl",
            "inputTV": "tplDropdown"
          }, {
            "поле": "описание",
            "caption": "Описание",
            "inputTV": "richtext"
          }
        ]
      },
      {
        "caption": "Изображение",
        "fields": [{
          "поле": "изображение",
          "caption": "Изображение",
          "inputTV": "изображение"
        }]
      }
    ]
  }, {
    "имя формы": "только текст",
    "formtabs": [{
      "caption": "Информация",
      "fields": [{
          "поле": "заголовок",
          "caption": "Заголовок"
        },
        {
          "поле": "tpl",
          "caption": "Tpl",
          "inputTV": "tplDropdown"
        }, {
          "поле": "описание",
          "caption": "Описание",
          "inputTV": "richtext"
        }
      ]
    }]
  }]
]
  

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

при использовании нескольких форм будет создано дополнительное поле с именем «MIGX_formname».
Вы можете использовать значение этого поля для переключения tpls во внешнем интерфейсе с помощью & tpl = `@ FIELD: MIGX_formname` и создания чанков с теми же именами, что и ваши имена форм, или вы можете добавить дополнительное поле (listbox-TV с именем tpl например), чтобы выбрать output-tpl для этого элемента.

Предварительный просмотр¶

MIGX имеет функцию предварительного просмотра, которая позволяет вам видеть визуализированный вывод элементов в окне iframe. Чтобы использовать эту функцию предварительного просмотра, вам необходимо создать ресурс предварительного просмотра. Этот ресурс должен иметь такое содержимое, как:

  [[! GetImageList? & tpl = `@ FIELD: MIGX_formname` & tvname =` multiitemsgridTv`]]
[[! getImageList? & tvname = `multiitemsgridTv2`]]
  

Если у вас есть несколько вызовов ресурса предварительного просмотра, вам также потребуются уникальные значения для каждого ТВ в Preview JsonVarKey — по умолчанию — migx_outputvalue

После того, как вы заполнили поле «Preview Url», у вас появится дополнительная кнопка «Preview» на вашем MIGX-TV, которая показывает окно предварительного просмотра с содержимым вашего ресурса предварительного просмотра.

Встроенный редактор¶

Чтобы редактировать поля непосредственно в сетке MIGX, просто добавьте «editor»: «this.textEditor» или «editor»: «this.listboxEditor» в столбцы сетки JSON поля, которое вы хотите сделать доступным для редактирования:

  {"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title", "editor": "this.textEditor"}
  

Backend-Usage — MIGX | Документация MODX

Использование серверной части¶

Как работает переменная настраиваемого шаблона MIGX (TV)

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

С каждым сложным элементом данных может быть связано несколько полей. Эти поля могут быть (почти) любым стандартным или настраиваемым типом ввода MODX TV. Эти элементы данных определены в поле «Вкладки формы». Элементы можно сортировать по вкладкам, как определено в JSON.

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

Примеры конфигураций MIGX хранятся в / core / components / migx / examples /.Мы будем ссылаться на «tabs.txt» для этой страницы документации. На этой странице документации предполагается, что у вас установлена ​​надстройка TinyMCE.

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

Телевизоры

«Helper» по-прежнему работают, но больше не нужны; используйте inputTVtype: вместо inputTV:

Шаг 1. Создайте агрегат MIGX TV¶

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

Шаг 2: Настройте тип входа MIGX¶

Для вашего первого MIGX TV нас интересуют только два текстовых поля: «Вкладки формы» и «Столбцы сетки»

Шаг 2.1 Вкладки формы¶

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

Содержимое tabs.txt:

  [{
    "caption": "Информация",
    "fields": [{
        "поле": "заголовок",
        "caption": "Заголовок"
      },
      {
        "поле": "описание",
        "caption": "Описание",
        "inputTVtype": "richtext"
      }
    ]
  },
  {
    "caption": "Изображение",
    "fields": [{
      "поле": "изображение",
      "caption": "Изображение",
      "inputTVtype": "изображение"
    }]
  }
]
  

Это много JSON — давайте разберемся с ним.Первая клавиша, которую вы видите, называется «Заголовок». Имеется в виду название первой вкладки. Вкладка будет помечена как «Информация».

Второй ключ, который вы видите, называется «поля». Это относится к каждому из полей, которые будут доступны с этой вкладки. Поля хранятся в виде вложенной строки JSON. Давайте разберем это.

Первый ключ во вложенной строке JSON называется «поле». Это относится к заполнителю, который сгенерирует MIGX, к которому мы позже обратимся с помощью getImageList.Для первого элемента мы обозначили его «заголовком». Это относится к упомянутой выше короткой строке. Второй ключ помечен как «подпись». Это относится к метке, которую конечный пользователь увидит при заполнении элемента данных. Назовем его «Заголовок», чтобы наши пользователи знали, что заполняют заголовок изображения.

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

Мы закончили с первой вложенной строкой JSON. Теперь мы видим, что есть вторая вкладка — у нее есть метка «Image» и для inputTVtype указано «image». Чтобы указать источник мультимедиа для изображения, добавьте еще один ключ «sourceFrom»: «migx» и назначьте MIGx TV источнику мультимедиа с помощью вкладки «Источники мультимедиа» телевизора.

Мы наполовину закончили с нашим первым телевизором MIGX TV.Теперь мы создали форму для каждого отдельного элемента данных. Клавиши для каждого поля перечислены ниже в таблице для удобства просмотра. Давайте теперь определим сводное представление элементов данных с помощью столбцов сетки на шаге 3.2

Шаг 2.2 Столбцы сетки¶

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

Содержимое columns.txt:

  [
{
  "header": "Заголовок",
  "width": "160",
  "sortable": "true",
  "dataIndex": "название"
}, {
  "заглавное изображение",
  "width": "50",
  "sortable": "false",
  "dataIndex": "изображение",
  "рендерер": "this.renderImage"
}]
  

Вот еще несколько JSON для нас! Этот JSON показывает заголовок изображения, а также его предварительный просмотр.Давайте разберемся с этим.

Первый ключ, «header», относится к метке заголовка, которая будет использоваться для классификации четвертого ключа, «dataIndex». DataIndex относится к заполнителю, который мы указали выше на вкладках формы. Первая запись здесь использует dataIndex, который мы указали выше для «title». У нас также есть еще два ключа: width и sortable. Ширина определяет относительную ширину столбца, а sortable определяет, можно ли сортировать сетку по этому столбцу.

Вторая запись имеет пятый ключ: средство визуализации.Этот ключ позволяет нам рендерить здесь изображение.

Мы закончили определение нашего первого MIGX TV. Чувствует себя прекрасно, правда? Убедитесь, что вы нажали «Сохранить».

Не забудьте сохранить свой ресурс после добавления или редактирования элементов MIGX!

Мы наполовину закончили наш опыт MIGX. Следующий шаг: ввод данных

Ключи для этой сетки перечислены здесь:

Расширенная конфигурация MIGX¶

Множественные формы¶

Содержимое switchFormTabs.txt

  [
  [{
    "formname": "image_description",
    "formtabs": [{
        "caption": "Информация",
        "fields": [{
            "поле": "заголовок",
            "caption": "Заголовок"
          },
          {
            "поле": "tpl",
            "caption": "Tpl",
            "inputTV": "tplDropdown"
          }, {
            "поле": "описание",
            "caption": "Описание",
            "inputTV": "richtext"
          }
        ]
      },
      {
        "caption": "Изображение",
        "fields": [{
          "поле": "изображение",
          "caption": "Изображение",
          "inputTV": "изображение"
        }]
      }
    ]
  }, {
    "имя формы": "только текст",
    "formtabs": [{
      "caption": "Информация",
      "fields": [{
          "поле": "заголовок",
          "caption": "Заголовок"
        },
        {
          "поле": "tpl",
          "caption": "Tpl",
          "inputTV": "tplDropdown"
        }, {
          "поле": "описание",
          "caption": "Описание",
          "inputTV": "richtext"
        }
      ]
    }]
  }]
]
  

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

при использовании нескольких форм будет создано дополнительное поле с именем «MIGX_formname».
Вы можете использовать значение этого поля для переключения tpls во внешнем интерфейсе с помощью & tpl = `@ FIELD: MIGX_formname` и создания чанков с теми же именами, что и ваши имена форм, или вы можете добавить дополнительное поле (listbox-TV с именем tpl например), чтобы выбрать output-tpl для этого элемента.

Предварительный просмотр¶

MIGX имеет функцию предварительного просмотра, которая позволяет вам видеть визуализированный вывод элементов в окне iframe. Чтобы использовать эту функцию предварительного просмотра, вам необходимо создать ресурс предварительного просмотра. Этот ресурс должен иметь такое содержимое, как:

  [[! GetImageList? & tpl = `@ FIELD: MIGX_formname` & tvname =` multiitemsgridTv`]]
[[! getImageList? & tvname = `multiitemsgridTv2`]]
  

Если у вас есть несколько вызовов ресурса предварительного просмотра, вам также потребуются уникальные значения для каждого ТВ в Preview JsonVarKey — по умолчанию — migx_outputvalue

После того, как вы заполнили поле «Preview Url», у вас появится дополнительная кнопка «Preview» на вашем MIGX-TV, которая показывает окно предварительного просмотра с содержимым вашего ресурса предварительного просмотра.

Встроенный редактор¶

Чтобы редактировать поля непосредственно в сетке MIGX, просто добавьте «editor»: «this.textEditor» или «editor»: «this.listboxEditor» в столбцы сетки JSON поля, которое вы хотите сделать доступным для редактирования:

  {"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title", "editor": "this.textEditor"}
  

Практическое руководство по фавориту MODX: MIGX [How To W / Pics] — Arketi Group

MIGX в MODX

Не секрет, что Аркети любит MODX; система управления контентом (CMS), которая дает вам чистый лист для создания сайта по своему вкусу и создания привлекательных дизайнов.

Нет предопределенной структуры, в которой вы должны создавать свои сайты, и нет настройки вашего дизайна, чтобы он соответствовал видению другого разработчика о том, как сайт должен быть структурирован. Как говорится на сайте MODX: «Creative. Свобода.»

Всегда есть компромисс с такой свободой. Никто не говорит вам, как структурировать свой сайт, вы должны решить, как это сделать самостоятельно! Поначалу это пугает, но как только вы начинаете знакомиться с возможностями, которые предлагает MODX с шаблонными переменными, фильтрами ввода / вывода, фрагментами и фрагментами, это вызывает привыкание.

Сложная часть — узнать, какие инструменты у вас есть и как их использовать, чтобы делать то, что вы хотите.

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

Используя MIGX или MultiItemsGridtv для MODX, Arketi создал баннер с прокручивающейся домашней страницей для нашего клиента, ARA.

Ого, что такое переменная шаблона?

Что ж, давайте сначала объясним это. В MODX переменная шаблона — это настраиваемое поле для ресурса MODX.Ресурсы в MODX могут быть разными, но наиболее распространенными являются представления страниц вашего веб-сайта. Переменные шаблона позволяют хранить или использовать настраиваемые поля на ваших страницах. Это могут быть простые вещи, такие как текст или блок форматированного текста с кодом, или они могут быть более сложными, например дата и время для повторяющихся событий, раскрывающиеся списки, созданные из других ресурсов, или флажки, используемые для включения или выключения страницы. Особенности.

По сути, это один из самых мощных инструментов в MODX.

Настройка MIGX

Я настоятельно рекомендую также прочитать отличный учебник для MIGX, созданный Марком Хамстра здесь и прочитать документацию MIGX здесь .Оба — отличные гиды.

Самая сложная часть всего процесса — это настройка начальной переменной шаблона.

Для начала установите MIGX через страницу управления пакетами MODX. После установки у вас есть доступ к новому типу переменной шаблона. Задайте свое имя, заголовок и описание, как и для любого другого, и назначьте его шаблону, который может использовать эту переменную при доступе к шаблону.

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

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

Строка заголовка определяет, что будет сказано в заголовке, когда вы откроете новый элемент в своей сетке.
На примере заголовка рассмотрим каждый предмет:

• «поле»: «заголовок» — это имя, используемое для поля
• «подпись»: «Заголовок» — отображаемое имя этого поля.
• «описание»: «Заголовок вступления» — это короткий фрагмент описательного текста, показываемый пользователю.
• «inputTV»: «textTV-MIGX» (это ключ) определяет ТИП поля. Сначала это немного сбивает с толку, но эта запись ищет переменную шаблона textTV-MIGX . Это специальная переменная шаблона, которая не назначается шаблону, для которого задано имя textTV-MIGX, а тип установлен как text.

Как вы можете видеть выше, мы используем 5 типов входных телевизоров:

• заполнитель TV-MIGX — это скрытое поле, поэтому оно не отображается при редактировании строки
• textTV-MIGX — это простое текстовое поле
• textareaTV-MIGX — это простая текстовая область
• imageTV-MIGX — это переменная шаблона изображения, позволяющая обрабатывать эскиз.
• homeagepanelcolorTV-MIGX — это специальная переменная шаблона, созданная для этой панели. Это серия переключателей, позволяющих пользователю выбрать цвет

Столбцы сетки ARA выглядят так

Давайте еще раз посмотрим на заголовок:

• «заголовок»: «Заголовок» — это заголовок этого столбца.
• «width»: «100» устанавливает для этого столбца ширину 100 пикселей.
• «sortable»: «true» дает вам возможность отсортировать
• «dataIndex»: «title» связывает этот столбец с именем поля, используемым в наших вкладках формы.

Здесь есть несколько особых случаев, таких как заполнитель и средство визуализации изображения: «this.renderPlaceholder »помогает создать последовательный идентификатор для каждой строки. «Renderer»: «this.renderImage» помогает создать миниатюру изображения в строке.

Когда все будет готово, перейдите к любому ресурсу, который использует эту новую переменную шаблона, и вы увидите что-то вроде этого:

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

Размещение этой переменной шаблона на странице дает нам следующее:

Не очень полезен, но здесь пригодятся два других инструмента MODX — фрагмент и фрагмент.

Сниппеты — это способ, которым MODX может запускать части динамического PHP-кода на странице. Фрагменты — это фрагменты статического текста или других элементов на странице. Чанки не обрабатывают PHP, но их можно использовать для вызова сниппетов. Переменная шаблона, фрагмент под названием «HomepageSlider» и пара фрагментов — все, что нам нужно, чтобы превратить вывод выше в HTML-код, который мы можем использовать.

В шаблоне домашней страницы есть эта строка:

[[HomepageSlider? & input = `[[* HomepageFeatures]]`]]

[[* HomepageFeatures]] — это имя, которое мы дали нашей переменной шаблона

«HomepageSlider» — это имя сниппета, который мы собираемся использовать. Вы можете видеть, что переменная шаблона была назначена параметру с именем input. Это будет передано в сниппет и использовано как переменная PHP.

Вот код фрагмента:
HomepageSlider

Давайте пройдемся через это.

• Во-первых, превратите переменную шаблона во что-нибудь пригодное для использования. Если вы помните, мы назначили параметр для вызова сниппета с именем input. Теперь мы используем одну из функций MODX, чтобы превратить эту строку JSON в массив PHP.
• Поскольку редактор сайта может захотеть изменить порядок слайдов в диспетчере, создайте новую переменную, которая начинается с номера 1, под названием «порядок слайдов».
• Создайте выходную переменную и убедитесь, что в ней ничего нет. Затем мы можем начать добавлять HTML-код.
• Затем мы начинаем проходить через этот большой массив. Сначала установите MIGX_id равным любому номеру переменной для ползунка. В данном случае это первый, поэтому мы его нумеруем.
• Теперь сделайте вызов с помощью одной из функций MODX, называемой getChunk. Это действительно так, как кажется. Он получает фрагмент под названием «HomepageSliderTpl» и использует массив строк (подробнее об этом позже).
• Затем мы увеличиваем порядок слайдов на единицу.
• Мы проходим этот цикл, заполняя новый массив с именем section1.
• Как только этот цикл завершен, мы превращаем массив в новый красивый фрагмент HTML-кода.
• В большинстве случаев теперь вы готовы вернуть свою выходную переменную на страницу. В случае области домашней страницы ARA содержимое отделяется от изображений. Поэтому у нас есть немного больше HTML-кода, а также еще один для каждого цикла и взрыва.

В этом фрагменте есть два оператора getChunk. Вот как выглядят getChunks

HompageSliderTpl

HompageSliderTpl2

Когда этот фрагмент вызывается в каждом цикле или для каждого цикла, ему предоставляется массив с парами ключей.Ключевое значение, связанное с «заголовком», будет помещено в ваш блок, где вы увидите заполнитель [[+ title]]. Вы можете заметить, что эти заполнители имеют те же имена, что и имена наших полей еще в настройке переменной шаблона.

И вот оно! Как только этот фрагмент выполняется на странице, он добавляет немного HTML-кода, который затем может использовать наш слайдер на основе Javascript.

Список изменений для MIGX.

MIGX 2.12.0
==============
выберите поля базы данных из определенного класса и его объединений для вкладок формы и столбцов
добавить категории и фильтр категорий в MIGX Configs
несколько уровней группировки для & groupingField
hooksnippet getformnames
добавить сниппет migxAutoPublish для публикации Cronjobs
добавить beforesave — подключить обработчик обновлений
разрешить строку в свойстве where
добавить шаблон схемы по умолчанию, используемый при создании пакета
и некоторые исправления

MIGX 2.11.0
==============
groupingfield, preparesnippet, _total, _count, улучшить @CODE
крючок

MIGX 2.10.0
==============
hooksnippet getcustomconfigs для importcsvmigx
поддержка макетов строк / столбцов в формах
contextmenu ‘плоские вкладки’
multiupload to db, resizeOnUpload — плагин
[packagemanager] Добавить пакет расширения — функция
уважайте joinalias в export.php и handlepositionselector.php
можно использовать TV-значение в migxresourcemediapath — сниппет
[getImageList] inherit_children_tvname
MIGXdb добавить элемент до / после

MIGX 2.9,7
==============
добавить emtpyTpl
исправить некоторую ширину сетки MIGX — проблемы
импортировать csv в MIGX

MIGX 2.9.6
==============
hooksnippet getcustomconfigs для процессора экспорта
исправить недостающие вкладки формы после сохранения

MIGX 2.9.5
==============
кнопки действия-столбца также для MIGX
экспорт / импорт MIGX-элементов из / в MIGX-TV
заставить работать tinymcewrapper
дополнительные параметры конфигурации для комбинированного фильтра
Исправьте и упростите реализацию Redactor для использования MODx.loadRTE ()

MIGX 2.9.4
==============
[migxResourcemediapath] добавить context_key в качестве параметра пути
кнопка «изменить поля из схемы»
исправить ширину MIGX-сетки
нестандартная сетка для MIGX-TV
уважать context-default-media-source — настройка

MIGX 2.9,3
==============
базовая поддержка нового TinyMCE RTE
исправить assetsUrl / connectorUrl — настройки
MIGX-TV MODX многофайловый загрузчик / автосоздание элементов
Настраиваемые контекстные меню MIGX-TV

MIGX 2.9.2
==============
некоторые мелкие исправления

MIGX 2.9.1
==============
добавить настройку крючка-сниппета
некоторый handleRelated — обновление — функции
уничтожить окно обновления при закрытии

MIGX 2.9
==============
[migxLoopCollection] разрешить использование сторонней базы данных
Улучшения Сотвелла в migxresourcemediapath
новый фрагмент: migxGetCollectionTree
доступ к внешней базе данных из процессоров по умолчанию
улучшения на нескольких вкладках форм
сделать встроенное редактирование для MIGX — сетка возможна
возможность добавлять MIGX-элементы напрямую без модальных
список-редактор-ячейка
movetotop, movetobottom — кнопки для MIGX-сетки
редактирование ячеек для MIgXdb — сетки
возможность добавлять элементы MIGXdb напрямую без модальных
[getImageList] & inheritFrom — наследовать MIGX-элементы от родителей или других ресурсов
какой-то migxredactor — исправления

MIGX 2.8.1
==============
позволяет отключить кнопку «Добавить элемент»
новые конфиги gridperpage и sortconfig
wrapperTpl для getImageList и migxLoopCollection

MIGX 2.8.0
==============
разрешить таблицы при установке
отображать крест, также когда пустая строка
многоразовые activaterelations — процессоры
[migxLoopCollection] tpl_nN
[# 154] чистое TV-значение, если нет MIGX-пунктов
дополнительное db-хранилище вкладок и полей формы
заставить меню работать в MODX 2.3
улучшить description_is_code

MIGX 2.6.8
==============
некоторые другие мелкие исправления
ограничительное условие по обрабатываемым MIGX-тегам для полей формы
Кнопка фильтра для сброса всех фильтров до значения по умолчанию
расширить фильтр даты
сделать основной заголовок cmp переводимым
Migx :: prepareJoins — необязательное правое соединение

MIGX 2.6,7
==============
добавить дату — фильтр
добавить handlepositionselector — процессор
добавить сниппет exportmigx2db

MIGX 2.6.6
==============
только исправления

MIGX 2.6.5
==============
только исправления

MIGX 2.6.4
==============
[redactor-field] получить и использовать свойства файла из redactor-inputTV
добавить renderImageFromHtml — средство визуализации

MIGX 2.6.3
==============
настраиваемое поле редактора с конфигами-конфигурацией, чтобы редактор работал в MIGXdb — CMP

MIGX 2.6.2
==============
исправить проблему с импортированным конфиг-полем, если не массив

MIGX 2.6.1
==============
Сделайте поля формы переводимыми

MIGX 2.6
==============
[getImageList] выводит внутренние массивы в виде json-строки
добавлен польский перевод
[getImageList] разбивает, строит сводки
сделать столбцы сетки переводимыми, позволить пользователю добавлять настраиваемые словари из настраиваемых файлов конфигурации php

MIGX 2.5.11
==============
добавить простой MIGXdb — проверка (требуется только сейчас)
некоторые исправления

MIGX 2.5.9
==============
давайте создадим новые индексы с измененным определением полей из схемы
оптимизировать обработку значений параметров ввода, см. http: // форумы.modx.com/thread/79757/sortable-editable-list-of-checkboxes?page=4#dis-post-483240

MIGX 2.5.8

==============
Добавлен ‘showScreenshot’ (большое изображение во всплывающем окне)
Добавлено поле шаблона для прямого ввода шаблона для renderChunk
Добавлена ​​позиция — селектор для новых MIGX — предметов
Исправление не удаляемых rte-редакторов при использовании Formswitcher
отправить текущие параметры магазина в окно iframe

MIGX 2.5.6

==============

Добавить поддержку редактора modmore.com Redactor
некоторая работа над мультизагрузчиком для MIGXdb
больше eNotice — исправления

MIGX 2.5.2

==============
считывать параметры ввода в MIGX-TV
уважать фильтр по умолчанию — export.php
исправлено пустое значение в TV — конфиги не загружают рендереры и т. д.
исправить измененный параметр processaction-param после export2csv
stopEvent () от onClick — событие

MIGX 2.5.1

==============
исправить ошибку с renderChunk — рендерером

MIGX 2.5

==============
заставить работать разные rtes — поддержка tinymce, ckeditor
некоторые настройки для MIGXfe
cs — лексиконы,
немного eNotice — исправления
исправить с большими целыми числами на TV-id (установить phptype на строку)
ограничить количество записей MIGX

MIGX 2.4.2

==============
columnButtons для migx — сетки
небольшие формы-макеты-моды
добавлена ​​возможность иметь первую вкладку формы вне других вкладок над ними.

добавлена ​​возможность использовать поле TV-description в качестве парсируемых кодовых областей в формах, там парсятся modx-теги —
Здесь можно использовать сниппеты, чанки, фильтры вывода. Все поля записи могут использоваться как заполнители.

migxupdate для MIGXfe
значения по умолчанию для фильтров MIGXdb
обновить co_id в окне iframe
добавить поисковую строку в MIGX-Configurator
читать конфиги прямо из экспортированных конфигурационных файлов из каталога custom-packages, используя команду configname: packagename — configs

MIGX 2.4.1

==============
несколько новых фрагментов:
getDayliMIGXrecord
migxgetотношения

добавлена ​​бета-опция treecombo-filter-option, например, для фильтрации ресурсов в MIGXdb по дереву ресурсов
добавить конфигурацию заголовка окна, сделать заголовок окна динамическим (теперь можно использовать заполнители)
скрыть вкладки в форме, когда только одна вкладка
добавлен selectposition — рендерер

MIGX 2.4.0

==============
новый рендерер — switchStatusOptions
новый рендерер — renderChunk
getImageList — добавлены ‘contains’ и ‘snippet’ — where-filters
добавить duplicate-contextmenue в MIGXdb
новое свойство для getImageList: & reverse
присваивать телевизорам на каждой вкладке CMP уникальный идентификатор
обновить сетку после закрытия окна iframe
добавлены свойства tpl_n {n} tplFirst tplLast tpl_n tpl_oneresult в getImageList
экспортировать поля jsonarray как отдельные поля в csv-export
псевдоним, хлебная крошка и конечный родитель для migxREsourceMediaPath
Добавлен ТВ — описание — поле в конфигурацию

MIGX 2.3.1

==============
some eNotice — ошибка — исправления
добавить тип — конфигурацию в столбцы сетки, теперь можно сортировать также числовые значения в сетке MIGX: см. https://github.com/Bruno17/MIGX/issues/41

MIGX 2.3.0

==============
добавить мультифайл — загрузчик, загрузить в MIGX — mediasource
добавить нагрузку из медиаисточника — кнопка в MIGX
добавить migxResourcePath — сниппет
добавить iframe — support — теперь можно создавать чанки с вызовами сниппетов и показывать результат в окне iframe. используется многофайловым загрузчиком.

MIGX 2.2.3

==============
подтверждение перед перезаписью файлов схемы
некоторые дополнения для управления дочерними ресурсами с помощью MIGXdb
переключение между несколькими формами — конфигурации
добавить renderDate — рендерер, спасибо Jako
дополнительно отправить все store-baseParams при открытии окна формы. Таким образом, мы можем иметь разные формы, например, в зависимости от фильтров.
добавить свойство-родителя для динамических списков со списком фильтров
добавить getliste-where для процессора getlist по умолчанию
экспортировать вкладки форм как чистый json в режиме editraw

MIGX 2.2.2

==============
добавить фрагмент migxLoopCollection
переместить prepareJoins в метод migx
подтверждение перед удалением db-записи, getcombo не использовал idfield
разрешить пустой префикс
добавить возможность использовать таблицы без поля ‘deleted’ и default-getlist-processor
исправить ошибки передачи по ссылке во время вызова
заставить tinyMCE работать с входами richtext-TV в MIGXdb — CMP
исправить префикс, не отправленный для writeSchema
grid add cls ‘main-wrapper’, чтобы немного дополнить его, спасибо jako

MIGX 2.2.0

==============

экспорт / импорт объектов конфигурации как json в / из файлов в каталогах custom-package
новые конфигурации: getlist — defaultsort, joins, gridload_mode (по кнопке, авто)
grid-smarty-template теперь может быть также в каталогах custom-package
переработана обработка объединенных объектов в update-php по умолчанию
добавить connected_object_id baseparam в migx-grid
добавлен сниппет migxLoopCollection

MIGX 2.1.1

==============

исправлена ​​ошибка, из-за которой migx-сниппет не работал с несколькими вызовами на одной странице
resource_id как свойство скрипта для обработчика списка getlist при использовании с migx-snippet

MIGX 2.1.0

==============

добавить и отсортировать в getImageList — сниппет
добавить новый сниппет ‘migx’ для получения элементов из db-таблиц, можно использовать те же конфигурации и getList — процессоры, что и MIGXdb — manager
позволяют иметь файлы конфигурации для сеток и процессоров в другой папке пакета для упрощения упаковки вместе настраиваемые пакеты
подробнее MIGXdb — конфигурации

MIGX 2.0,1

==============

подробнее E_NOTICE — Ошибка — исправления
Исправить отсутствующее добавление — Элемент — Замена — Строка

MIGX 2.0.0

==============

— пл

исправление для Revo 2.2.2
исправить некоторые E_NOTICE — ошибки

— новое в beta5

Настроить несколько CMP — вкладки
packagemanager перенесен на extjs — вкладка
добавлена ​​вкладка MIGX-setup / upgrade — вкладка
добавлен настраиваемый текст и комбо-фильтры

— новое в beta3

Это превью-версия MIGXdb
MIGXdb теперь также можно использовать как настраиваемый CMP
MIGX — конфигуратор вкладок, столбцов, MIGXdb-TV и MIGXdb-CMP
Менеджер пакетов, создание и редактирование схем и таблиц пакетов

— новый:
лучшая совместимость с revo 2.2
работа с медиаисточниками
представил MIGXdb

MIGX 1.2.0
==============
— новый:
слияние scriptProperties с заполнителями
базовая совместимость с modx 2.2
поле autoinc: MIGX_id
autoResourceFolders — функциональность, автосоздание каталога для каждого ресурса

— фиксированный:
url-TV поддержка
проблемы с базовым_путьем на основе контекста
удалить оставшиеся []
убрать Tiny-инстансы при переключении формы
ввод в текстовое поле закрывает окно
fireResourceFormChange для перетаскивания, удаления, дублирования

MIGX 1.1.0
==============
— новый:
& docidVarKey
& процесстелевизоры

— фиксированный:
контекст-файл-путь-проблема

MIGX 1.0,0
==============
— Первый выпуск.

Выпадающее меню с множественным выбором для блоков MODX

Что он делает

Предоставляет менеджерам контента возможность выбирать из предопределенных блоков контента со специально сконфигурированной переменной шаблона MODX (также известной как настраиваемое поле или «TV»).

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

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

Как это сделать

Если синтаксис MySQL для вас новичок, строковые функции, описанные здесь, в документации MySQL, помогут вам сделать это относительно безболезненно.

Во-первых, вы захотите создать телевизор на своем сайте MODX. Тот, что в этом примере, называется «виджеты». В качестве типа ввода выберите «Список (множественный выбор)», а в поле «Значения параметров ввода» введите что-то вроде следующего:

  @SELECT REPLACE (REPLACE (`name`, 'widget_', ''), '_', ''), CONCAT ('[[$',` name`, ']]')
ОТ `modx_site_htmlsnippets`
ГДЕ `category` = 2
  

Разбейте его:

• @SELECT — Узнайте больше о привязке MODX @SELECT в документации по MODX.В основном мы собираемся использовать результаты оператора MySQL SELECT для заполнения параметров ввода TV.
• REPLACE (REPLACE ( — Должен быть лучший способ сделать это, но основная идея состоит в том, что первый «столбец», возвращаемый MySQL, будет использоваться в качестве метки для параметров выбора в раскрывающемся списке, поэтому мы изменяем Имена блоков, замена подчеркивания пробелами и удаление префикса пространства имен «widget_» (подробнее об этом позже).
• CONCAT ( — разделенный запятой, второй «столбец», возвращаемый MySQL, будет использоваться в качестве значения параметров выбора в раскрывающемся списке.В этом случае мы объединяем синтаксис тега блока MODX с именами блоков, превращая вывод в действительный вызов блока MODX.
• FROM modx_site_htmlsnippets — Сообщает MySQL таблицу, из которой можно получить эти записи.
• WHERE category = 2 — Вероятно, мы не хотим, чтобы в этом раскрывающемся списке отображался каждый фрагмент всего сайта, поэтому я создал категорию под названием «Content», которая, как оказалось, имеет идентификатор «2». Вы должны убедиться, что значение в вашем операторе SELECT имеет правильный идентификатор для категории фрагментов, которые вы хотите перечислить, иначе вы получите неправильные фрагменты или вообще ничего. Вы можете увидеть идентификатор категории в дереве элементов:

Теперь все, что вам нужно сделать, это создать блоки виджетов в указанной категории.

Здесь вы можете видеть, что имена блоков имеют префикс «widget_», а в остальном состоят из слов с заглавной буквы, разделенных подчеркиванием. Это соглашение об именах совпадает с нашим оператором SELECT, чтобы дать нам красивый текст метки в раскрывающихся параметрах выбора.

Вот и все.Если вам нужно обеспечить больший контроль над выбранными фрагментами, например, настраивая содержимое каждого виджета, вы можете либо ссылаться на поля ресурсов / телевизоры в фрагментах, либо использовать MIGX для интерфейса выбора фрагментов, но это совсем другое руководство; )

Мои быстрые советы по использованию MODX

MODX — это бесплатная система управления контентом с открытым исходным кодом. Я использую MODX, потому что считаю, что это лучшая CMS для создания сайтов.Это дает вам свободу творчества, но также позволяет создавать мощные безопасные веб-приложения.

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

Как создать форум с помощью MODX — Видеоурок

Автор: Майк Наттолл, 27 июля 2014 г. | Категории: Учебник, Видео |

Из этого видео-урока вы узнаете, как настроить плагин Discuss forum для MODX

.

Как создать блог с помощью MODX в облаке MODX — Видеоурок

Автор: Майк Наттолл, 21 июля 2014 г. | Категории: Основы, Статьи, Учебник, Видео |

Видеоурок, в котором показано, как создать блог с помощью системы управления контентом MODX на собственной системе хостинга MODX MODX Cloud.

Определите скорость каждой страницы вашего веб-сайта

Отправленный Майком Наттоллом 28 мая 2014 г. | Категории: SEO, Linux, Инструменты командной строки |

Насколько быстро работает ваш сайт MODX? Если у вас есть Linux, вы можете узнать, насколько быстро все отдельные страницы загружаются на вашем веб-сайте (время до первого байта) с дополнительным бонусом в виде регенерации кеша для каждой страницы.

Как подсчитать количество экземпляров определенного слова на веб-сайте

Автор: Майк Наттолл, 25 мая 2014 г. | Категории: Linux, SEO |

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

Полезные инструменты командной строки для пользователей Linux, помогающие определить, насколько быстро загружается их веб-сайт

Автор: Майк Наттолл, 25 мая 2014 г. | Категории: Советы, SEO, Инструменты командной строки |

Несколько полезных инструментов командной строки, которые помогут вам узнать, насколько быстро загружаются ваши веб-сайты (и пришло время для первого байта TTFB)

Как добавить кнопки «Назад» и «Далее» к отдельным сообщениям в статьях MODX

Автор: Майк Наттолл, 12 мая 2014 г. | Категории: Статьи |

Просто хотите, чтобы кнопки «Далее» и «Назад» были на ваших отдельных сообщениях в блоге, и у вас возникли проблемы с попыткой понять, как это сделать с помощью getPage и getResources? Что ж, этот пост может помочь.Я делаю это, написав отрывок с нуля.

MIGX: Настройка страницы часто задаваемых вопросов

Автор: Майк Наттолл, май 5, 2014 | Категории: MIGX |

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

Основы

Автор: Майк Наттолл 26 января 2014 г. | Категории: Фрагменты |

Иногда нужно просто напомнить об основах

Безопасность MODX: списки контроля доступа

Автор: Майк Наттолл, 15 декабря 2013 г. | Категории: Безопасность |

MODX Revolution имеет очень мощные функции безопасности.На первый взгляд они могут показаться дьявольски сложными, и на то, чтобы с ними познакомиться, нужно время. Эта статья дает пошаговое руководство по настройке пользователя-клиента, который может редактировать ограниченное количество документов в диспетчере MODX.

MODX: Как получить первое изображение из сообщения в блоге для тегов заголовка HTML протокола Open Graph

Отправленный Майком Наттоллом 10 октября 2013 г. | Категории: Социальные сети, Open Graph Protocol |

Вы можете использовать переменную шаблона MODX, чтобы связать изображение с метатегом изображения Open Graph Protocol.Но это дополнительное поле, которое нужно заполнить для пользователя. Это сокращает работу, если вы можете автоматически захватить первое изображение, которое используется в статье. В этой статье показано, как это сделать.

.