Адаптивные изображения материалов Joomla 3 (4) встроенными средствами

Адаптивные изображения материалов Joomla 3 (4) встроенными средствами

542 в Joomla 0

Доброго времени суток уважаемый посетитель моего блога! В данном обзоре речь пойдет о выводе адаптивных картинок в материалах Joomla. Если быть точнее, дело касается картинок анонса и полной статьи, то есть тех картинок, которые мы загружаем через поля для картинок во вкладе «Изображения и ссылки» при создании материала.

Загрузка изображений для статьи Joomla 3
Загрузка изображений для статьи в Joomla 3

Что такое адаптивные изображения?

Давайте разберем сначала, что значит «Адаптивные картинки». А что до сих пор они не адаптивными были что-ли? Спросите вы… Адаптивные изображения в данном случае, это те изображения, которые подстраиваются под определенное разрешение (контрольную точку) при уменьшении окна браузера. Суть тут такова: зачем загружать большую картинку версии настольного ПК шаблона в мобильном устройстве. Например, картинка у нас в блоке контента версии ПК шириной 850 пикс., а сам контейнер контента шириной 840 пикс.

Другое дело экран мобильного, например, здесь уже ширина контейнера контента равна 340 пикс. Исходя из всего получается, что мы выводим на мобильном устройстве ту же картинку шириной 850 пикс. (высоту я не затрагиваю, она подгоняется автоматически), что конечно же не логично. Ведь ширина контейнера в мобильной версии шириной всего 340 пикс. Тут надо бы, по хорошему, вывести картинку шириной 350 пикс. (нужно брать немного больше, чем ширина родительского элемента).

Как вы поняли, здесь идет погоня за производительностью. То есть мобильное устройство менее производительнее, чем ПК, поэтому для него отдаем более оптимизированные и «легкие» изображения, более подходящие по размеру. Если вы для оптимизации своего сайта будете использовать такой инструмент, как PageSpeed Insights от Гугла, то он будет «ругаться» на ваши не оптимизированные изображения в мобильной версии. И звучать это будет следующим образом — «Настройте эффективную кодировку изображений«.

Адаптивные изображения — тег Picture

В HTML 5 есть такой тег, как «picture«, который позволяет в наборе с элементами source выводить оптимальное изображение под определенный размер экрана браузера. Выглядит это следующим образом:

<picture>
    <source media="(min-width: 1200px)" srcset="../images/xl-image.jpg">
    <source media="(min-width: 992px)" srcset="../images/lg-image.jpg">
    <source media="(min-width: 768px)" srcset="../images/md-image.jpg">
    <source media="(min-width: 576px)" srcset="../images/sm-image.jpg">
    <source srcset="../images/xs-image.jpg">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAADs=" alt="">
</picture>

Исходя из приведенного кода, видно, что под определенное разрешение браузера подставляется картинка определенного размера. Естественно точки останова (breakpoints) вы можете использовать свои. Я для примера использовал брекпоинты Bootstrap. В теге img в атрибуте src можно указать любое изображение, но так как браузерная поддержка данного тега довольно широкая я использую заглушку (пустая картинка, закодированная в Base64).

Теперь, когда мы разобрались с тегом picture, можем выводить изображения. Но тут встает вопрос — как нам создать из одной большой картинки несколько вариантов для разных экранов? Создавать вручную — не вариант, так как поле для загрузки картинки одно, да и вообще хотелось бы все автоматизировать. Для этого мы воспользуемся встроенными средствами Joomla, а конкретно классом для работы с изображениями — Image. То есть не нужно устанавливать сторонние расширения, все уже включено. Работает это все и в Joomla 4, которая выйдет стабильным релизом, я так думаю, уже скоро.

Читайте также:  Дополнительные поля в Joomla 3.7.+

Я подготовил определенный файлы, которые вам нужно залить в свой шаблон сайта. Но тут надо разобраться, что к чему. Для начала качаем файлы для своей версии Joomla.

Распаковываем архив с файлами, находим папку html и копируем в корень своего шаблона (не сайта, а именно вашего активного шаблона). По идее все. Уже должно все работать. Загружаем картинку в админ панели при создании/редактировании материала и она должна выводиться на сайте уже адаптивной с теми настройками, что я установил по умолчанию (контрольные точки останова и размеры картинок).

Адаптивное изображение вступительного материала Joomla 3
Адаптивное изображение вступительного материала Joomla 3

По умолчанию в Joomla изображения выводятся в шаблоне отдельным лайаутом (layout), то есть отдельным шаблоном. Лежат эти отдельные шаблоны в папке ../html/layouts. Полные пути до изображений шаблонов вступительной и полной статьи будут следующими:

/ваш шаблон/html/layouts/joomla/content/intro_image.php // Шаблон изображения анонса статьи
/ваш шаблон/html/layouts/joomla/content/full_image.php // Шаблон изображения полной статьи

Так что все необходимые правки вносим в данные файлы. Их, кстати, можно переопределить для каждого типа материала. Но здесь я этого делать не буду, так как это не тема статьи.

Настройки параметров изображений

Теперь давайте рассмотрим некоторые настройки. Для примера я буду рассматривать файл лайаута intro_image.php.

<?php
/*
* Image sizes:
* Ratio: 4:3 (web format)
* Xl (min-width: 1200px) = 700x300
* Lg (min-width: 992px) = 700x300
* Md (min-width: 768px) = 540x230
* Sm (min-width: 576px) = 700x300
* Xs (min-width: 320px) = 500x230
* */

$viewports = [
    "xl" => "700x300",
    "lg" => "700x300",
    "md" => "540x230",
    "sm" => "700x300",
    "xs" => "500x230"
];

foreach ($viewports as $key => $value) {
    $vp[$key] = JLayoutHelper::render(
        'com_content.article.intro-image',
        array(
            'article' => $displayData,
            'options' => array(
                'resolution' => $value,
                'force_png' => true
            )
        )
    );
}
?>
<picture>
    <source media="(min-width: 1200px)" srcset="<?php echo $vp["xl"]; ?>">
    <source media="(min-width: 992px)" srcset="<?php echo $vp["lg"]; ?>">
    <source media="(min-width: 768px)" srcset="<?php echo $vp["md"]; ?>">
    <source media="(min-width: 576px)" srcset="<?php echo $vp["sm"]; ?>">
    <source srcset="<?php echo $vp["xs"]; ?>">
    <img
        <?php if ($images->image_intro_caption) : ?>
            <?php echo 'title="' . htmlspecialchars($images->image_intro_caption) . '"'; ?>
        <?php endif; ?>
        class="intro-image<?php echo $images->image_intro_caption ? ' caption' : null; ?>"
        src="data:image/gif;base64,R0lGODlhAQABAAAAADs="
        alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>"
        itemprop="thumbnailUrl"
    />
</picture>

Итак, для редактирования брикпоинтов или контрольных точек мы можем править массив $viewports и выставить необходимые вам значения. Я не буду тут подробно комментировать. Далее, для взаимодействия с файлами лайаутов (файлы, которые создают миниатюры) используется встроенный класс Joomla JLayoutHelper (LayoutHelper) и метод render. Он принимает два параметра: 1. путь до файла лайаута; 2. массив с передаваемыми параметрами. Какие параметры можно передавать? Они указаны в комментарии в начале каждого файла.

  • resolution‘ (String) — Размер изображения в формате, например, ‘700×300’;
  • force_png‘ (Boolean, default: false) — Конвертировать всегда в формат PNG для сохранения прозрачности заднего фона. Но этот параметр, не работает как положено, сразу скажу;
  • force_rewrite‘ (Boolean, default: true) — пересоздавать миниатюры автоматически
  • thumb_method‘ (Method class Image, default: Image::CROP_RESIZE) — метод создания эскиза изображения. Здесь нужно смотреть документацию по API класса Image, какие еще существуют методы.
Читайте также:  Как установить Joomla на локальный сервер

Файлы layout для создания эскизов изображений

Теперь давайте разберем сами файлы, в которых создаются эскизы изображений. На самом деле файл для создания эскизов один и называется он — thumbnail.php. Лежит по следующему пути в шаблоне сайта:

/templates/ваш_шаблон/html/layouts/image/thumbnail.php // Путь до файла создания эскизов

Здесь используется встроенный в ядро Joomla класс для работы с изображениями — Image (jImage в joomla 2.5).

Далее, в папке layouts/com_content у нас существуют следующие файлы:

/templates/ваш_шаблон/html/layouts/com_content/article/full-image.php // Layout вывода изображения полной статьи
/templates/ваш_шаблон/html/layouts/com_content/article/intro-image.php // Layout вывода изображения анонса статьи
/templates/ваш_шаблон/html/layouts/com_content/article/image.php // Общий layout вывода анонса и полной статьи изображения

/templates/ваш_шаблон/html/layouts/com_content/category/image.php // Layout вывода изображения категории

Это промежуточные файлы-макеты. Как видим здесь также существует файл макета для создания миниатюр изображений для категории. Вообще, можно использовать общий файл макета (image.php), но если вам нужна дополнительная гибкость в настройке, то созданы отдельно файлы: full-image.php и intro-image.php. Пути до данных файлов указываются в файлах intro_image.php и full_image.php. Пример файла intro_image.php я привел выше.

...
$vp[$key] = JLayoutHelper::render(
   'com_content.article.intro-image',
   ...
   )
...

Адаптивные изображении категории Joomla

Категория материалов помимо описания может содержать еще и картинку. При создании/редактировании категории нам необходимо указать картинку, а также включить в настройках материалов отображение картинки категории.

Картинка категории Joomla при создании
Картинка категории Joomla при создании
Включение отображение картинки категории материала Joomla
Включение отображение картинки категории материала Joomla
Если вы скачали архив с моими файлами и распаковали в свой шаблон сайта, то ниже ничего делать не нужно. Шаблон переопределения блога категории уже включен в архив.

Для того, чтобы для каждого экрана создалась миниатюра нам необходимо править шаблон блога категории. В первую очередь создаем переопределение шаблона блога категории. То есть нам достаточно переопределить всего лишь один файл — blog.php и лежать он должен по следующему путив вашем шаблоне:

/templates/ваш_шаблон/html/com_content/category/blog.php // Шаблон блога категории

Далее находим строчки вывода картинки. У меня это строка 55-я строка. Заменяем код вывода картинки

<?php if ($this->params->get('show_description_image') && $this->category->getParams()->get('image')) : ?>
    <img src="<?php echo $this->category->getParams()->get('image'); ?>" alt="<?php echo htmlspecialchars($this->category->getParams()->get('image_alt'), ENT_COMPAT, 'UTF-8'); ?>"/>
<?php endif; ?>

на

<?php if ($this->params->get('show_description_image') && $this->category->getParams()->get('image')) : ?>
	<?php
	/*
		* Image sizes:
		* thumbXl (min-width: 1200px) = 700x300
		* thumbLg (min-width: 992px) = 700x300
		* thumbMd (min-width: 768px) = 540x230
		* thumbSm (min-width: 576px) = 700x300
		* thumbXs (min-width: 320px) = 500x230
		* */

	$viewports = [
		"xl" => "700x300",
		"lg" => "700x300",
		"md" => "540x230",
		"sm" => "700x300",
		"xs" => "500x230"
	];

	foreach ($viewports as $key => $value) {
		$vp[$key] = JLayoutHelper::render(
			'com_content.category.image',
			array(
				'article' => $this->category,
				'options' => array(
					'resolution' => $value
				)
			)
		);
	}
	?>
	<picture>
		<source media="(min-width: 1200px)" srcset="<?php echo $vp["xl"]; ?>">
		<source media="(min-width: 992px)" srcset="<?php echo $vp["lg"]; ?>">
		<source media="(min-width: 768px)" srcset="<?php echo $vp["md"]; ?>">
		<source media="(min-width: 576px)" srcset="<?php echo $vp["sm"]; ?>">
		<source srcset="<?php echo $vp["xs"]; ?>">
		<img
			src="data:image/gif;base64,R0lGODlhAQABAAAAADs="
			alt="<?php echo htmlspecialchars($this->category->getParams()->get('image_alt'), ENT_COMPAT, 'UTF-8'); ?>"
		/>
	</picture>
<?php endif; ?>

Естественно размеры и настройки можете указать свои.

На этом все. Если остались вопросы задавайте в комментариях. До встречи в других постах!

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (2 оценок, среднее: 5,00 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории
Отзывы на сайте под управлением Joomla