Новости
Статьи
Маленький Лувр на Joomla-сайте, или Фотогалерея Joomla с JoomGallery.
Опубликовано: 01.09.2018
Дамы и господа! Всех вновь рада приветствовать на Авторском блоге Web-Кошки ! Просматривая свои последние записи, я поняла, что почему-то давненько уже не публиковала уроки по созданию сайтов на моей любимой Joomla ! Поэтому недолго думая, сегодня я исправлю это несправедливое положение дел и поделюсь с вами страшными тайнами создания и настройки фотогалереи на сайте Joomla.
Те, кто следит за серией моих постов, посвященных разработке сайтов на Joomla, возможно, вспомнят, что однажды я уже рассказывала о создании фотогалереи, и могут заподозрить меня то ли в непростительной забывчивости, то ли вообще … ну не знаю даже в чем еще!
Но такого шанса я вам, друзья, не дам, поскольку помню прекрасно, что урок по созданию фотогалереи в тексте материала уже опубликован на моем блоге. Тогда мы использовали для этих целей плагин Simple Image Gallery . Сегодня же мы создадим фотогалерею куда более масштабную, функциональную и навороченную, поскольку воспользуемся компонентом JoomGallery .
Кратко расскажу, о чем сегодня у нас пойдет речь. Мы научимся создавать галереи изображений, разбитых по категориям, рассмотрим основные возможности и настройки JoomGallery, научимся выводить слайдшоу определенных категорий галереи изображений в модулях, а также подключим страницы галереи к меню ( как создать меню Joomla ) и опубликуем их на сайте. В общем, работы предстоит много, зато и результат оправдает затраченные усилия!
Чтобы вы сразу понимали, о чем пойдет речь и что мы получим в итоге, я покажу вам, как фотогалерея, созданная средствами компонента JoomGallery, выглядит на сайте.
Вот так выглядит страница категорий изображений:
Так — страница одной конкретной категории:
А это слайдшоу выбранной категории:
Впрочем, внешний вид, точнее, функционал галереи, можно при помощи настроек JoomGallery менять до неузнаваемости, но об этом позже. А пока начнем с начала, то есть познакомимся с тем,
Как установить компонент фотогалереи JoomGallery
В общем-то, ничего нового я вам не скажу, потому что уже написала подробную инструкцию о том, как устанавливать расширения Joomla . Лень идти по ссылке? Как я вас понимаю! Тогда алгоритм к вашим услугам:
Скачиваем JoomGallery Идем в «Расширения» — «Менеджер расширений», выбираем скаченный архив кнопкой «Обзор» и жмем «Загрузить и установить». Ждем несколько секунд — и получаем сообщение об успешной установке JoomGallery. Знающие буржуинский диалект могут на этом и остановиться, но для тех, кто предпочитает работать в родной языковой среде, я покажу, как JoomGallery русифицировать. Для начала скачаем пакет русификации JoomGallery и точно так же через «Менеджер расширений» его установим — все, JoomGallery теперь на русском языке.Таперича приступим к собственно созданию фотогалереи. И первое, что необходимо сделать, это наполнить галерею — добавить в нее изображения, которые при необходимости нужно разбить по категориям.
Создаем категории и добавляем изображения в JoomGallery
Создание категорий
Вначале создадим категории для последующей загрузки в них изображений. Для этого идем в «Компоненты» — «JoomGallery» и на открывшемся экране, который поражает обилием всяких вкладочек, пиктограммочек, значков и прочих повергающих начинающего юзера в священный ужас настроек:
хладнокровно жмем на пиктограмму «Категории» или же переходим на одноименную вкладку (1). Нас встречает вполне обычное окно менеджера Joomla, которое разработчики JoomGallery почему-то обозвали «Ассистентом».
Ну нам-то с вами все равно, ассистент или менеджер, потому что интересует нас лишь возможность создания категорий для изображений. А доступна она по клику на кнопку «Создать» в правом верхнем углу (1). Во вновь открывшемся стандартном джумловском окне создания «всего-чего-угодно» нужно ввести только название категории. Я для примера решила создать фотогалерею зверюшек, и будут у меня в ней три категории: кошки, собаки и зайцы. Вот прямо с такими названиями я и создаю друг за другом три категории, которые в итоге видны в «Ассистенте категорий» (маленький совет от Web-Кошки: чтобы быстрее создать несколько категорий, пользуйтесь кнопкой «Сохранить и создать»):
Здесь же доступны возможности изменения и удаления категорий, для снятия их с публикации — а точнее, временного удаления из фотогалереи и т.д.
Теперь дело за малым — наполнить категории изображениями.
Добавляем в JoomGallery изображения
Для загрузки изображений JoomGallery предлагает нам несколько инструментов: мы можем загружать изображения пакетом, то есть сразу все из одной категории (1), либо же заливать их по одному (2), а также можно залить фотки на сервер по FTP (3) или же воспользоваться Java-загрузкой (4).
Естественно, когда вы только создаете и настраиваете фотогалерею, логичнее и удобнее пользоваться пакетной загрузкой фото, особенно если у вас много категорий, в которых нужно разместить десятки, а то и сотни изображений. Для этих целей можно использовать и FTP-доступ.
Использовать «Загрузку одного фото», наоборот, удобнее, когда вы хотите добавить несколько изображений в уже созданную и работающую галерею. Я сейчас покажу все эти варианты загрузки, чтобы вы понимали, о чем речь.
«Загрузка одного фото»
Выбираете изображение для загрузки Указываете, в какую категорию это изображение загрузить Вводите на латинице название для этого изображения — дело в том, что JoomGallery использует не стандартные названия фотографий, а свои собственные, которые вы тут задаете. Например, для категории «Кошки» я укажу название «Cats». А здесь нужно указать порядковый номер фото. Если у вас категория пустая, то нумерацию можно оставить по умолчанию с единицы, а если вы загружаете фотки в категорию, где уже лежит пять, например, изображений, то номер нужно заменить на следующий, то есть «6» в моем примере.Здесь же можно указать и необязательные параметры: описание изображения, его автора, доступ к нему, а вот настройки анимированных и прозрачных изображений, а также режим отладки лучше не трогать.
После чего жмем «Загрузить» и дожидаемся окончания загрузки, о чем и получаем сообщение.
Вот так вот все просто с загрузкой одного фото.
Единственное, обратите внимание, что на этом экране нет смысла выбирать несколько фотографий в полях слева — происходит какая-то ошибка и загружается только последняя из выбранных. Не знаю, может быть, это только у меня так, но все-таки советую выбирать и загружать именно по одной фотографии.
Согласитесь, сотню картинок по одной с использованием этого инструмента заливать неудобно, поэтому мы перейдем к инструменту
«Загрузка нескольких фото»
Вот так выглядит его окно:
Мы к нему еще вернемся, а пока обязательно взгляните на предупреждение вверху экрана:
Здесь нам русским человеческим языком говорят, что нужно из фотографий сделать архив формата ZIP , в котором НЕТ вложенных папок и подархивов. Только изображения!
Итак, нам из изображений каждой категории нужно подготовить zip-архив. Для этого щелкаем правой кнопкой мыши по папке с изображениями определенной категории (вы же распределили их по отдельным папкам, не так ли?) и выбираем «Добавить в архив» — если у вас установлен архиватор WinRar. Впрочем, если другой, полагаю, особенных трудностей эта операция у вас не вызовет.
Не забудьте выбрать формат ZIP и затем «OK» — архив создан.
Таким же точно образом создайте архивы для фотографий всех категорий.
Теперь возвращаемся к экрану «Загрузки нескольких фото».
Выбираем архив с фотографиями, созданный только что Указываем, к какой категории фото принадлежат Указываем внутреннее общее название для фотографий. Например, если вы укажете «Cats», то каждая из фотографий этой категории получит название «cats-1», «cats-2» и т.д. Выбираем начальный номер для нумерации фотографий. Принцип тот же: категория пустая — оставляем «1», в категории уже есть n фото — указываем номер «n+1». И конечно, «Загрузить»Времени на загрузку архива уйдет, конечно, больше, чем на одно фото, по окончании процесса вы получите сообщение об успешной загрузке (или о причинах ошибки, если что-то пошло не так).
На этом подготовительные работы у нас с вами подошли к концу, и пора выводить фотогалерею на сайте. Начнем с того, что разберемся,
Как выводить фотогалерею при помощи модуля JoomCategories for JoomGallery
Изображения из любой категории мы можем вывести в любом месте на странице сайта при помощи дополнительного модуля для компонента JoomGallery. Естественно, этот модуль предварительно нужно скачать и установить обычным способом (через Менеджер расширений).
В «Менеджере модулей» находим в списке JoomCategories for JoomGallery (1) и активируем его кликом по значку в графе «Состояние» (2) :
Теперь оправляемся настраивать модуль JoomCategories for JoomGallery (напомню, попасть в настройки можно, нажав на название модуля в списке).
Параметров у модуля JoomCategories for JoomGallery несколько десятков, однако бояться такого обилия не стоит — мы сейчас подробно разберемся, какая настройка за что отвечает. Начнем с верхней группы настроек « Common parameters «:
Указываем порядок расположения категорий в модуле. На скрине выставлен параметр «Начиная с последнего добавленного», а вообще-то доступны варианты «Самые просматриваемые», «С самым высоким рейтингом» и «Случайный» Вписываем количество категорий, которые хотим выводить в модуле А здесь перечисляем ID категорий, которые хотим исключить из показа. Чтобы узнать ID категории, нужно вернуться в «Ассистент категорий»: Определяем, показывать ли название категории в модуле и Делать ли его ссылкой В этом группе настроек можно показать или скрыть рейтинг, просмотры, описание категории и изображения. На мой кошачий вкус, слишком много информации в модуле ни к чему, поэтому я все убрала.Следующая группа настроек отвечает за внешний вид модуля JoomCategories for JoomGallery:
Выбираем количество колонок для вывода миниатюр категорий в модуле. Определяем, из какого изображения генерировать миниатюру для категории: из миниатюры, созданной Joomla, или из оригинального изображения.Маленький кошачий совет: если для вас критично качество фотографий в модуле, как это бывает с фото людей, изображениями из портфолио, то выбирайте здесь «Оригинальные изображения» — «Миниатюры» Joomla создает неважного качества, что особенно заметно, если у вас достаточно крупные фотки в модуле.
Эту группу настроек лучше не использовать, оставив «Dynamic cropping» в выключенном положении. Если же его включить, то JoomGallery будет динамически обрезать ваши фотки по размерам, указанным в следующих двух строках. По мне, так это неудобно. Для управления размерами миниатюр лучше использовать следующую группу настроек. Здесь мы просто выбираем, по какому параметру фотки будут подгоняться: по ширине или высоте. А длина другой стороны (высоты, если по ширине, и наоборот) -будет высчитываться пропорционально. То есть мы указываем, что все картинки в модуле должны быть шириной 150 пикселов, и все изображения будут проебразованы с сохранением пропорций. Выбираем расположение миниатюры относительно текста-описания и горизонтальное выравнивание в модуле Эта группа параметров отвечает за показ/скрытие рамки вокруг категории, толщину ее линии, стиль (сплошная, пунктир и т.д.), цвет, отступы и цвет фона. В общем, владея хоть чуть-чуть основами языка CSS, можно гибко настроить внешний вид модуля. Показывать короткий текст — я не знаю даже, что нам предлагают показывать, но справедливо полагаю, что ни к чему загружать модуль текстами и прочей лишней инфой. Посему — выключила. А это горизонтальная линия, разделяющая миниатюры категорий в модуле. Иногда бывает уместна — пробуйте! Здесь нам предлагают добавить ссылки для перехода к просмотру фото в полноэкранном режиме. Даже не знаю, убирать ее или нет. К переходу к просмотру фото из выбранной категории можно перейти простым кликом по миниатюре, поэтому как бы смысла нет оставлять ссылку. С другой стороны, не каждый пользователь может об этом догадаться, поэтому таким юзерам ссылка подскажет, что нужно делать. Здесь выбираем положение ссылки, если включили ее в предыдущем пункте И заменяем текст на свой — например, на «перейти к просмотру»Ну и последняя группа настроек отвечает за параметры «большого» слайдшоу, к которому можно перейти, кликнув по миниатюре категории (ну или по ссылке):
Порядок смены изображений категории Количество изображений, которые будут показываться. 0 — все изображения Время показа одного изображения в миллисекундах Эффект смены изображений Время смены изображений (поиграв с этими тремя настройками, можно получить весьма эффектное слайдшоу) Размеры изображений в режиме слайшоу Показывать ли инфопанель, карусель миниатюрок и кнопки управления под картинкой. У меня на скрине они почему-то отключены, хотя можно и даже нужно включить.Ну вот с настройками и все. Осталось только ввести название модуля (1) или вообще его скрыть (2), определить позицию для него (3):
а также привязать модуль к меню — выбрать, на каких страницах его показывать:
и можно идти на сайт смотреть на результат своих трудов.
Вот так выглядит модуль фотогалереи JoomGallery на сайте в дефолтном исполнении шаблона:
А так — сама фотогалерея в исполнении компонента JoomGallery:
Трудно не заметить, сколько всего лишнего выводит фотогалерея при стандартных ее настройках. Вам нужны все эти комментарии, коды для вставки, ссылки на скачивание, «Поделиться» и все прочее? Полагаю, если что-то и пригодится, то далеко не все. Поэтому теперь мы отправимся настраивать компонент фотогалереи JoomGallery.
Настройки JoomGallery кроются в одноименном пункте меню. Давайте же на них посмотрим!
Итак, что мы имеем? Девять вкладок, каждая из которых имеет свои вкладки-подпукты, и на каждой из таких «подвкладок» разработчики расположили десяток-другой настроек. Мне, глядя на все это буйство настроек, на ум приходит лишь одна мудрая мысль — «Без бутылки не разберешься!»
Но мы все же попытаемся, да не просто попытаемся, а детально разберем каждую (по возможности и необходимости) настроечку компонента JoomGallery. Правда, произойдет это уже не сегодня, а в следующем уроке Joomla , где помимо настроек, я покажу еще, как выводить на сайте страницы фотогалереи и привязывать их к пунктам меню. Так что подписывайтесь на обновления, друзья-джумловоды, и будет вам счастье!
Ну а на сегодня, по-моему, информации уже даже чересчур! Надеюсь… Да что там надеюсь — не сомневаюсь, что кому-то знания, которыми я сегодня поделилась, несомненно пригодятся, и вы с успехом примените их при разработке своих проектов!
Красивых и посещаемых вам сайтов, друзья мои!
Итак, встретимся в следующем уроке, а пока всегда ваша пушистая Web-Кошка с чувством глубокого удовлетворения (и легкого сожаления) прощается с вами, дорогие и любимые мои читатели!