Автоматическое сжатие изображений в поле content [MODX]

Задача: сделать чтобы все изображения, загруженные в поле content, обрезались до заданных размеров и выводились пользователю, само поле content, при этом, не заменяется новыми изображениями.

В данном примере, мы будем использовать:

Плагин с событием OnLoadWebDocument
Пакет для обработки изображений pThumb
Скрипт ленивой загрузки изображений lazysizes

Разобьем весь код на части:

Создаем плагин с событием OnLoadWebDocument, названием любым, например OnLoadWebDocument

В поле код плагина помещаем следующий код:
```
$eventName=$modx->event->name;
switch($eventName) {
    case 'OnLoadWebDocument':
        // код события
    break;
}
```

В код события помещаем следующий код:

Если id шаблона не 1, то выходим

$template=$modx->resource->template;
if((int)$template!==1){
    break;
}

Если контент пустой, то выходим

$content=$modx->resource->content;
$content=mb_convert_encoding(html_entity_decode($content), 'HTML-ENTITIES', 'UTF-8');
if(!$content){
    break;
}

Берем контент, оборачиваем как страницу html, парсим, если изображений не найдено, то выходим

$doc=new DOMDocument();
$doc->encoding="utf-8";
$doc->recover=true;
$doc->strictErrorChecking=false;
$doc->loadHTML('<html>'.$content.'</html>', LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$images=$doc->getElementsByTagName('img');
if(count($images)==0){
    break;
}

Задаем настройки для изображений, максимальную ширину, изображение по умолчанию
```
$maxwidthimg=740;
$defaultimg='/assets/img/icon-loading.svg';
```

Проходимся цикром по всем изображениям, берем только те у которых есть src и он не равен изображению по умолчанию, добавляем класс lazyload и атрибут data-src, задаем ширину для изображения

foreach($images as $image){
    $src=$image->getAttribute('src');
    if(!$src){
        continue;
    }

    if($src==$defaultimg){
        continue;
    }
    
    $newsrc=$modx->runSnippet('pThumb', array(
        'input' => $src,
        'options' => 'w='.$maxwidthimg.'&f=jpg&q=90',
    ));
    if(!$newsrc){
        continue;
    }
    
    $image->setAttribute('data-src',$newsrc);
    $image->setAttribute('src',$defaultimg);
    
    $class=$image->getAttribute('class');
    $classarray=explode(',',$class);
    $classarray[]='lazyload';
    $newclass=implode(' ',$classarray);
    $image->setAttribute('class',$newclass);
    
    $width=$image->getAttribute('width');
    if((int)$width>$maxwidthimg){
        $image->setAttribute('width','100%');
        $image->removeAttribute('height');
    }
}

Сохраняем полученный результат и заменяем наш контент новым, убирая обертку html
```
$modx->resource->content=str_replace(array('<html>','</html>'),'',$doc->saveHTML());
```

В итоге получаем следующий год:

$eventName=$modx->event->name;
switch($eventName) {
    case 'OnLoadWebDocument':
        
        $maxwidthimg=740;
        $defaultimg='/assets/img/icon-loading.svg';
        
        $template=$modx->resource->template;
        if((int)$template!==1){
            break;
        }

        $content=$modx->resource->content;
        $content=mb_convert_encoding(html_entity_decode($content), 'HTML-ENTITIES', 'UTF-8');
        if(!$content){
            break;
        }

        $doc=new DOMDocument();
        $doc->encoding="utf-8";
        $doc->recover=true;
        $doc->strictErrorChecking=false;
        $doc->loadHTML(''.$content.'', LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
        
        $images=$doc->getElementsByTagName('img');
        if(count($images)==0){
            break;
        }
        foreach($images as $image){
            $src=$image->getAttribute('src');
            if(!$src){
                continue;
            }

            if($src==$defaultimg){
                continue;
            }
            
            $newsrc=$modx->runSnippet('pThumb', array(
                'input' => $src,
                'options' => 'w='.$maxwidthimg.'&f=jpg&q=90',
            ));
            if(!$newsrc){
                continue;
            }
            
            $image->setAttribute('data-src',$newsrc);
            $image->setAttribute('src',$defaultimg);
            
            $class=$image->getAttribute('class');
            $classarray=explode(',',$class);
            $classarray[]='lazyload';
            $newclass=implode(' ',$classarray);
            $image->setAttribute('class',$newclass);
            
            $width=$image->getAttribute('width');
            if((int)$width>$maxwidthimg){
                $image->setAttribute('width','100%');
                $image->removeAttribute('height');
            }
        }
            
        $modx->resource->content=str_replace(array('',''),'',$doc->saveHTML());
    break;
}

Автоматическое сжатие изображений в поле content [MODX]

Другие статьи