Оценок: 3

Изменение размера изображений Joomla

Здесь расскажу о своем способе сделать ресайз изображений для материалов Joomla. Сразу скажу, давно (несколько лет) не использовал Joomla, возможно (скорее всего) существуют готовые плагины для этой цели, не искал, решил попробовать такой вариант.

Решение простое, но это не готовый плагин, который можно установить из админки, настроить и использовать. Понадобится всего один PHP файл, который можно подключить в модуле, компоненте и получить изображение заданного размера плюс его вариант в Webp.

Файл image.php

За основу взят класс Image из CMS Opencart. В каталоге images создается каталог cache, куда сохраняются миниатюры с сохранением пути и имен файлов. К имени файла добавляется размер файла. Ссылки на миниатюры получаются постоянными, не зависят от времени жизни кеша. Например:

Оригинал: images/image.jpg
Миниатюра 300x200 px: images/cache/images/lsnoimg-300x200.jpg

Файл image.php нужно немного отредактировать и сохранить в корень сайта (хотя думаю можно в любой каталог, не проверял). Здесь нужно указать свои значения:

define('DIR_R', '/home/...../');//путь к корню сайта, начинается и заканчивается слешем
define('DIR_IMAGE', DIR_R.'images/');//путь к каталогу изображений (для joomla менять не надо)
define('HTTPS_SERVER', 'https://urlvashegosaita.ru/');//Ссылка на сайт

Немного теории по Joomla. CMS позволяет создавать внутри основного шаблона в каталоге html стили для компонентов, модулей и плагинов.
Сделано это для возможности изменить стандартную разметку. Например, стандартный шаблон (стиль) материала лежит по пути "components/com_content/tmpl/article/default.php", что бы переделать его под себя, нужно скопировать этот файл в "templates/ШАБЛОН/html/com_content/article/default.php", где можно редактировать и изменения не будут затерты очередным обновлением.
Копиям можно присваивать отличные от "default" имена и выбирать нужный стиль в параметрах.

Для примера, возьму модуль "Последние материалы", в изначальном варианте это простой список материалов, без изображений. После измений будет выводить материалы с изображениями заданного в шаблоне размера. В конце статьи есть ссылка на готовый вариант.

Сначала скопирую в шаблон сайта стиль модуля "Последние материалы", оригинал находится по пути: "modules/mod_articles_latest/tmpl/default.php", копирую в "templates/ШАБЛОН/html/mod_articles_latest/default.php", далее все изменения будут здесь.

Стандартный код шаблона модуля (та часть, где будут основные изменения):

<?php foreach ($list as $item) : ?>
    <li itemscope itemtype="https://schema.org/Article">
        <a href="<?php echo $item->link; ?>" itemprop="url">
            <span itemprop="name">
                <?php echo $item->title; ?>
            </span>
        </a>
    </li>
<?php endforeach; ?>

Для начала нужно подключить скопированный ранее файл image.php, внутри которого уже есть класс "Image" и функции "imgResize" и "imgWebp". Подключаем где то до foreach, у меня получилось так:

//находим
if (!$list) {
    return;
}
//добавляем
if (!function_exists('imgResize')) {//здесь сделал проверку на существование одной из функций в файле, что бы избежать ошибок
    require_once('image.php');
}

Далее изменю:

<?php foreach ($list as $item) : ?>

На такую конструкцию:

<?php foreach ($list as $item) :
    $webp = '';
    $image = '';
    $images = json_decode($item->images, true);
    //Получаем изображеня с преобразованием из json в массив, далее нужно убрать все лишнее:
    $image = strstr($images['image_intro'], '#',true);
    
    if (!$image) {
    //На случай, если изображения нет, сделал заглушку и использую ее.
    //Если заглушка не нужна, просто закомментируйте строку ниже, при отсутствии изображения оно не будет выводится
        $image = 'images/lsnoimg.jpg';
    }

    if ($image) {
        //Получаем изображение шириной 400 и высотой 190 px
        $image = imgResize($image,400,190);
        //Оно же в Webp
        $webp = imgWebp($image);
    }
    //Также не помешает заполнить alt для картинки, если пусто можно использовать заголовок материала
    $alt = $images['image_intro_alt'];
    if (!$alt) {
        $alt = $item->title;
    }
?>

Теперь заменю следующее:

            <span itemprop="name">
                <?php echo $item->title; ?>
            </span>

На:

<?php if ($image) { ?>
    <picture class="image"><?php if ($webp) { ?><source srcset="<?php echo $webp; ?>" type="image/webp"><?php } ?><img src="<?php echo $image; ?>" alt="<?php echo $alt; ?>" itemprop="image" /></picture>
<?php } ?>
<div class="name" itemprop="name"><?php echo $item->title; ?></div>

Вот в общем то и все. Аналогично можно пробовать добавить в другие модули, компоненты.

Сейчас данный скрипт позволяет получить изображение заданных размеров. Если соотношение сторон оригинала отличается от конечного, оно будет уменьшено, размещено по центру, с белым фоном по краям (слева-справа, или сверху-снизу).

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

Так же можете скачать готовый шаблон модуля "Последние материалы" и посмотреть на итоговый результат.

Оценок: 3