Работа с размерами изображений с помощью класса Uri в Joomla 4

Парадокс, конечно, но это возможно. Казалось бы, причем тут класс ядра для работы со строками url. Но именно он может помочь нам в Joomla 4.

Предисловие

Для улучшения скорости рендера страницы в браузере рекомендуют указывать атрибуты width и height для изображений. Естественно, удобно их заполнять автоматически. Подойти к решению задачи можно с разных сторон. Нужно помнить о том, что не стоит грузить при её решении сервер дополнительными обращениями, так как это будет влиять на скорость рендера страницы на стороне сервера.

Информация из данной заметки относится только к компонентам, использующим конструктор форм Joomla - Form (ex JForm), а так же использующим для вывода API Joomla.

Рендер изображений в HTML в Joomla

В коде для рендера может использоваться сразу класс HTMLHelper с его методом image, либо с помощью стандартных или переопределённых layouts. Layout - это макет вывода, который может использоваться в самых разных частях сайта. По своей логике использования он схож с trait в php - "оторванный от контекста" фрагмент логики. В случае с layout - вывод с преобработкой. Часто внутри layout конечный рендер изображения происходит не простым echo '<img src='.$img_src.'/>', а тем же методом HTMLHelper::image();

Метод HTMLHelper::image() в Joomla

Метод производит рендер изображения со всеми переданными ему атрибутами. Очень удобно с ним работать следующим образом:

use Joomla\CMS\HTML\HTMLHelper;

$img_attribs = [
	'class' => 'w-100 h-auto',
	'width' => '100',
	'height' => '100',
	'loading' => 'lazy',
];

echo HTMLHelper::image($img_src, $img_alt, $img_attribs); 

Метод HTMLHelper::image принимает на вход:

• путь до изображения

• атрибут alt для него

• дополнительные атрибуты, какие Ваша душа пожелает

3-й параметр для всех остальных атрибутов может быть как просто строкой, так и массивом. Таким образом можно добавить массово любые атрибуты для изображений, например, data-атрибуты или уникальные id, которые будут использоваться на js-фронте.

Изображения в Joomla 3

В Joomla 3 поле типа media для выбора картинок в панели администратора заполняется относительным путём до файла вида images/my_file.jpg.

Для определения ширины и высоты файла картинки в Joomla 3 можно было использовать следующую конструкцию:

$size        = getimagesize(JPATH_SITE.'/'.$img_src);
$img_attribs = [
	'class'  => 'w-100 h-auto',
	'width'  => $size[0],
	'height' => $size[1],
];
echo HTMLHelper::image($img_src, $img_alt, $img_attribs); 

Функция getimagesize возвращает размеры изображения в разных форматах, которые уже можно передать в HTMLHelper. Но и сама Joomla 3 в целом не поддерживала формат webp, да и функция getimagesize начала поддерживать этот формат только с php 7.1, но не всегда верно обрабатывать файл, поэтому в сети немало решений с использованием imagecreatefromwebp. В то время, как этот формат является одной из рекомендаций по оптимизации скорости загрузки сайта Google Page Speed.

Изображения в Joomla 4

В Joomla 4 же стандартный медиа-менеджер вставляет в поля не просто путь изображения, а путь, дополненный параметрами вида images/headers/blue-flower.jpg#joomlaImage://local-images/headers/blue-flower.jpg?width=700&height=180

Когда вышла Joomla многие (в том числе и я) не поняли, баг это или фича