Что такое MIGx и Fenom в MODX
MIGx (Multi Items Grid eXtended) — это дополнение для MODX Revolution, которое позволяет создавать произвольные наборы полей внутри одного TV-поля ресурса. По сути, MIGx реализует функциональность «повторяемых групп полей»: например, галерея изображений с заголовком и описанием к каждому, список пунктов меню, набор блоков с иконкой и текстом. Каждая такая группа называется строкой (row), а весь набор хранится в виде JSON-строки в базе данных.
Fenom — шаблонизатор для MODX, интегрированный в дополнение pdoTools. Он предоставляет синтаксис, похожий на Smarty или Twig, и позволяет писать логику прямо в шаблонах без создания отдельных сниппетов. Fenom поддерживает условия, циклы, фильтры и вызов MODX-сниппетов через специальный синтаксис.
Как хранятся данные MIGx
Данные MIGx хранятся в поле TV в виде JSON-строки. Каждая строка представляет собой объект с ключами, соответствующими полям, которые были настроены в конфигурации MIGx. Пример типичной структуры JSON для галереи:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[ { "MIGX_id": "1", "image": "assets/images/photo1.jpg", "title": "Первое фото", "description": "Описание первого фото" }, { "MIGX_id": "2", "image": "assets/images/photo2.jpg", "title": "Второе фото", "description": "Описание второго фото" } ] |
При выводе через pdoTools/Fenom эти данные преобразуются в массив строк, по которому можно итерироваться с помощью цикла foreach.
Вывод изображений из MIGx через Fenom шаблоны
Для вывода данных MIGx в Fenom используется сниппет pdoResources или специальный сниппет getImageList (из дополнения MIGx). Рассмотрим вариант с getImageList и Fenom-чанком:
|
1 2 3 4 5 |
{'!getImageList' | snippet : [ 'tvname' => 'gallery', 'tpl' => '@INLINE {$image}', 'docid' => $modx->resource->get('id') ]} |
Более гибкий подход — передать имя Fenom-чанка через параметр tpl. Чанк получает переменную $row, содержащую все поля текущей строки MIGx:
|
1 2 3 4 5 |
{'!getImageList' | snippet : [ 'tvname' => 'gallery', 'tpl' => '@FILE chunks/gallery_item.tpl', 'docid' => $modx->resource->get('id') ]} |
Интеграция с phpThumbOn для ресайза изображений
phpThumbOn — это дополнение для MODX, которое реализует «on-the-fly» изменение размера изображений. Оно интегрируется с Fenom через специальный фильтр phpthumbon, что позволяет прямо в шаблоне указывать нужные размеры изображения без написания отдельного PHP-кода.
Принцип работы: phpThumbOn перехватывает запрос к изображению, изменяет его размер согласно переданным параметрам, кеширует результат и отдаёт готовое изображение. Это удобно для генерации превью в листингах и адаптивных изображений.
Синтаксис вызова phpthumbon из Fenom
В Fenom фильтр phpthumbon применяется к переменной с путём к изображению через оператор | (пайп). Базовый синтаксис:
|
1 |
{$row.image | phpthumbon : 'w=300&h=200'} |
Это именно тот синтаксис, который используется в реальных проектах. Вот исходный код, который уже используется:
|
1 2 |
{set $image = $row.image} <img src="{$image | phpthumbon : 'w=1280&h=720&zc=0'}" alt="{$row.title}" title="{$row.title}"> |
Здесь сначала значение поля image из строки MIGx сохраняется в переменную $image, а затем к ней применяется фильтр phpthumbon с параметрами ресайза.
Параметры ресайза phpThumbOn
Фильтр phpthumbon принимает строку параметров в формате URL query string. Основные параметры:
- w — ширина результирующего изображения в пикселях
- h — высота результирующего изображения в пикселях
- zc — режим обрезки (zoom crop): 0 — вписать в размер с сохранением пропорций, 1 — обрезать по центру, C — обрезать по центру, T — обрезать сверху
- q — качество JPEG (1-100, по умолчанию 75)
- f — формат вывода (jpg, png, gif, webp)
- bg — цвет фона для вписанного изображения (hex без #)
- far — принудительное соотношение сторон
|
1 2 3 4 5 6 7 8 9 10 11 |
{* Ресайз с обрезкой по центру 300x200 *} {$row.image | phpthumbon : 'w=300&h=200&zc=1'} {* Вписать в 800x600, качество 90% *} {$row.image | phpthumbon : 'w=800&h=600&zc=0&q=90'} {* Только ширина, высота пропорционально *} {$row.image | phpthumbon : 'w=600'} {* Конвертация в WebP *} {$row.image | phpthumbon : 'w=400&h=300&zc=1&f=webp'} |
Пример полного шаблона Fenom с MIGx изображением
Рассмотрим полный пример чанка для вывода галереи MIGx с ресайзом через phpThumbOn. Чанк вызывается из основного шаблона:
|
1 2 3 4 5 6 7 |
{* Вызов в основном шаблоне страницы *} {'!getImageList' | snippet : [ 'tvname' => 'gallery', 'tpl' => '@FILE chunks/gallery_item.tpl', 'docid' => $modx->resource->get('id'), 'wrapperTpl' => '@INLINE <div class="gallery">{rows}</div>' ]} |
Содержимое чанка gallery_item.tpl:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{set $image = $row.image} {set $thumb = $image | phpthumbon : 'w=400&h=300&zc=1&q=85'} {set $full = $image | phpthumbon : 'w=1280&h=720&zc=0'} {if $image} <div class="gallery__item"> <a href="{$full}" class="gallery__link" data-lightbox="gallery"> <img src="{$thumb}" alt="{$row.title | default : ''}" title="{$row.title | default : ''}" loading="lazy" width="400" height="300" > </a> {if $row.title} <p class="gallery__caption">{$row.title}</p> {/if} </div> {/if} |
Оптимизация: кеширование thumbnails
phpThumbOn автоматически кеширует созданные миниатюры в папке assets/cache/phpthumb/. При повторном запросе того же изображения с теми же параметрами возвращается кешированная версия без повторной обработки. Это важно для производительности при большом количестве изображений.
Рекомендации по оптимизации:
- Используйте параметр f=webp для современных браузеров — WebP в среднем на 30% легче JPEG при том же качестве
- Добавляйте атрибут loading=”lazy” к тегу
img— браузер будет загружать изображения только когда они попадают в область видимости - Указывайте атрибуты width и height у изображений — это предотвращает прыжки макета (CLS) при загрузке страницы
- Настройте периодическую очистку кеша phpThumb через cron или системный планировщик MODX
- Для высоконагруженных проектов рассмотрите вынос хранилища кеша на быстрый SSD или использование CDN для статики
Связка Fenom + MIGx + phpThumbOn в MODX позволяет строить гибкие галереи и медиа-блоки с автоматическим ресайзом без написания PHP-кода. Фильтр phpthumbon в Fenom делает синтаксис вызова минимальным и читаемым, а кеширование гарантирует производительность даже при большом объёме медиаконтента.
