Преобразуем атрибуты графических картинок img через DOMDocument и simple_html_dom. PHP
PHP функция преобразования атрибутов widh и height в атрибут style, добавление атрибута class с помощью DOMDocument.
- Преобразование атрибутов с помощью DOMDocument
- Преобразование атрибутов с помощью 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:
Код, который решает вашу задачу:
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();
}Пример использования:
$htmlString = '<img src="https://my-site.com/img" width="100" height="200" />'; $newHtmlString = replaceImageSizeWithClass($htmlString); echo $newHtmlString;
Результат:
<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:
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 строку в качестве аргумента:
$html = '<html><body><img src="my-site.com" width="100" height="200" /></body></html>'; echo replaceImgDimensions($html);
Это выведет:
<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 случайных публикаций
Последние публикации
