- Тип – бесплатный плагин и модуль галереи Joomla.
В предыдущих статьях цикла о галереях Joomla мы уже рассматривали такие расширения как RSMediaGallery, Simple Image Gallery и Phoca Gallery. В этой статье рассмотрим бесплатный плагин (и модуль) галереи sigplus (полное название sigplus Image Gallery Plus). При помощи плагина можно вставить галерею и в материал Joomla, и в другое место, где происходит обработка плагинов содержимого Джумал (например, в VirtueMart, при активации соответствующей опции). А модуль может быть размещён в любой позиции шаблона.
Расширение весьма популярное. В каталог расширений Joomla (JED) оно было добавлено 13 марта 2010 года. Последнее, на данный момент, обновление – 12 октября 2015. Есть версии под Джумла 1.5 – 3.х. Расширение переведено на русский язык, включая всплывающие подсказки и элементы навигации фронтальной части сайта. Всего на JED 285 отзывов. Общий рейтинг – 100 (всё кроме поддержки (99) оценено пользователями по максимуму). Учитывая, что плагин sigplus бесплатный, мелкие недовольства со стороны пользователей касательно поддержки незначительны.
В обзоре будет участвовать последняя, на момент написания статьи (28.11.2015), русскоязычная версия sigplus 1.4.3.1, Joomla 3.4.5. Будет рассмотрен только плагин (в материале Joomla), так как модуль обладает аналогичными настройками.
В этой статье есть видео урок по настройки sigplus 1.5 (нужно начать смотреть видео с 41:07). Также видео есть в статье «Пошаговая инструкция Joomla (часть 4). Самостоятельное создание сайта» (нужно начать смотреть с 12:48).
В качестве аналогичного плагина галереи советую рассмотреть SIGE - Simple Image Gallery Extended.
Joomla sigplus
Рассмотрим основные особенности\возможности расширения Joomla sigplus.
- Увеличение изображений с lightbox-эффектом.
- Поддержка различных «движков» (механизмов) всплывающих окон: Slimbox, prettyPhoto, FancyBox и boxplus. Всего 12 вариантов (можно без анимации) на основании jQuery и MooTools.
- Эффекты при переключении между изображениями.
- Настройка макета галереи (вывода миниатюр).
- Поддержка распространённых графических форматов изображений: *.JPG, *.PNG и *.GIF (с и без прозрачности).
- Качественная генерация миниатюр с автоматической обрезкой и центрированием.
- Прогрессивная загрузка изображений, которая позволяет оптимизировать пропускную способность соединения. Загружаются только те изображения, которые показаны в галерее в данный момент.
- Возможность вставки неограниченного количества галерей в материал и на страницу.
- Мультиязычные, адаптированные для поисковых систем подписи изображений и описания. Их можно задавать глобально для всех изображений или индивидуально для каждого.
- Поддержка RTL-языков (тип письменности справа-налево).
- Возможность загрузки исходной версии изображения.
- Обработка мета-данных изображений.
- Извлечение IPTC мета-данных из изображений.
- Настройки отображения изображений в галерее (отступы, граница, прозрачность, задержка анимации и так далее).
- Настройка сортировки изображений в галерее (по имени файла, по дате изменения, случайно и другое).
- Настройка элементов навигации по галерее во фронтальной части сайта.
- Поддержка больших галерей (100 и более изображений в одной галерее).
- «Чистый» CSS и JavaScript код. Валидный XHTML 1.0 и 1.1. Успешное прохождение автоматической проверки WCAG v2 AAA (при использовании файла с подписями).
- Возможность задавать настройки глобально для всех галерей и изменять настройки для конкретной галереи.
- Плагин и модуль переведены на 12 языков, включая русский, английский, немецкий, французский.
- Поддержка Joomla 1.5-3.х (не все версии sigplus).
- Кэширование миниатюр.
- Возможность задания степени сжатия (качества) создаваемых миниатюр.
- Возможность показа изображений с другого домена или поддомена (но с той же файловой системы).
- Возможность изменить «метод» встраивания галереи в страницу для оптимизации скорости загрузки страницы и устранения ошибок. Особенно актуально для больших галерей (100 и более изображений).
- Возможность загрузки библиотек по CDN.
- Поддержка обработки изображений при помощи библиотек PHP GD или ImageMagick.
- Возможность создания и восстановления резервных копий настроек sigplus.
- Возможность показа изображений из альбомов Picasa.
- Добавление водяных знаков на изображения.
- Наличие подробных описаний опций на русском языке и детальной англоязычной справки.
Советую ознакомиться с рекомендациями по именам файлов изображений и по самим изображениям. При использовании в именах файлов изображений русских букв могут быть проблемы с отображением галереи.
Настройка плагина sigplus
Настройки плагина разделены на две вкладки.
- Плагин (рисунок ниже).
- Дополнительные параметры.
Все опции оснащены понятными текстовыми подсказками на русском языке или их назначение ясно из описания (не будем их рассматривать). Для подробного знакомства рекомендую установить плагин и начать читать\испытывать каждую его опцию. Поменяли что-то, применили, посмотрели результат.
Опции на вкладке Дополнительные параметры (рисунок ниже) также оснащены подсказками. В принципе, можно здесь ничего не менять. Всё и так нормально сконфигурировано. Сюда стоит заглянуть в случае возникновения проблем или при необходимости оптимизации скорости работы плагина.
Для быстрого старта достаточно просто активировать плагин и перейти в редактор материалов Joomla для вставки специального кода галереи (рисунок ниже), предварительно закачав на сервер в папку «images» нужные Вам фото.
В фигурных скобках, до и после «aleksius-com», заключены открывающий и закрывающий теги галереи sigplus. Обратите внимание, что в дополнительных параметрах можно изменить само слово «gallery». Учитывайте, если Вы это сделаете после размещения тега с галереями в материалах, старые теги галереи перестанут обрабатываться, и вместо галерей будут их текстовые значения.
«aleksius-com» – это имя папки с изображениями, которые нужно выводить в этой галерее. Сама папка «aleksius-com» находится внутри папки «images».
Если не менять настройки плагина по умолчанию и не добавлять дополнительными параметрами сам «тег\заменитель» sigplus (об этом ниже в статье), то галерея в материале Joomla выглядит так, как показано ниже на рисунке.
По нажатию на миниатюру появится увеличенное изображение (рисунок ниже).
Галерея в материале Joomla
На сайте разработчика sigplus можно найти очень-очень много полезных материалов по тонкой настройке галереи (на английском языке).
Как быстро и легко вставить галерею в материал Joomla, без дополнительных настроек, мы рассмотрели выше. Эти действия обязательны для всех случаев работы с плагином sigplus. Рассмотрим самые полезные,на мой взгляд, особенности расширенной настройки sigplus.
Обратите внимание, что для применения изменений в настройках галереи нужно будет очищать кэш Joomla.
Добавление подписи и описания к изображениям
Создайте в папке с изображениями галереи файл «labels.txt» (без кавычек) (его имя можно изменить в настройках плагина). В него поместите следующий текст:
Simpsons-(45).jpg|Гомер|Гомер Симпсон - глава семейства Симпсонов.
Simpsons-(56).jpg|Барт|Барт Симпсон - сын Гомера и Мардж Симпсон.
Simpsons-(59).jpg|Мардж|Мардж Симпсон - жена Гомера Симпсона, мать Барта Симпсона.
Рассмотрим первую строку:
- «Simpsons-(45).jpg» – имя файла изображения, включая расширение.
- «|» – разделитель фрагментов синтаксической конструкции.
- «Гомер» – заголовок изображения (на рисунке ниже №1). Используется в теге «alt» (замещающий текст – текст, который будет отображаться вместо изображения, если оно не загрузилось у пользователя).
- «Гомер Симпсон - глава семейства Симпсонов.» – описание изображения и текст всплывающей подсказки (на рисунке ниже №2), появляющейся при наведении на миниатюру изображения. Используется в теге «title». Помимо вывода на странице для пользователей, можно использовать в качестве описания картинки для поисковых систем (может улучшить ранжирование в поиске по картинкам).
На рисунке ниже показана левая нижняя часть окна просмотра увеличенной версии изображения.
Обратите внимание, когда какой-то файл изображения не значится в файле «labels.txt», но есть в папке галереи, он не будет отображаться в галерее.
Для мультиязычных сайтов «labels.txt» должен называться так: «labels.en-GB.txt», «labels.ru-RU.txt» и так далее. Где «ru-RU» и «en-GB» – тег языка. Предварительно активируйте опцию Многоязычная поддержка в дополнительных параметрах плагина.
Можно сделать так, чтобы по нажатию на миниатюры изображений не открывались увеличенные картинки, а происходил переход на заданный URL. Для этого в «labels.txt» поместите ссылку (выделено жирным).
Simpsons-(59).jpg|Мардж|Мардж Симпсон - жена Гомера Симпсона, мать Барта Симпсона <a href="https://aleksius.com/" target="_blank">и всей семьи Симпсонов</a>.
А сам код в редакторе будет такой.
{gallery lightbox=none}aleksius-com{/gallery}Если не добавлять «lightbox=none», то текст со ссылкой появится во всплывающем окне под изображением.
Слайд-шоу
Для создания слайд-шоу в Joomla sigplus достаточно разместить нижеуказанный код в редакторе материалов.
{gallery lightbox=none animation=2000 slider=boxplus.transition slider:effect=fade}sigplus/buildings{/gallery}- «animation=2000» – скорость анимации (смены слайдов) в миллисекундах.
Водяной знак
Можно настроить sigplus на автоматическое добавление водяного знака на изображения. Файл изображения, включая его расширение, должен называться «watermark.png». Требования к файлу: формат PNG с прозрачностью, цветовая модель RGB.
Если поместить файл «watermark.png» в основную папку, которая задана в настройках галереи. Тогда именно этот водяной знак будет применяться ко всем галереям, где Вы активируете применение водяного знака.
Если поместить файл «watermark.png» в папку с конкретной галереей, активировать его применение, то он будет применяться только к изображениям этой галереи и будет показан в самой галерее.
Если поместить файл «watermark.png» в папку «watermark» внутри конкретной галереи, активировать его применение, то он будет применяться только к изображениям этой галереи и не будет показан в самой галерее.
{gallery watermark=1 watermark:position=se watermark:x=10 watermark:y=40}sigplus/sonnabend{/gallery}- «watermark=1» – активация применения водяного знака.
- «watermark:position=se» – позиция водяного знака. Справа внизу от английского (south east – юго-восток).
- «watermark:x=10» – отступ по горизонтали в пикселях от ближайшего края изображения.
- «watermark:y=40» – отступ по вертикали в пикселях от ближайшего края изображения.
Одно изображение
Можно расположить в материале Joomla галерею из одного изображения. Код такой:
{gallery width=100 height=100}sigplus/birds2/IMG_0496.jpg{/gallery}- «width=100» – ширина миниатюры в пикселях.
- «height=100» – высота миниатюры в пикселях.
- «sigplus/birds2/IMG_0496.jpg» – путь к файлу изображения.
Как видите, Joomla sigplus весьма функциональная галерея. Возможно, не хватает графического интерфейса для упрощения её настроек, как например в RSMediaGallery. Но учитывая то, что sigplus бесплатный компонент (модуль), это вполне приемлемо.
В следующей статье «Обзор ImageSizer. Увеличение изображения Joomla по клику» мы рассмотрим ещё одно бесплатное расширение, которое упрощает работу с изображениями.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
- Официальная документация (на англ.).
