Обзоры расширений Joomla

  • Тип – бесплатный плагин и модуль галереи 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), так как модуль обладает аналогичными настройками.

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

Настройки плагина разделены на две вкладки.

  1. Плагин (рисунок ниже).
  2. Дополнительные параметры.

Все опции оснащены понятными текстовыми подсказками на русском языке или их назначение ясно из описания (не будем их рассматривать). Для подробного знакомства рекомендую установить плагин и начать читать\испытывать каждую его опцию. Поменяли что-то, применили, посмотрели результат.

Настройка sigplus
Настройка sigplus

Опции на вкладке Дополнительные параметры (рисунок ниже) также оснащены подсказками. В принципе, можно здесь ничего не менять. Всё и так нормально сконфигурировано. Сюда стоит заглянуть в случае возникновения проблем или при необходимости оптимизации скорости работы плагина.

sigplus
sigplus

Для быстрого старта достаточно просто активировать плагин и перейти в редактор материалов Joomla для вставки специального кода галереи (рисунок ниже), предварительно закачав на сервер в папку «images» нужные Вам фото.

Joomla sigplus
Joomla sigplus

В фигурных скобках, до и после «aleksius-com», заключены открывающий и закрывающий теги галереи sigplus. Обратите внимание, что в дополнительных параметрах можно изменить само слово «gallery». Учитывайте, если Вы это сделаете после размещения тега с галереями в материалах, старые теги галереи перестанут обрабатываться, и вместо галерей будут их текстовые значения.

«aleksius-com» – это имя папки с изображениями, которые нужно выводить в этой галерее. Сама папка «aleksius-com» находится внутри папки «images».

Если не менять настройки плагина по умолчанию и не добавлять дополнительными параметрами сам «тег\заменитель» sigplus (об этом ниже в статье), то галерея в материале Joomla выглядит так, как показано ниже на рисунке.

Галерея в материале Joomla
Галерея в материале 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="http://aleksius.com/" target="_blank">и всей семьи Симпсонов</a>.

А сам код в редакторе будет такой.

{ga11ery lightbox=none}aleksius-com{/ga11ery}

Обратите внимание, что «ga11ery» написано с ошибкой специально! Вам нужно писать «gallery» (без кавычек). Это сделано для того, чтобы нижеуказанный текст в моей статье не обработался плагином и не исчез.

Если не добавлять «lightbox=none», то текст со ссылкой появится во всплывающем окне под изображением.

Слайд-шоу

Для создания слайд-шоу в Joomla sigplus достаточно разместить нижеуказанный код в редакторе материалов.

{ga11ery lightbox=none animation=2000 slider=boxplus.transition slider:effect=fade}sigplus/buildings{/ga11ery}

Обратите внимание, что «ga11ery» написано с ошибкой специально! Вам нужно писать «gallery» (без кавычек). Это сделано для того, чтобы нижеуказанный текст в моей статье не обработался плагином и не исчез.

  • «animation=2000» – скорость анимации (смены слайдов) в миллисекундах.
  • «slider=boxplus.transition slider:effect=fade» – тип анимации. Больше примеров типов анимации можно найти тут.

Водяной знак

Можно настроить sigplus на автоматическое добавление водяного знака на изображения. Файл изображения, включая его расширение, должен называться «watermark.png». Требования к файлу: формат PNG с прозрачностью, цветовая модель RGB.

Если поместить файл «watermark.png» в основную папку, которая задана в настройках галереи. Тогда именно этот водяной знак будет применяться ко всем галереям, где Вы активируете применение водяного знака.

Если поместить файл «watermark.png» в папку с конкретной галереей и активировать его применение, то он будет применяться только к изображениям этой галереи и будет показан в самой галерее.

Если поместить файл «watermark.png» в папку с конкретной галереей, активировать его применение, то он будет применяться только к изображениям этой галереи и будет показан в самой галерее.

Если поместить файл «watermark.png» в папку «watermark» внутри конкретной галереи, активировать его применение, то он будет применяться только к изображениям этой галереи и не будет показан в самой галерее.

Обратите внимание, что «ga11ery» написано с ошибкой специально! Вам нужно писать «gallery» (без кавычек). Это сделано для того, чтобы нижеуказанный текст в моей статье не обработался плагином и не исчез.

{ga11ery watermark=1 watermark:position=se watermark:x=10 watermark:y=40}sigplus/sonnabend{/ga11ery}

  • «watermark=1» – активация применения водяного знака.
  • «watermark:position=se» – позиция водяного знака. Справа внизу от английского (south east – юго-восток).
  • «watermark:x=10» – отступ по горизонтали в пикселях от ближайшего края изображения.
  • «watermark:y=40» – отступ по вертикали в пикселях от ближайшего края изображения.

Одно изображение

Можно расположить в материале Joomla галерею из одного изображения. Код такой:

{ga11ery width=100 height=100}sigplus/birds2/IMG_0496.jpg{/ga11ery}

Обратите внимание, что «ga11ery» написано с ошибкой специально! Вам нужно писать «gallery» (без кавычек). Это сделано для того, чтобы нижеуказанный текст в моей статье не обработался плагином и не исчез.

  • «width=100» – ширина миниатюры в пикселях.
  • «height=100» – высота миниатюры в пикселях.
  • «sigplus/birds2/IMG_0496.jpg» – путь к файлу изображения.

Как видите, Joomla sigplus весьма функциональная галерея. Возможно, не хватает графического интерфейса для упрощения её настроек, как например в RSMediaGallery. Но учитывая то, что sigplus бесплатный компонент (модуль), это вполне приемлемо.

 

Полезные ссылки: