Преобразуем атрибуты графических картинок img через DOMDocument и simple_html_dom. PHP

PHP функция преобразования атрибутов widh и height в атрибут style, добавление атрибута class с помощью DOMDocument.


  1. Преобразование атрибутов с помощью DOMDocument
  2. Преобразование атрибутов с помощью simple_html_dom.php

При добавлении графики на сайт через популярные редакторы WYSIWYG значения ширины и высоты картинки задаются с помощью атрибутов widh и height в пиксельном измерении. Даже если использовать обработчик преобразования и сжатия картинок classSimpleImage который может уменьшить загружаемую графику до заданных значений, то всё равно атрибуты widh и height будут жёстко задавать параметры ширины и высоты картинки, что в случаях изменения окна браузера, например в мобильных версиях, вызовет выползания графики за пределы видимой области. Эту задачу поможет решить AI ChatGPT. Осталось только грамотно сформировать вопрос:

Нужна PHP функция, которая находит в передаваемой в неё HTML строке все картинки типа <img src="my-site.com" width="100" height="200" />. Затем получает значения widh и height, и заменяет строку 'width="100" height="200"' на строку 'class="imgCom" style= "max-width: 100px; max-height: 200px;"' где max-width и max-height имеют полученные значения widh, height соответственно и добавлен класс imgCom. В итоге должно получиться: <img src="https://my-site.com/img" class="imgCom" style="max-width: 100px; max-height: 200px;" />

 Ответ AI ChatGPT:

Код, который решает вашу задачу:

PHP
function replaceImageSizeWithClass($htmlString) {
    $dom = new DOMDocument();
    $dom->loadHTML($htmlString);
    $images = $dom->getElementsByTagName('img');
    
    foreach ($images as $image) {
        $width = $image->getAttribute('width');
        $height = $image->getAttribute('height');
        $image->setAttribute('class', 'imgCom');
        $image->setAttribute('style', "max-width: {$width}px; max-height: {$height}px;");
        $image->removeAttribute('width');
        $image->removeAttribute('height');
    }
    
    return $dom->saveHTML();
}

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

PHP
$htmlString = '<img src="https://my-site.com/img" width="100" height="200" />';
$newHtmlString = replaceImageSizeWithClass($htmlString);
echo $newHtmlString;

Результат:

HTML
<img src="https://my-site.com/img" class="imgCom" style="max-width: 100px; max-height: 200px;">

К сожалению предаставленный код работет не совсем корректно. Если в тексте присутствует кирилица, то на выходе она выглядит кракозябрами. Конечно можно сделать преобразование до и после с помощью mb_convert_encoding($html, 'HTML-ENTITIES', "UTF-8"), mb_convert_encoding($text , "UTF-8", 'HTML-ENTITIES'), но зная капризность DOMDocument решил повторить прошлый вопрос к AI, но добавить в условие использование библиотеки simple_html_dom.phpВот, что он ответил:

Конечно, вот пример PHP функции, которая делает то, что вы описали с помощью simple_html_dom.php:

PHP
require_once('path/to/simple_html_dom.php');

function replaceImgDimensions($html) {
    $dom = new simple_html_dom();
    $dom->load($html);

    foreach($dom->find('img') as $img) {
        if($img->width && $img->height) {
            $newClass = 'imgCom';
            $newStyle = 'max-width: '.$img->width.'px; max-height: '.$img->height.'px;';
            $img->class = $newClass;
            $img->style = $newStyle;
            unset($img->width);
            unset($img->height);
        }
    }

    return $dom->save();
}

Чтобы использовать эту функцию, передайте ей HTML строку в качестве аргумента:

PHP
$html = '<html><body><img src="my-site.com" width="100" height="200" /></body></html>';
echo replaceImgDimensions($html);

Это выведет:

PHP
<html><body><img src="my-site.com" class="imgCom" style="max-width: 100px; max-height: 200px;"></body></html>

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

А здесь вы можете скачать simple_html_dom 

Пояснение. Атрибут class="imgCom" добавляется в элемент img для стилизации графики средствами CSS. Например: добавление отступов, тени, контура и других свойств обеспечивающих правильное позиционирование графических объектов на странице.
Дата публикации: 

ТОП 10 случайных публикаций



Сайт разработан студией © WEB-VidST   


Яндекс.Метрика