Инструкция по автоматической оптимизации изображений в MODX с помощью phpthumbon

 

 

 

Эта инструкция поможет автоматизировать оптимизацию изображений в контенте страниц сайта на MODX, превращая простые <img> теги в адаптивную разметку с тегом <picture>, поддержкой WebP, ленивой загрузкой и сжатием для ускорения загрузки страниц и улучшения SEO.

Первоисточник - Оптимизация изображений на сайте в CMF MODX Revolution

Необходимые условия

Установите пакет phpthumbon в MODX (Пакеты > Установщик). Он генерирует обрезанные, сжатые версии изображений на лету, поддерживает различные форматы и размеры для ускорения работы сайта.

Метод автоматизации

Этот подход заменяет все <img> теги в контенте ресурса на оптимизированную разметку с тегом <picture>. Плагин анализирует контент перед выводом страницы и вставляет чанк с плейсхолдерами (src, alt, desc). Подходит для статей, где редакторы просто загружают изображения в визуальный редактор.

Шаг 1: Создайте чанк imgOptimize

1. В MODX создайте новый чанк с именем imgOptimize.
2. Вставьте в него следующую разметку (она генерирует responsive изображение с WebP и JPG, ленивой загрузкой и опциональной подписью):

<div class="article-image__wrapper">
    <picture>
        <source 
            media="(max-width: 566px)" 
            srcset="[[phpthumbon?input=`[[+src]]`&options=`w=450&f=webp&q=85&dpi=72`]],
                    [[phpthumbon?input=`[[+src]]`&options=`w=800&f=webp&q=85&dpi=72`]] 2x" 
            type="image/webp">
        <source 
            media="(min-width: 567px)" 
            srcset="[[phpthumbon?input=`[[+src]]`&options=`w=800&f=webp&q=85&dpi=72`]],
                    [[phpthumbon?input=`[[+src]]`&options=`w=1600&f=webp&q=85&dpi=72`]] 2x" 
            type="image/webp">
        <source 
            media="(min-width: 567px)" 
            srcset="[[phpthumbon?input=`[[+src]]`&options=`w=800&f=jpg&q=85&dpi=72`]],
                    [[phpthumbon?input=`[[+src]]`&options=`w=1600&f=jpg&q=85&dpi=72`]] 2x" 
            type="image/jpeg">
        <img 
            loading="lazy" 
            decoding="async"
            src="[[phpthumbon?input=`[[+src]]`&options=`w=450&f=jpg&q=85&dpi=72`]]"
            srcset="[[phpthumbon?input=`[[+src]]`&options=`w=800&f=jpg&q=85&dpi=72`]] 2x" 
            alt="[[+alt]]">
    </picture>
</div>
[[+desc:notempty=`<p class='article-img-desc'>[[+desc]]</p>`]]

• Плейсхолдеры: [[+src]] — путь к изображению, [[+alt]] — альтернативный текст, [[+desc]] — подпись (из title-атрибута).
• Опции phpthumbon: Ширина (w), формат (f=webp/jpg), качество (q=85), DPI=72. Для обрезки добавьте h=...&zc=1 (например, для фиксированных размеров).
• Адаптация: Измените ширины и брейкпоинты в соответствии с дизайном.

Обратите внимание: если изменить имя чанка, то в коде плагина также необходимо изменить имя чанка на новое.

Шаг 2: Создайте и настройте плагин imgAutoOptimize

1. Создайте новый плагин с именем imgAutoOptimize.
2. Вставьте следующий PHP-код в содержимое плагина (он заменяет <img> теги на вызов чанка):

if ($modx->event->name != "OnLoadWebDocument" || $modx->context->key == 'mgr') {
    return;
}

// Получаем контент страницы
$output = $modx->resource->get('content');

function optimage($img) {
    $src = preg_replace('/.* src="(.*?)".*/m', '$1', $img[0]);
    $alt = preg_replace('/.* alt="(.*?)".*/m', '$1', $img[0]);
    $desc = preg_replace('/.* title="(.*?)".*/m', '$1', $img[0]);
    
    // Если совпадений нет, оставляем пустым
    if ($src == $img[0]) {
        $src = '';
    }
    if ($alt == $img[0]) {
        $alt = '';
    }
    if ($desc == $img[0]) {
        $desc = '';
    }
    
    return '[[$imgOptimize?src=`'.$src.'`&alt=`'.$alt.'`&desc=`'.$desc.'`]]';
}

// Заменяем <img> теги (учитывая обертку в <p>)
$output = preg_replace_callback('/(<p>\s*|)<img[^>]*>(\s*<\/p>|)/m', 'optimage', $output);

// Обновляем контент ресурса
$modx->resource->set('content', $output);

3. В настройках плагина:
   • Прикрепите к системному событию OnLoadWebDocument (вкладка "System Events").
   • Включите плагин.

Как это работает?

• Плагин запускается перед рендерингом страницы (не в админке).
• Извлекает атрибуты src, alt и title из каждого <img> тега.
• Заменяет тег на вызов чанка imgOptimize с параметрами.
• Результат: Все изображения в статьях автоматически оптимизируются — responsive, сжатые и с fallback.

Финальные советы

• Тестирование: Проверьте на странице с изображениями — они должны стать <picture> с WebP.
• Кэширование: Phpthumbon кэширует версии, так что сайт ускорится после первой генерации.
• Доработка: Если в контенте сложный HTML (например, кастомные обертки), подправьте regex в плагине.
• Производительность: Для больших сайтов мониторьте сервер — динамическая генерация может нагружать.

 

 

 

 

 

---

---