- Видео обзор.
- Основные возможности и особенности.
- Настройки плагина.
- Создание галереи прямо в материале Joomla.
SIGE - Simple Image Gallery Extended – русскоязычный бесплатный плагин Joomla для создания галерей и их вставки прямо в материалы и везде, где обрабатываются плагины контента (модуль HTML-код, описание товаров VirtueMart и т.д.).
Видео обзор
- Настройки плагина – 00:00:48.
- Заголовки и описания картинок – 00:06:22.
- Галерея в виде маркированного списка – 00:07:56.
- Водяной знак – 00:10:26.
- Свой порядок сортировки изображений – 00:11:26.
- Создание галереи прямо в материале Joomla – 00:11:59.
Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.
Ссылки из видео:
В предыдущих статьях были рассмотрены разные расширения для создания галерей, слайдеров и слайд-шоу. От простых, в плане функциональности, типа Simple Image Gallery и sigplus, до сложных, типа Phoca Gallery и DJ-MediaTools. Simple Image Gallery Extended позволяет отображать картинки из папки на хостинге и управлять этим из настроек самого плагина или переопределять для каждой галереи отдельно.
На официальном сайте расширений Joomla 92 отзыва, расширение добавлено 19 ноября 2014 года.
- Общий рейтинг – 5 из 5.
- Функциональность – 5 из 5.
- Простота использования – 5 из 5.
- Поддержка – 4 из 5.
- Документация – 5 из 5.
В обзоре участвует последняя, на момент написания статьи (01.06.2020), русскоязычная версия Simple Image Gallery Extended 3.3.4 в Joomla 3.9.18. Шаблон фронтальной части сайта – RSClario 2.0.
Также есть платная версия Simple Image Gallery Extended Pro – 100 € (на 01.06.2020) за все платные расширения разработчика на 1 год без ограничений по доменам.
Основные возможности и особенности
- Создание галереи прямо в материале Joomla и везде, где обрабатываются плагины контента.
- Плагин переведён на русский, английский, немецкий и другие языки.
- Создание галерей из картинок в папке на хостинге. Автоматическое добавление файла «index.html» в каждую папку галереи для предотвращения прямого доступа к ней из браузера.
- Можно задавать параметры для всех галерей, а для отдельных – переопределять.
- Наличие плагина кнопки редактора, для быстрой вставки тега.
- Наличие «турбо-режима», ускоряющего генерацию галерей. По заявлению разработчика, генерация галереи для 50 больших изображений с сохранением миниатюр, добавлением водяного знака, изменения исходного размера изображения и т.д., длилась 17 секунд без «турбо-режима» и 1 секунду с ним.
- Генерация и сохранение миниатюр исходных изображений в подпапке с изображениями. Повышает скорость загрузки страницы и увеличивает качество уменьшенных изображений. Можно задавать степень сжатия для JPG и PNG миниатюр, можно указать их размер по ширине/высоте, настроить обрезку и масштабирование.
- Возможность изменения размера исходных изображений.
- Можно настроить добавление водяного знака.
- Возможно настроить количество отображаемых картинок, отступа между ними и количества картинок в одну строку.
- Можно просматривать увеличенные варианты изображений не по нажатию, а по наведению курсора мыши на миниатюры (рисунок ниже).
- Настройка порядка сортировки изображений. В том числе, случайный и из текстового файла.
- Возможно отображать заголовок и описание к изображениям. Поддержка мультиязычности. В текстовом файле также можно задать ALT изображений (замещающего текста) и ссылку по нажатию на миниатюры.
- Отображение галереи по нажатию на ссылку.
- Есть возможность отображения кнопок печати и загрузки изображений (рисунок ниже).
- При желании можно отображать одно изображение. С галереей или без.
- Возможно отображать маркированный список имён файлов изображений, без миниатюр. По нажатию на пункт списка будет открыто окно с изображением.
- Поддержка адаптивного дизайна.
- Всплывающие подсказки к изображениям на базе CSS.
- Можно выводить заголовок и описание из IPTC информации файла.
- Визуализация галереи на базе Slimbox, Lytebox, Shadowbox, Milkbox и Mootools (на выбор).
- Для предотвращения конфликтов JS с плагином устанавливается Lytebox.
- Валидный XHTML 1.1. CSS и JS файлы включаются в раздел «Head», устраняя синтаксические ошибки.
- Есть документация на английском языке. Все опции плагина переведены на русский язык и большинство из них оснащены русскоязычными всплывающими подсказками.
Настройки плагина
Опции Simple Image Gallery Extended разделены на восемь вкладок.
- Плагин. Содержит настройки для включения или отключения плагина.
- Описание. Тут размещена краткая инструкция на русском языке касательно основ применения плагина.
- Галерея.
- Миниатюра.
- Оригинал изображения.
- Визуализация.
- Водный знак.
- Код пожертвования.
Настроек плагина достаточно много. Некоторые из них очевидны из названия, а некоторые оснащены подробными всплывающими подсказками на русском языке. Рассмотрю только те настройки, которые считаю наиболее интересными.
Вкладка Галерея (рисунок ниже). Содержит общие настройки галереи изображений Joomla.
- Хранение миниатюр. Очень важная опция. Если она отключена, то Simple Image Gallery Extended будет заново генерировать миниатюры изображений при каждой загрузке страницы. Это может чрезмерно нагрузить хостинг, что снизит скорость загрузки страницы.
- Перезапись миниатюр. Во время подбора оптимального размера миниатюр рекомендую включить эту опцию. Так как при смене значений параметров Максимальная ширина миниатюры и Максимальная высота миниатюры на вкладке Миниатюры, Вы можете не увидеть никаких изменений.
- Корневая директория. По умолчанию, для создания галереи Вам нужно указать путь к папке с изображениями, начиная с папки «images» (об этом поговорим ниже в статье). Но если включить эту опцию, то нужно будет указывать путь к папке с изображениями от корневой директории сайта.
- Порядок сортировки. Можно задать разный порядок сортировки изображений в галерее: случайный, по заголовку (по возрастанию/по убыванию), по дате (по возрастанию/по убыванию) и свой собственный (Из текстового файла). О том, как задать определённый порядок, мы поговорим чуть ниже в статье.
- Превью изображения. Позволяет показать увеличенный вариант изображения при наведении курсора мыши на миниатюру (рисунок ниже). Включив опцию Превью половины изображения, можно уменьшить всплывающую картинку.
- Галерея в виде списка. Можно показать картинки не в виде миниатюр, а в виде маркированного списка (рисунок ниже). По наведению на пункт списка появится увеличенное изображение, при условии, что опция Превью изображения включена. По нажатию на пункт списка, откроется большое изображение. Если у картинок нет заголовков или описаний, то в списке будут имена файлов (без расширения). В моём примере на рисунке ниже видны заголовки и описания. Как их создать, рассмотрим ниже в статье.
- Заголовок изображения. Отображает заголовок изображений под миниатюрами в галерее. О том, как добавить заголовки мы поговорим ниже в статье.
Вкладка Миниатюра. Тут есть опции, которые позволяют настроить размер, качество и процесс изменения размеров миниатюр галереи.
Если задать значение поля Максимальная ширина миниатюры и включить опцию Сохранение пропорций, то ширина миниатюр будет такой, какую Вы задали, а высота будет вычислена автоматически без искажения пропорций.
Вкладка Оригинал изображения (рисунок ниже). Simple Image Gallery Extended позволяет изменять размер изображений, которые открываются по нажатию на миниатюры. Задав значение поля Ширина изображений и включив опцию Сохранение пропорций, ширина увеличенного изображения будет такой, какую Вы задали, а высота будет вычислена автоматически без искажения пропорций.
Чтобы видеть изменения размеров включите опцию Изменение размера.
Обратите внимание, что изменения размеров не влияют на исходные, загруженные Вами, картинки.
Вкладка Визуализация (рисунок ниже). Если Вы хотите отобразить заголовок и описание изображений при просмотре их увеличенной версии (рисунок ниже), включите опцию Информация об изображении.
Для того, чтобы задать заголовок, описание, замещающий текст (ALT) и ссылку по нажатию на каждую картинку, включите опцию Информация из текстового файла.
Сайм файл «captions.txt» нужно поместить в той же папке, в которой находятся изображения галереи (рисунок ниже).
Вот содержимое моего файла:
1.jpg|Футурама 1|Футурама 1 - это мультик|АЛТ 1 для Футурамы
7.jpg|Футурама 7|Футурама 7 - это мультик|АЛТ 7 для Футурамы|https://aleksius.com/joomla/rasshireniya/easybook-reloaded
2.jpg|Футурама 2|Футурама 2 - это мультик|АЛТ 2 для Футурамы
3.jpg|Футурама 3|Футурама 3 - это мультик|АЛТ 3 для Футурамы
4.jpg|Футурама 4|Футурама 4 - это мультик|АЛТ 4 для Футурамы
5.jpg|Футурама 5|Футурама 5 - это мультик|АЛТ 5 для Футурамы
6.jpg|Футурама 6|Футурама 6 - это мультик|АЛТ 6 для Футурамы
9.jpg|Футурама 9|Футурама 9 - это мультик|АЛТ 9 для Футурамы
10.jpg|Футурама 10|Футурама 10 - это мультик|АЛТ 10 для Футурамы
11.jpg|Футурама 11|Футурама 11 - это мультик|АЛТ 11 для Футурамы
12.jpg|Футурама 12|Футурама 12 - это мультик|АЛТ 12 для Футурамы
8.jpg|Футурама 8|Футурама 8 - это мультик|АЛТ 8 для ФутурамыФайл в кодировке UTF-8 (без BOM) – это важно. Разберём вторую строку «7.jpg|Футурама 7|Футурама 7 - это мультик|АЛТ 7 для Футурамы|https://aleksius.com/joomla/rasshireniya/easybook-reloaded».
- «7.jpg» – имя файла изображения. Оно определяет, к какому именно файлу нужно применять далее указанные значения.
- «|» – разделитель значений.
- «Футурама 7» – заголовок изображения. Может отображаться под миниатюрами и под увеличенным изображением. Значение атрибута «title».
- «Футурама 7 - это мультик» – описание изображения. Может отображаться под миниатюрами и под увеличенным изображением.
- «АЛТ 7 для Футурамы» – замещающий тест. Значение атрибута «alt».
- «https://aleksius.com/joomla/rasshireniya/easybook-reloaded» – URL адрес ссылки, на которую будет переходить пользователь по нажатию на миниатюру.
Обратите внимание на порядок следования имён файлов в файле. Сперва идёт «1.jpg» потом «7.jpg», потом «3.jpg» и так далее. Именно так можно задать нужный Вам порядок следования изображений, если на вкладке Галерея Вы выбрали Из текстового файла для опции Порядок сортировки.
- Кнопка для загрузки изображения. Иконка дискеты, которая позволяет скачать исходное изображение. Появляется под картинкой при её увеличении (рисунок ниже)
- Кнопка для печати изображения. Иконка принтера, которая позволяет распечатать исходное изображение. Появляется под картинкой при её увеличении (рисунок ниже)
- Заголовок материала в навигации. Отображает заголовок материала, в который вставлена галерея. В моём примере на рисунке ниже это «SIGE». Появляется под картинкой при её увеличении.
- Сообщение перед заголовком. Отображает произвольный текст. В моём примере на рисунке ниже это «Aleksius.com - Алексей Хорошевский». Появляется под картинкой при её увеличении.
Вкладка Водный знак (рисунок ниже). Позволяет добавить водяной знак на изображения галереи Joomla.
Достаточно поместить файл «watermark.png» с нужным Вам изображением в папку «plugins/content/sige/plugin_sige», с заменой уже существующего там файла. Включить опцию Водный знак. И водяной знак появится на миниатюрах (рисунок ниже), увеличенных и больших картинках.
- Позиция на изображении. Позволяет изменить положение изображения водяного знака на картинке.
- Метод шифрования заголовков. Вы можете включить шифрование имён файлов изображений. Например, без шифрования имя файла выглядит так «1.jpg», а с шифрование MD5 – «c4ca4238a0b923820dcc509a6f75849b.jpg».
Создание галереи прямо в материале Joomla
Рассмотрим процесс добавлении галереи в материал. Для других «мест», например, модуль HTML-код, описание товаров VirtueMart и т.д., действия будут аналогичны.
Шаг 1. Создайте папку в папке «images» в корневой папке Вашего сайта и поместите туда нужные Вам картинки. Советую ознакомиться с рекомендациями по изображениям и именам файлов/папок изображений. Например, имя папки будет «futurama».
Шаг 2. Перейдите в материал Джумла. Если Вы устанавливали и включали плагин «Button - SIGE Parameters - SIGE Parameter Button», то в инструментах редактора у Вас будет кнопка SIGE Parameters (рисунок ниже). Поставьте курсор мыши в то место материала, где нужно создать галерею и нажмите на кнопку SIGE Parameters или просто вставьте тег «{gallery}{/gallery}» (без кавычек ёлочек).
Шаг 3. Укажите имя папки, изображения которой Вы хотите выводить в галерее. В моём примере это:
{gallery}futurama{/gallery}Если в папке «images» вы создали подпапку «moi-galerei», а в ней создали папку «futurama», в которой поместили изображения галереи, то путь внутри тега будет такой:
{gallery}moi-galerei/futurama{/gallery}Если всё нормально, Вы увидите галерею в материале Joomla.
Вы можете оставить галерею как есть (согласно настройкам плагина) или переопределить любой из 52-х параметров. Все они описаны на сайте разработчика в разделе «List of parameters».
Например, для галереи в папке «moi-galerei/futurama», укажу ширину миниатюр – 100 пикселей, отключу подписи под миниатюрами и отключу кнопку скачивания изображений. В этом случае, внутри тега будут указаны такие параметры и их значения:
{gallery}moi-galerei/futurama,width=100,caption=0,download=0{/gallery}Разберём эти параметры. Параметры разделяются запятой без пробела, а значения параметров указываются через знак равенства после параметра (и тоже без пробела).
- «moi-galerei/futurama» – первым идёт адрес/имя папки. Далее, в любом порядке, параметры.
- «width=100» – ширина миниатюр 100 пикселей.
- «caption=0» – не показывать подписи к миниатюрам.
- «download=0» – не показывать кнопку загрузки изображений.
В результате галерея будет выглядеть так, как показано на рисунке ниже.
Несмотря на то, что Simple Image Gallery Extended – бесплатный плагин, он обладает достаточно хорошими возможностями для создания галерей на Joomla. Отдельно стоит отметить, что разработчик уделил особое внимание скорости загрузки галереи. А это весьма важный момент.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
