Расширения

Обзор Simple Image Gallery. Плагин галереи Joomla

  • Тип – бесплатный плагин простой галереи для Джумла 1.5 – 3.х.

 

 

В предыдущей статье «Обзор RSMediaGallery. Галерея изображений Joomla» мы начали рассматривать расширения для создания галереи для Joomla. В этой статье мы поговорим об очень простом и бесплатном плагине Simple Image Gallery (SIG), который подойдёт для CMS версий 1.5-3.х. Данный плагин весьма популярен, по данным из официального сайта расширений Joomla (на 15.07.2015):

  • 245 отзывов,
  • общая оценка 87 из 100,
  • функциональность 78 из 100,
  • простота использования 88 из 100,
  • документация 87 из 100,
  • техническая поддержка 82 из 100.

Отмечу, что разделение оценки расширений появилось, примерно, с декабря 2014, а плагин Simple Image Gallery добавлен в каталог с 05.12.2006. Именно поэтому последние отзывы (с разделением на «категории») вносят существенный процент в рейтинг по «категориям». Лично я бы за простоту использования и документацию поставил 100. Техническая поддержка, думаю, мало кому понадобится, учитывая документацию, описание в самом плагине и небольшое количество настроек. Касательно функциональности – бесплатная версия Simple Image Gallery (SIG), на мой взгляд, крайне аскетична в плане настроек и возможностей. Гораздо интереснее платная версия.

В обзоре участвует последняя, на момент написания статьи (15.07.2015), бесплатная версия плагина Simple Image Gallery (SIG) 3.0.1 с русификатором. Тестируется в Joomla 3.4.3, менеджер материалов Joomla (com_content), редактор материалов TinyMCE 4.1.7.

В качестве аналогичного плагина галереи советую рассмотреть SIGE - Simple Image Gallery Extended.

Simple Image Gallery

Рассмотрим возможности и особенности этого плагина галереи для Joomla.

  • Добавление галереи изображений в материал Joomla.
  • Добавление галереи везде, где обрабатываются плагины Joomla: сторонние компоненты, модули.
  • Поддержка отзывчивого дизайна.
  • Простота использования.
  • Поддержка распространённых графических форматов файлов (PNG, JPG и т. д.).
  • Возможность вставки в материал Joomla любого количества изображений галереи или отдельных галерей.
  • Формирование галереи на основании папок с изображениями на Вашем хостинге (сайте).
  • Возможность управления файлами изображений (добавление, удаление и др.) из медиа менеджера Joomla.
  • Автоматическое создание миниатюр изображений.
  • Задание ширины и высоты миниатюр галереи.
  • Возможность изменения степени сжатия миниатюр с целью уменьшения их размера (в Кб), нагрузки на сервер и, как следствие, увеличение скорости загрузки сайта.
  • Возможность задания времени хранения кэша миниатюр изображений независимо от настроек кэша Joomla.
  • Возможность задания лимита использования памяти сервера (ОЗУ (RAM)) для минимизации возникновения ошибок.
  • Применение jQuery с возможностью выбора версии библиотеки.
  • Возможность активации автоматической смены изображений (слайд-шоу) во фронтальной части сайта.
  • Возможность просмотра полноразмерного варианта исходного изображения во фронтальной части сайта.
  • Наличие ссылки на исходный файл изображения в коде страницы (полезно для индексации изображений поисковыми системами).
  • Наличие инструкции и всплывающих подсказок в настройках плагина.
  • Наличие документации (на английском языке).

Настройка Simple Image Gallery

Настройка данного плагина происходит в менеджере плагинов Joomla. Это плагин контента «Simple Image Gallery (by JoomlaWorks)». Там есть три вкладки (рисунок ниже):

  1. Плагин.
  2. Описание. Содержит текст с описанием плагина, инструкцией и ссылками на сайт разработчика. Если установлен русификатор, текст будет на русском языке. В противном случае (по умолчанию) – на английском.
  3. Дополнительные параметры.

Рассмотрим только те опции, которые являются «уникальными» именно для этого плагина, а не являются стандартными (такие как Состояние, Доступ Порядок и т. д.) для всех плагинов Джумла. На первой вкладке Плагин (рисунок ниже) доступны следующие опции:

Корневая папка для изображений галерей. Указывается имя начальной папки для всех Ваших изображений галерей. По умолчанию, это папка изображений Joomla – «images» (без кавычек). Вы сможете с лёгкостью использовать медиа менеджер Joomla для загрузки Ваших изображений в подпапки внутри этой папки (например, внутри «images/galerei/ tsvety-s-vystavki-2015»).

Обработка библиотеки jQuery. Для обеспечения возможности создания всплывающих окон увеличенных изображений, во фронтальной части сайта, а также для нормальной работы Simple Image Gallery нужна библиотеку jQuery JavaScript. Вы можете выбрать, какую версию jQuery нужно использовать: от последней версии 1.5.х до 1.11.1. Или можно полностью отключите её, если библиотека уже загружается другими расширениями, например, K2. Советую поэкспериментировать и подобрать самый нужный вариант именно в Вашем конкретном случае. Плюс, при помощи данной опции можно попробовать устранить проблемы, связанные с конфликтом разных расширений и разных библиотек jQuery. Рекомендую сперва попробовать отключить jQuery в Simple Image Gallery. Если галереи работают нормально, это может снизить нагрузку на сервер, уменьшить риск возникновения конфликта и увеличить скорость загрузки сайта.

Ширина миниатюры. Ширина миниатюры изображения в пикселях. Высота не будет подобрана автоматически. Рекомендую подбирать для галерей изображения с одинаковыми пропорциями. Тогда миниатюры будут выглядеть красивей (не обрезаться). Например, если исходное изображение 700х394 (ширина\ высота), или 1920х1080, то при ширине миниатюры в 220 пикселей следует задавать высоту – 124 пикселя. Советую Вам ознакомиться с рекомендациями по изображениям. Обратите внимание, что в Simple Image Gallery опции, настроенные в плагине, действуют на все галереи Joomla (на всём сайте).

Высота миниатюры. Высота миниатюры изображения в пикселях. Ширина не будет подобрана автоматически.

Качество изображения миниатюры. Укажите качество (в %) генерируемых изображений миниатюр. Значение ранжируется от 0 до 100, где 100 обеспечивает максимально возможный результат. Значение между 70 и 90, как правило, должно обеспечить нормальное соотношение качества, размера изображений (в Кб), нагрузки на сервер, скорости генерации миниатюр и скорости загрузки сайта. Помните, чем меньше это значение, тем меньше размер генерируемой миниатюры и тем меньше потребуется мощностей сервера для её обработки (и тем быстрее грузится страница сайта). Но, тем хуже качество изображения.

Настройка Simple Image Gallery
Настройка Simple Image Gallery

На третей вкладке Дополнительные параметры (рисунок ниже) доступны следующие опции.

Время хранения кэша миниатюр. Время хранения кэша миниатюр в минутах. Для обновления кэша миниатюр просто задайте тут «0» (без кавычек), обновите страницу галереи Joomla и заново установите «1440» или другое значение (без кавычек). Никогда не оставляйте «0» для этой опции, в противном случае миниатюры будут создаваться каждый раз, когда загружается галерея, это перегружает ресурсы сервера и может существенно замедлить скорость загрузки Вашего сайта.

Лимит памяти (в Мб). Позволяет изменять лимит памяти сервера, для устранения ситуаций, когда галерея не создаётся или Вы получаете ошибку «белый экран» на Вашем сайте. Эта опция может работать не во всех случаях. Плюс, обратите внимание, реально, данное значение ограничивается лимитами Вашего сервера (хостинга). Об этом можете узнать в службе технической поддержки Вашего хостинг-провайдера или у администратора сервера.

Дополнительные параметры
Дополнительные параметры

Вот и все настройки Simple Image Gallery. По минимуму, в принципе, вообще можно ничего не менять.

Как пользоваться

Использовать Simple Image Gallery крайне просто. Достаточно вставить следующую конструкцию в то место материала Joomla (рисунок ниже), где хотите отобразить галерею:

{gallery}izobrazheniya{/gallery}

 

Как пользоваться Simple Image Gallery
Как пользоваться Simple Image Gallery

Открывающийся «{gallery}» и закрывающийся «{/gallery}» теги – это будет всегда неизменным. А вот «izobrazheniya» будет меняться. Почему именно «izobrazheniya»? Дело в том, что в настройках плагина на вкладке Плагин для опции Корневая папка для изображений галерей я указал «images» (без кавычек). А внутри папки «images» есть папка «izobrazheniya». Именно в папке «izobrazheniya» и находятся те файлы (рисунок ниже), которые собираюсь использовать для создания галереи Joomla.

Медиа менеджер Joomla
Медиа менеджер Joomla

Если в статье нужно отобразить несколько галерей, это можно сделать точно так же, как описано выше, при этом задавая разные папки с изображениями. Если папка с изображениями галереи не находится непосредственно в корневой папке «images», то просто укажите путь к этой папке. Например:

{gallery}galerei/vystovki-tsvetov/2015{/gallery}

Где папка «galerei» находится непосредственно в корневой папке изображений, внутри «galerei» есть вложенная папка «vystovki-tsvetov», а внутри неё - папка «2015», где и находятся те изображения, которые необходимо показать в галерее.

Обратите внимание, что слеши «/» до или после имён папок внутри открывающегося «{gallery}» и закрывающегося «{/gallery}» тегов не ставится. Плюс, не надо указывать имя корневой папки, заданной на вкладке Плагин для опции Корневая папка для изображений галерей.

Также могут возникнуть ситуации, когда редактор материалов (Вы) добавит дополнительные HTML-теги внутрь тегов Simple Image Gallery. Тогда галерея не будет работать. Удалите лишние теги, отключив редактор (кнопка Выключить редактор под редактором) и удалив их вручную или скопировав\вставив конструкцию «{gallery}izobrazheniya{/gallery}» в блокнот и обратно в редактор материалов. Например, так (рисунок ниже) работать не будет:

Лишние HTML-теги
Лишние HTML-теги

Фактически, код выглядит, примерно, так:

{gallery}strong>izobrazheniya</strong{/gallery}

В данном случае открывающийся и закрывающийся тег «strong» – лишний (в строке выше выделен жирным). Это может привести к такой ошибке:

Предупреждение

JFolder: :files: Путь ведёт не к каталогу. Путь: images/izobrazheniya<\strong>

 

Внимание

Возникла проблема с обработкой Ваших изображений галереи. Пожалуйста, убедитесь в том, что папка, которую Вы используете в теге плагина Simple Image Gallery, существует и содержит корректные файлы изображений. Плагин не смог обнаружить папку: images/izobrazheniya

 

На рисунке ниже показан пример галереи Joomla во фронтальной части сайта, созданной при помощи Simple Image Gallery 3.0.1.

Simple Image Gallery
Simple Image Gallery

При наведении на миниатюру курсора мыши она затемнится и поверх появится пиктограмма увеличительного стёклышка со знаком плюс. По нажатию на миниатюру откроется исходное изображение во всплывающем окне (рисунок ниже).

Галерея для Joomla
Галерея для Joomla

Возможно управление слайдами (переключение) при помощи мыши и клавиатуры. Над изображением появится панель с пятью иконками. Рассмотрим слева направо:

  1. Перейти к предыдущему изображению.
  2. Запустить\остановить автоматическую смену изображений (слайд-шоу)
  3. Перейти к следующему изображению.
  4. Увеличить изображение до его фактических размеров по ширине и высоте. Если фактический размер изображений больше области его просмотра (окно браузера с отступами, рамками и пр.), то изображение автоматически вписывается по размерам области. А по нажатию на эту кнопку, принудительно, разворачивается к своим исходным размерам (может выходить за рамки видимой области).
  5. Закрыть всплывающее окно.

Рекомендации по именам файлов изображений

Дам ряд рекомендаций касательно имён файлов и папок изображений. Отметим, что данные рекомендации относятся не только к файлам и папкам изображений Simple Image Gallery, но и к любым файлам, загружаемым на сайт, например, файлов вложений компонентов Attachments, RSFiles. Данные рекомендации чем-то напоминают рекомендации по ЧПУ (SEF) URL-адресам.

  • Не используйте русские буквы и\или пробелы в именах файлов. Только английские буквы, цифры и знаки тире «-» и нижнего подчёркивания «_» (без кавычек). Например, «galereya-izobrazhenij/smpsony/bart-smpson.png», а не «галерея изображений/Симпсоны/Барт Смпсон.png». В случае с Simple Image Gallery использование букв не английского алфавита может привести к тому, что изображение не будет отображаться в галерее, и его имя будет в виде символов вопросительного знака в ромбиках.
  • Лучше не используйте заглавные буквы в именах файлов и папок. Например: «joomla/rusifikatory/rusifikator-rsmediagallery.png», а не «Joomla/Rusifikatory/Rusifikator-RSmediagallery.png».
  • В качестве имени файла\папки лучше подобрать слова, которые максимально отражают суть содержимого изображения, в той формулировке, которую чаще всего вводят пользователи в поиск. То есть, использовать в качестве имён папок, подпапок – ключевые слова. Если это уместно и поможет пользователям\поисковым системам лучше понять смысл содержимого. Лучше избегать общих названий файлов, например, «izobrazhenie-1.png».
  • Желательно не наполнять имена файлов\папок набором ключевых слов, например, «dostavka-tsvetov/dostavka/tsvetov-v-kharkove/kupit-tsvety-tsvety-v-kharkove-tsvety-ne-dorogo.png». Это может быть расценено поисковыми системами как попытка обмана алгоритмов ранжирования и, как следствие, Ваш сайт может быть понижен в результатах поисковой выдачи (как минимум, в поиске по картинкам).
  • Длина полного имени файла не должна превышать 255 символов (лучше до 115). Но насчёт данного ограничения я не уверен. Пример полного имени файла: «aleksius.com/images/joomla/rasshireniya/nastrojki-komyuniti-bilder-2/komyuniti-bilder-2.png» (без кавычек). Включая домен, путь к файлу (со слешами), точки в именах и расширение файла. В моём примере длина полного имени файла 91 символ. Обратите внимание, что я указал домен и корневую папку изображений.
  • Желательно, чтобы непосредственное имя файла изображения состояло не более из 3-5 слов. Например, «vystavka-tsvetov-leto-215.png» – 4 слова и расширение (расширение не учитывается).
  • При создании структуры папок (подпапок), должно быть не более 5 уровней. Оптимально - не более 3 уровней. Не используйте большое количество вложенных папок, например, «papka-1/papka-2/papka-3/papka-4/papka-5/papka-6/papka-7/papka-8/papka-9/papka-10/izobrazhenie.png». Это может затруднить индексацию картинок Вашего сайта поисковыми системами. Как следствие, Вы можете потерять возможность получения посетителей из поиска по картинкам (или даже из универсального поиска).
  • Лучше использовать в качестве разделителя слов в именах файлов и папок тире «-», а не знак нижнего подчёркивания «_». Например: «joomla/rusifikatory/rusifikator-rsmediagallery», а не «joomla/rusifikatory/rusifikator_rsmediagallery».

Итак, если у Вас сайт о цветах, и Вы хотите выложить несколько галерей с разных выставок, то в качестве имён папок могут быть такие:

  • «vystavki/tsvety-ukrainy/2013»
  • «vystavki/tsvety-ukrainy/2014»
  • «vystavki/tsvety-ukrainy/2015»

В папках с годами могут быть такие файлы:

  • «rozy.jpg»
  • «fialki.jpg»
  • «tyulpany.jpg»
  • «jpg»

Если изображений роз много, можно добавить сорт и\или порядковый номер, имя садовника:

  • «klumbovye-rozy.jpg»
  • «vyushchiesya-rozy.jpg»
  • «sadovye rozy-miniatyurnye.jpg»
  • «sadovye rozy-parkovye»

Русификатор Simple Image Gallery

Скачать русификатор Simple Image Gallery.

 

Вопрос-ответ

Рассмотрим несколько вопросов касательно плагина галереи Joomla, которые показались интересными.

Как подписать фото в Simple Image Gallery? В бесплатной версии плагина, по сути, никак. Можно задать описательное имя самого файла, тогда оно будет отображаться при наведении на изображение или под его увеличенной версией во всплывающем окне. Но если нужно сделать это без расширения и на русском языке, то не получится.

 

Как убрать надпись: «Нажмите, чтобы открыть» или «Нажмите, чтобы увеличить изображение»? Это можно сделать путём удаления соответствующей надписи в файле «administrator/language/ru-RU/ru-RU.plg_content_jw_sig.ini». Примерно 35-я строка «JW_PLG_SIG_CLICK_TO_ENLARGE_IMAGE». Но тогда при наведении курсора мыши на миниатюру, во фронтальной части сайта, будет отображаться имя файла (с расширением). Или можно в файле «plugins/content/jw_sig/jw_sig/tmpl/Classic/default.php» удалить такие фрагменты кода:

<?php echo JText::_('JW_PLG_SIG_YOU_ARE_VIEWING').' '.$photo->filename; ?>

и

<?php echo JText::_('JW_PLG_SIG_CLICK_TO_ENLARGE_IMAGE').' '.$photo->filename; ?>

примерно, 19-я строка.

Но тогда исчезнет и надпись: «Вы просматриваете изображение с именем файла» во всплывающем окне под изображением. Также учтите, что при обновлении плагина или русификатора Simple Image Gallery придётся повторять вышеописанные действия.

 

Как вставить галерею Simple Image Gallery в модуль? Для этого в менеджере модулей создайте модуль «HTML-код». В настройках модуля, на вкладке Основные параметры активируйте опцию Обрабатывать плагинами. После этого вставьте тег галереи так, как показано в данной статье выше в разделе «Как пользоваться».

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

В следующей статье «Обзор sigplus. Галерея в материале Joomla» мы рассмотрим ещё один бесплатный плагин и модуль галереи Джумла. А если Вас интересуют другие аналогичные расширения, то предлагаю с ними ознакомиться: Phoca Gallery, DJ-MediaTools, Layer Slideshow, Droppics и ImageSizer.

 

Похожие материалы
Автор статьи – Хорошевский Алексей

Хорошевский Алексей Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

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

 

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