Преобразуем атрибуты графических картинок 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
01function replaceImageSizeWithClass($htmlString) {
02    $dom = new DOMDocument();
03    $dom->loadHTML($htmlString);
04    $images = $dom->getElementsByTagName('img');
05     
06    foreach ($images as $image) {
07        $width = $image->getAttribute('width');
08        $height = $image->getAttribute('height');
09        $image->setAttribute('class', 'imgCom');
10        $image->setAttribute('style', "max-width: {$width}px; max-height: {$height}px;");
11        $image->removeAttribute('width');
12        $image->removeAttribute('height');
13    }
14     
15    return $dom->saveHTML();
16}

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

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

Результат:

HTML
1<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
01require_once('path/to/simple_html_dom.php');
02 
03function replaceImgDimensions($html) {
04    $dom = new simple_html_dom();
05    $dom->load($html);
06 
07    foreach($dom->find('img') as $img) {
08        if($img->width && $img->height) {
09            $newClass = 'imgCom';
10            $newStyle = 'max-width: '.$img->width.'px; max-height: '.$img->height.'px;';
11            $img->class = $newClass;
12            $img->style = $newStyle;
13            unset($img->width);
14            unset($img->height);
15        }
16    }
17 
18    return $dom->save();
19}

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

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

Это выведет:

PHP
1<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   


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