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

18 комментариев

Дамы и господа! Всех вновь рада приветствовать на Авторском блоге 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-Кошка с чувством глубокого удовлетворения (и легкого сожаления) прощается с вами, дорогие и любимые мои читатели!

18 коммент.
  1. Привет, Лариса! Вот читаю статьи твои по Джумле — и так по ней скучаю 🙂 Все-таки — это очень мощный и полноценный инструмент.

    • Привет! Я сама, хотя уже достаточно давно с ней работаю, не перестаю удивляться — «О, и это можно сделать!» Хотя, согласись, замороченная она все-таки, на любителя! 😉

  2. Скажите, а в этом компоненте не встречаются скрытые зашифрованные ссылки?

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

  3. Валентин

    Добрый день,Лариса. У меня вопрос, как убрать надпись «Категория:» на странице категорий изображений? что бы просто выводилась ссылка как у Вас «Кошки» а не «Категория:Кошки»
    Не могу докопаться до истинны. Спасибо.

    • Не совсем поняла, в каком месте, Валентин( Но в любом случае, у этой статьи есть продолжение, полный обзор настроек — http://web-koshka.ru/joomla/mul-timedia/nastroika-joomgallery.html. Может быть, в нем найдете ответ…

      • Валентин

        Добрый день,еще раз. Суть проблемы: когда выводятся на экран пиктограммы из одной категории (с включенным «show category title » ) то под каждой картинкой появляется надпись вида «Категория: Диваны» или «Категория: Слоны». Я пытаюсь сделать просто «Диваны» или «Слоны» без дополнительной надписи «Категория:» Вот ссылка на подобные проблемы http://joomlaforum.ru/index.php?topic=132503.0 но тут ребята вроде бы решили проблему а у меня как-то не получается… не могу понять . Спасибо.

        • Валентин, я не видя сайта, могу только подсказать направление поиска. Файербагом или просто в Firefox наводите курсор на нужную надпись, выбираете в ПКМ-меню «исследовать элемент», смотрите название блока, в котором надпись выводится — у меня это класс .jg_catelem_txt. Потом ищете по файлам галереи этот класс (удобно искать Тотал Коммандером) и вычисляете код, который выводит слово «категория». Соответственно, его удаляете. Готового решения у меня нет, потому что такой проблемы нет)

        • biga

          Находите файл modules/mod_joomcat/helper.php
          Ищите функцию displayTextElement. В ней меняете строчку$html = $this->displayDescription($cat, $img, ($this->getConfig('showshorttext') == 1 ? false : true));
          на $html = $this->displayDescription($cat, $img, false);

          • biga

            Решение актуально для версии модуля 2.1
            В других не знаю

          • Спасибо)

  4. Здравствуйте!
    У меня копирайт на фото выглядит расплывчатым. Создан он в фотошопе и выглядит четко, но при размещении фото в галерею сайта созданного в joomla выглядит размыто, да и сама фотография хужего качества становится. Что не так? Подскажите пожалуйста.

    • Светлана, проверьте в «Общие установки — Обработка фото», чтобы везде качество было выставлено 100%

  5. пункт 8 — проигнорирован совсем несправедливо. Положение «Показывать короткий текст» убирает нарицательное «Категория» в заглавиях к миниатюрам и, красиво так, остаются сами названия. А, вообще, спасибо из темноты.

  6. Александр

    Не работает, в чем может быть дело. Смотрел настройки Категорий — ничего. Все сделал как написано и ничего

  7. Сергей

    Всем привет! Не могу решить проблему в галерее. При переходе во вложенные категории в url исчезают промежуточные алиасы. В результате у страницы фотографии url вместо такого: site.ru/gallery/cat-1/cat-2/cat-3/photo.html
    выглядит так: site.ru/gallery/cat-3/photo.html
    На форумах ничего не нашел. Не подскажите в чем проблема?
    Спасибо.

  8. Михаил

    при клике на категорию (index.php/component/joomgallery/24012015) почему то перехожу в пустое окно с 1 единственной фото….. не могу понять в чем проблема. настраивал по сайту производителя компонента.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *