Маленький Лувр на Joomla-сайте, или Фотогалерея Joomla с компонентом JoomGallery

Дамы и господа! Всех вновь рада приветствовать на Авторском блоге Web-Кошки! Просматривая свои последние записи,  я поняла, что почему-то давненько уже не публиковала уроки по созданию сайтов на моей любимой Joomla! Поэтому недолго думая, сегодня я исправлю это несправедливое положение дел и поделюсь с вами страшными тайнами создания и настройки фотогалереи на сайте Joomla.

Те, кто следит за серией моих постов, посвященных разработке сайтов на Joomla, возможно, вспомнят, что однажды я уже рассказывала о создании фотогалереи, и могут заподозрить меня то ли в непростительной забывчивости, то ли вообще … ну не знаю даже в чем еще!

Но такого шанса я вам, друзья, не дам, поскольку помню прекрасно, что урок по созданию фотогалереи в тексте материала уже опубликован на моем блоге. Тогда мы использовали для этих целей плагин Simple Image Gallery. Сегодня же мы создадим фотогалерею куда более масштабную, функциональную и навороченную, поскольку воспользуемся компонентом JoomGallery.

Кратко расскажу, о чем сегодня у нас пойдет речь. Мы научимся создавать галереи изображений, разбитых по категориям, рассмотрим основные возможности и настройки JoomGallery, научимся выводить слайдшоу определенных категорий галереи изображений в модулях, а также подключим страницы галереи к меню (как создать меню Joomla) и опубликуем их на сайте. В общем, работы предстоит много, зато и результат оправдает затраченные усилия!

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

Вот так выглядит страница категорий изображений:

Так — страница одной конкретной категории:

А это слайдшоу выбранной категории:

Впрочем, внешний вид, точнее, функционал галереи, можно при помощи настроек JoomGallery менять до неузнаваемости, но об этом позже. А пока начнем с начала, то есть познакомимся с тем,

Как установить компонент фотогалереи JoomGallery

В общем-то, ничего нового я вам не скажу, потому что уже написала подробную инструкцию о том, как устанавливать расширения Joomla. Лень идти по ссылке? Как я вас понимаю! Тогда алгоритм к вашим услугам:

1. Скачиваем JoomGallery
2. Идем в «Расширения» — «Менеджер расширений», выбираем скаченный архив кнопкой «Обзор» и жмем «Загрузить и установить».
3. Ждем несколько секунд — и получаем сообщение об успешной установке JoomGallery. Знающие буржуинский диалект могут на этом и остановиться, но для тех, кто предпочитает работать в родной языковой среде, я покажу, как JoomGallery русифицировать.
4. Для начала скачаем пакет русификации JoomGallery и
5. точно так же через «Менеджер расширений» его установим — все, JoomGallery теперь на русском языке.

Таперича приступим к собственно созданию фотогалереи. И первое, что необходимо сделать, это наполнить галерею — добавить в нее изображения, которые при необходимости нужно разбить по категориям.

Создаем категории и добавляем изображения в JoomGallery

Создание категорий

Вначале создадим категории для последующей загрузки в них изображений. Для этого идем в «Компоненты» — «JoomGallery» и на открывшемся экране, который поражает обилием всяких вкладочек, пиктограммочек, значков и прочих повергающих начинающего юзера в священный ужас настроек:

хладнокровно жмем на пиктограмму «Категории» или же переходим на одноименную вкладку (1). Нас встречает вполне обычное окно менеджера Joomla, которое разработчики JoomGallery почему-то обозвали «Ассистентом».

Ну нам-то с вами все равно, ассистент или менеджер, потому что интересует нас лишь возможность создания категорий для изображений. А доступна она по клику на кнопку «Создать» в правом верхнем углу (1). Во вновь открывшемся стандартном джумловском окне создания «всего-чего-угодно» нужно ввести только название категории. Я для примера решила создать фотогалерею зверюшек, и будут у меня в ней три категории: кошки, собаки и зайцы. Вот прямо с такими названиями я и создаю друг за другом три категории, которые в итоге видны в «Ассистенте категорий» (маленький совет от Web-Кошки: чтобы быстрее создать несколько категорий, пользуйтесь кнопкой «Сохранить и создать»):

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

Теперь дело за малым — наполнить категории изображениями.

 Добавляем в JoomGallery изображения

Для загрузки изображений JoomGallery предлагает нам несколько инструментов:  мы можем загружать изображения пакетом, то есть сразу все из одной категории (1), либо же заливать их по одному (2), а также можно залить фотки на сервер по FTP (3) или же воспользоваться Java-загрузкой (4).

Естественно, когда вы только создаете и настраиваете фотогалерею, логичнее и удобнее пользоваться пакетной загрузкой фото, особенно если у вас много категорий, в которых нужно разместить десятки, а то и сотни изображений. Для этих целей можно использовать и FTP-доступ.

Использовать «Загрузку одного фото», наоборот, удобнее, когда вы хотите добавить несколько изображений в уже созданную и работающую галерею. Я сейчас покажу все эти варианты загрузки, чтобы вы понимали, о чем речь.

«Загрузка одного фото»

1. Выбираете изображение для загрузки
2. Указываете, в какую категорию это изображение загрузить
3. Вводите на латинице название для этого изображения — дело в том, что JoomGallery использует не стандартные названия фотографий, а свои собственные, которые вы тут задаете. Например, для категории «Кошки» я укажу название «Cats».
4. А здесь нужно указать порядковый номер фото. Если у вас категория пустая, то нумерацию можно оставить по умолчанию с единицы, а если вы загружаете фотки в категорию, где уже лежит пять, например, изображений, то номер нужно заменить на следующий, то есть «6» в моем примере.

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

После чего жмем «Загрузить» и дожидаемся окончания загрузки, о чем и получаем сообщение.

Вот так вот все просто с загрузкой одного фото.

Единственное, обратите внимание, что на этом экране нет смысла выбирать несколько фотографий в полях слева — происходит какая-то ошибка и загружается только последняя из выбранных. Не знаю, может быть, это только у меня так, но все-таки советую выбирать и загружать именно по одной фотографии.

Согласитесь, сотню картинок по одной с использованием этого инструмента заливать неудобно, поэтому мы перейдем к инструменту

«Загрузка нескольких фото»

Вот так выглядит его окно:

Мы к нему еще вернемся, а пока обязательно взгляните на предупреждение вверху экрана:

Здесь нам русским человеческим языком говорят, что нужно из фотографий сделать архив формата ZIP, в котором НЕТ вложенных папок и подархивов. Только изображения!

Итак, нам из изображений каждой категории нужно подготовить zip-архив. Для этого щелкаем правой кнопкой мыши по папке с изображениями определенной категории (вы же распределили их по отдельным папкам, не так ли?) и выбираем «Добавить в архив» — если у вас установлен архиватор WinRar. Впрочем, если другой, полагаю, особенных трудностей эта операция у вас не вызовет.

Не забудьте выбрать формат ZIP и затем «OK» — архив создан.

Таким же точно образом создайте архивы для фотографий всех категорий.

Теперь возвращаемся к экрану «Загрузки нескольких фото».

1. Выбираем архив с фотографиями, созданный только что
2. Указываем, к какой категории фото принадлежат
3. Указываем внутреннее общее название для фотографий. Например, если вы укажете «Cats», то каждая из фотографий этой категории получит название «cats-1», «cats-2» и т.д.
4. Выбираем начальный номер для нумерации фотографий. Принцип тот же: категория пустая — оставляем «1», в категории уже есть n фото — указываем номер «n+1».
5. И конечно, «Загрузить»

Времени на загрузку архива уйдет, конечно, больше, чем на одно фото, по окончании процесса вы получите сообщение об успешной загрузке (или о причинах ошибки, если что-то пошло не так).

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

Как выводить фотогалерею при помощи модуля JoomCategories for JoomGallery

Изображения из любой категории мы можем вывести в любом месте на странице сайта при помощи дополнительного модуля для компонента JoomGallery. Естественно, этот модуль предварительно нужно скачать и установить обычным способом (через Менеджер расширений).

В «Менеджере модулей» находим в списке JoomCategories for JoomGallery (1) и активируем его кликом по значку в графе «Состояние» (2):

Теперь оправляемся настраивать модуль JoomCategories for JoomGallery (напомню, попасть в настройки можно, нажав на название модуля в списке).

Параметров у модуля JoomCategories for JoomGallery несколько десятков, однако бояться такого обилия не стоит — мы сейчас подробно разберемся, какая настройка за что отвечает. Начнем с верхней группы настроек «Common parameters«:

1. Указываем порядок расположения категорий в модуле. На скрине выставлен параметр «Начиная с последнего добавленного», а вообще-то доступны варианты «Самые просматриваемые», «С самым высоким рейтингом» и «Случайный»
2. Вписываем количество категорий, которые хотим выводить в модуле
3. А здесь перечисляем ID категорий, которые хотим исключить из показа. Чтобы узнать ID категории, нужно вернуться в «Ассистент категорий»:
4. Определяем, показывать ли название категории в модуле и
5. Делать ли его ссылкой
6. В этом группе настроек можно показать или скрыть рейтинг, просмотры, описание категории и изображения. На мой кошачий вкус, слишком много информации в модуле ни к чему, поэтому я все убрала.

Следующая группа настроек отвечает за внешний вид модуля JoomCategories for JoomGallery:

1. Выбираем количество колонок для вывода миниатюр категорий в модуле.
2. Определяем, из какого изображения генерировать миниатюру для категории: из миниатюры, созданной Joomla, или из оригинального изображения.
   

   Маленький кошачий совет: если для вас критично качество фотографий в модуле, как это бывает с фото людей, изображениями из портфолио, то выбирайте здесь «Оригинальные изображения» — «Миниатюры» Joomla создает неважного качества, что особенно заметно, если у вас достаточно крупные фотки в модуле.

3. Эту группу настроек лучше не использовать, оставив «Dynamic cropping» в выключенном положении. Если же его включить, то JoomGallery будет динамически обрезать ваши фотки по размерам, указанным в следующих двух строках. По мне, так это неудобно. Для управления размерами миниатюр лучше использовать следующую группу настроек.
4. Здесь мы просто выбираем, по какому параметру фотки будут подгоняться: по ширине или высоте. А длина другой стороны (высоты, если по ширине, и наоборот) -будет высчитываться пропорционально. То есть мы указываем, что все картинки в модуле должны быть шириной 150 пикселов, и все изображения будут проебразованы с сохранением пропорций.
5. Выбираем расположение миниатюры относительно текста-описания
6. и горизонтальное выравнивание в модуле
7. Эта группа параметров отвечает за показ/скрытие рамки вокруг категории, толщину ее линии, стиль (сплошная, пунктир и т.д.), цвет, отступы и цвет фона. В общем, владея хоть чуть-чуть основами языка CSS, можно гибко настроить внешний вид модуля.
8. Показывать короткий текст — я не знаю даже, что нам предлагают показывать, но справедливо полагаю, что ни к чему загружать модуль текстами и прочей лишней инфой. Посему — выключила.
9. А это горизонтальная линия, разделяющая миниатюры категорий в модуле. Иногда бывает уместна — пробуйте!
10. Здесь нам предлагают добавить ссылки для перехода к просмотру фото в полноэкранном режиме. Даже не знаю, убирать ее или нет. К переходу к просмотру фото из выбранной категории можно перейти простым кликом по миниатюре, поэтому как бы смысла нет оставлять ссылку. С другой стороны, не каждый пользователь может об этом догадаться, поэтому таким юзерам ссылка подскажет, что нужно делать.
11. Здесь выбираем положение ссылки, если включили ее в предыдущем пункте
12. И заменяем текст на свой — например, на «перейти к просмотру»

Ну и последняя группа настроек отвечает за параметры «большого» слайдшоу, к которому можно перейти, кликнув по миниатюре категории (ну или по ссылке):

1. Порядок смены изображений категории
2. Количество изображений, которые будут показываться. 0 — все изображения
3. Время показа одного изображения в миллисекундах
4. Эффект смены изображений
5. Время смены изображений (поиграв с этими тремя настройками, можно получить весьма эффектное слайдшоу)
6. Размеры изображений в режиме слайшоу
7. Показывать ли инфопанель, карусель миниатюрок и кнопки управления под картинкой. У меня на скрине они почему-то отключены, хотя можно и даже нужно включить.

Ну вот с настройками и все. Осталось только ввести название модуля (1) или вообще его скрыть (2), определить позицию для него (3):

а также привязать модуль к меню — выбрать, на каких страницах его показывать:

и можно идти на сайт смотреть на результат своих трудов.

Вот так выглядит модуль фотогалереи JoomGallery на сайте в дефолтном исполнении шаблона:

А так — сама фотогалерея в исполнении компонента JoomGallery:

Трудно не заметить, сколько всего лишнего выводит фотогалерея при стандартных ее настройках. Вам нужны все эти комментарии, коды для вставки, ссылки на скачивание, «Поделиться» и все прочее? Полагаю, если что-то и пригодится, то далеко не все. Поэтому теперь мы отправимся настраивать компонент фотогалереи JoomGallery.

Настройки JoomGallery кроются в одноименном пункте меню. Давайте же на них посмотрим!

Итак, что мы имеем? Девять вкладок, каждая из которых имеет свои вкладки-подпукты, и на каждой из таких «подвкладок» разработчики расположили десяток-другой настроек. Мне, глядя на все это буйство настроек, на ум приходит лишь одна мудрая мысль — «Без бутылки не разберешься!»

Но мы все же попытаемся, да не просто попытаемся, а детально разберем каждую (по возможности и необходимости) настроечку компонента JoomGallery. Правда, произойдет это уже не сегодня, а в следующем уроке Joomla, где помимо настроек, я покажу еще, как выводить на сайте страницы фотогалереи и привязывать их к пунктам меню. Так что подписывайтесь на обновления, друзья-джумловоды, и будет вам счастье!

Ну а на сегодня, по-моему, информации уже даже чересчур! Надеюсь… Да что там надеюсь — не сомневаюсь, что кому-то знания, которыми я сегодня поделилась, несомненно пригодятся, и вы с успехом примените их при разработке своих проектов!

Красивых и посещаемых вам сайтов, друзья мои!

Итак, встретимся в следующем уроке, а пока всегда ваша пушистая Web-Кошка с чувством глубокого удовлетворения (и легкого сожаления) прощается с вами, дорогие и любимые мои читатели!