Увеличение изображений Joomla

29 Мая 2022г. в 04:33

Хотел бы отметить, что сегодня для джумла увеличение картинки, мы реализуем при наведении курсора мыши на область рисунка, причем само “зумирование” будет незначительным и необходимо лишь для визуальной составляющей страниц сайта, то есть для улучшения внешнего вида и акцентирования внимания пользователей на конкретном изображении.

Выше указанный эффект мы с Вами создадим двумя способами. Первый – ручной, в котором мы используем стандартные правила языка CSS3 и второй, с использованием функционала библиотеки UIkit. Конечно, для такого простого эффекта, как увеличение изображений Joomla, сторонняя библиотека не нужна, и Вы в этом убедись далее, но библиотека достаточно мощная и функциональная и в данной статье я хотел бы познакомить Вас с ней, возможно она Вас заинтересует и Вы будете использовать ее в своих дальнейших наработках.

Итак, как я и говорил, для начала реализуем вышеуказанный эффект при помощи языка стилей CSS3. Первым делом, давайте откроем произвольный материал и в качестве изображения вводного текста определим некое изображение, я выбрал стандартное из системы Windows.




Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео
Изображение довольно большое и в пользовательской части с использованием шаблона Beez3, материал будет выглядеть следующим образом.



Теперь, давайте добавим класс для добавленного изображения. Для этого перейдем в каталог используемого шаблона, в моем случае это Beez3, по адресу templates\beez3. Далее в папке html, перейдем в каталог com_content, в котором содержатся переопределения макетов одноименного компонента. Так как на главной странице, отображается список материалов определенной категории, а значит нас интересуем вид category, поэтому переходим в одноименную папку и открываем в текстовом редакторе файл blog_item.php, который формирует один единственный материала, для дальнейшего отображения.

Его код достаточно большой, но нас интересует следующий участок.

<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</div>
<?php endif; ?>
1
2
3
4
5
6
7
8
9
10
<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</div>
<?php endif; ?>
То есть данный участок кода формирует изображение, а значит, давайте добавим класс image, к тегу img.

<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
class = "image" src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</div>
<?php endif; ?>
1
2
3
4
5
6
7
8
9
10
<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
class = "image" src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</div>
<?php endif; ?>
Обратите внимание, что при добавлении изображения, я не указал его заголовок в одноименном поле, а значит условие if ($images->image_intro_caption) не выполнится, в противном же случае нужно было добавить дополнительный класс к стандартному — caption.

Теперь, возвращаемся в корень каталога шаблона, переходим в папку css и откроем в текстовом редакторе файл personal.css, в который добавим несколько строк кода.

.image {
overflow:hidden;
width: 380px;
height:250px;
}
.image img {
transition: all 1s ease-out;
}

.image img:hover{
transform: scale(1.2);
}
1
2
3
4
5
6
7
8
9
10
11
12
.image {
overflow:hidden;
width: 380px;
height:250px;
}
.image img {
transition: all 1s ease-out;
}

.image img:hover{
transform: scale(1.2);
}
То есть для начала определяем общие правила для элементов с классом image, а затем используя правила transition и transform формируем анимацию увеличения изображений. При этом время анимации и ее тип указывается при помощи transition, а действие, которое будет выполнено, непосредственно в transform. Функция scale(1.2), используется для изменения масштаба элемента по горизонтали и вертикали. В нашем случае, нужно выполнить масштабирование по обеим осям пропорционально, а значит при вызове функции, мы указываем коэффициент масштаба, только в первом параметре. То есть увеличим изображение на 20%. Собственно вот и все, достаточно сохранить изменения и перейти в пользовательскую часть для проверки результатов.




Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео
Теперь если навести курсор мыши на изображение, Вы увидите плавное увеличение изображения. Теперь, реализуем вышеуказанный функционал, используя библиотеку Uikit. Для этого переходим на официальный сайт библиотеки, и скачаем ее к себе на компьютер, кликнув по кнопке “Download UIkit”.



Далее распакуем полученный архив.



Содержимое, полученное после распаковки необходимо добавить в соответствующие папки шаблона. Каталог fonts добавляем в корень папки шаблона. Затем откроем в текстовом редакторе файл index.php и подключим к сайту стили и библиотеку Uikit.

$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template .'/css/uikit.css');
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/javascript/uikit.js', 'text/javascript');
1
2
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template .'/css/uikit.css');
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/javascript/uikit.js', 'text/javascript');
Ссылку на страницу официальной документации по библиотеке Uikit Вы найдете на главной странице, в главном меню, под заголовком Core.



Здесь нас интересует раздел компонента Overlay, который используется для формирования дополнительный слоев изображений, к которым можно применить различные стили.



Соответственно возвращаемся к файлу blog_item.php, который мы с Вами открывали ранее и добавим новые классы при формировании изображения (классы фреймворка Uikit).

<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="uk-overlay uk-overlay-hover uk-border-rounded img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="uk-border-rounded uk-overlay-scale caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
class="uk-border-rounded uk-overlay-scale" width="380px" height="250px" src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</div>
<?php endif; ?>
1
2
3
4
5
6
7
8
9
10
<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="uk-overlay uk-overlay-hover uk-border-rounded img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="uk-border-rounded uk-overlay-scale caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
class="uk-border-rounded uk-overlay-scale" width="380px" height="250px" src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</div>
<?php endif; ?>
При этом используются следующие классы:

uk-overlay – включаем в работу компонент фреймворка Overlay.

uk-overlay-hover – указываем событие, которое необходимо обрабатывать, то есть при наведении мыши будет задействовано масштабирование изображения.

uk-border-rounded – добавляем скруглённые рамки.

uk-overlay-scale – включаем масштабирование изображения при выполнении события hover – то есть наведение курсора мыши.

Сохранив изменения, мы можем перейти в пользовательскую часть и проверить результаты нашей работы. Собственно, теперь Вы знаете, как реализовать в CMS Joomla увеличение картинки.

Если Вы желаете научиться работать с CMS Joomla на профессиональном уровне, Вам будет интерес наш новый курс — Joomla-Профессионал: создание расширений для joomla. На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!