Joomla как сделать галерею

Joomla как сделать галерею

3159
Комментариев: 0

Рассмотрим, как создать галерею на Joomla-сайте при помощи компонента Phoca Gallery. Скачайте, а затем установите расширение в админпанели своего веб-поратла. По желанию вы также можете русифицировать компонент, но это не обязательно:

Как создать галерею и загрузить в нее картинки?

Чтобы создать галерею выберите в меню расширения пункт “Категории” и кликните на кнопку “Создать”. Обратите внимание на то, что поле “Заголовок” является обязательным для заполнения.

После того, как вы создали галерею, можно добавить в нее картинки. Перейдите в раздел “Изображения” и кликните на вкладку “Создать папку”. Добавьте название директории и сохраните изменения. На вкладке “Мультизагрузка” нажмите Add Files, выберите изображения на своем компьютере, кликните Start Upload. Для того, чтобы картинки попали в ту или иную папку, отметьте их галочками и выберите интересующую вас директорию в поле “Категория”:

Как добавить пункт меню?

Далее нужно добавить пункт меню. На странице Main Menu нажмите “Создать пункт меню” и заполните предложенные поля. Уточним, что в поле “Тип пункта меню” нужно выбрать Phoca Gallery:

Как настроить рейтинг, статистику и комментарии?

Откройте страницу Phoca Gallery и кликните на кнопку “Настройки”. Перейдите на вкладку “Пользователи” и выберите пункт “Показывать рейтинг в поле “Настройка рейтинга”. Следующим идет блок включения комментариев:

Как по-быстрому создать галерею в Joomla

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

Но ставить целый компонент не хочется.

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

Поэтому рассмотрим как не тратя лишнее время, сделать простую галерею в Joomla.
Есть хороший плагин — Simple Image Gallery, он бесплатный.

Настройка галереи

После установки плагина, переходим Менеджер расширений — Плагины.

Находим плагин Simple Image Gallery в списке и переходим к настройкам.

Их не много.

Root folder for image — здесь указывается корневая папка для хранения изображений галереи.
По-умолчанию это папка images, можно так и оставить.

Thumbnail width и height — это ширина и высота превьшек для фото, в пикселях.

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

К примеру у меня это 791px.
Я хочу чтобы выводилось по 3 фото в ряду.
Значит 791 делим на 3, получается

263px.
Это максимальная ширина для превью, при которой они будут выстраиваться по 3 в ряду.

Надо по 4 в ряду? Значит делим ширину главной колонки на 4.

А с высотой смотрите сами, плагин просто сделает превьюшку с указанной высотой.
желательно чтобы соотношение сторон оригинальной фотографии и её превьюшки были близкими.

Thumbnail image quality — качество превьюшек. Можно осатвить 80.

Thumbnail cache expiration time — это время кэширования превьюшек в минутах.
Т.е. сколько хранить изображению для превью в кэш-памяти.

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

Memory Limit — это ограничение на использование оперативной памяти сервера.
На обычных виртуальных хостингах может не работать.
Это нужно если у вас очень много фотографий, и вы не хотите чтобы галерея тратила все ресурсы сервера.
В этом случае можно ограничить расход памяти.

Это опция для опытных пользователей.

Подготовка изображений для галереи

Выберите нужные вам изображения на своём компьютере.

Создайте папку на вашем сайте, в папке images, например myfoto
Значит у вас получиться такой путь:

И загрузите туда ваши изображения с компьютера.
Лучше всего по FTP, также можно загрузить через панель хостинга.

Рекомендации по подготовке изображений.

Не делайте фотографии больше чем экран ноутбука. Т.е. ширины 1600px и высоты около 900px вполне достаточно для просомтра изображений пользователями.

Вывод изображений на сайте

Теперь изображения загружены в папку, для примера это была папка myfoto, которая находится в папке images.

Сейчас в любой статье или материале K2, достаточно указать такой тег:

Теперь в статье, вместо этого тега, будут выводится фотографии из папки images/myfoto

При клике по превью, будет открываться оригинальное фото с эффектом lightbox, и фотографии можно перелистывать.
При наведении появляется иконка лупы.

Если потребуется сделать ещё одну галерею, то также создайте новую папку для неё, подготовьте и загрузите туда фото и вставьте тег с именем этой папки в любом месте статьи Joomla или материала K2.

Адаптивность галереи

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

При сужении экрана превьюшки тоже будут выстраиваться в доступной им ширине.

Joomla — Урок 13. Создаем первую галерею Phoca Gallery

Как вы помните у нас в каталоге товаров 13 разделов и в каждом в среднем по 3 категории. Таким образом, нам предстоит создать около 40 фотогалерей. Чтобы не запутаться, какие образцы, к каким категориям относятся, неплохо было бы иметь возможность как-то их рассортировать. В компоненте Phoca Gallery предусмотрена такая возможность, а именно — возможность создавать различные категории для изображений.

• Создаем такие же категории, как в каталоге товаров.
• Под каждую категорию создаем одноименную папку с изображениями.
• Под каждую категорию создаем фотогалерею.
• С помощью плагина Phoca Gallery выводим фотогалереи категорий в нужное место сайта или страницы.

• Заголовок. В нашем случае, например, Брянск — гофра.
• Псевдоним. В нашем случае — brynsk-gofra
• Родительскую категорию. Мы создаем первую категорию, так что и выбирать не из чего. Но вообще Phoca Gallery поддерживает вложенность категорий. Например, мы могли бы сделать категорию Брянск, а в ней подкатегории: гофрированные, дуплекс, мойка, пена. Мы усложнять (т.е. делать вложенные категории) пока не будем.

В дальнейшем можете сами с ними поэкспериментировать. Здесь можно задать права пользователей на загрузку, добавление, удаление и публикацию изображений и настроить внешний вид самой категории. Мы же нажимаем на кнопку Сохранить и видим, что наша первая категория появилась в Менеджере категорий Phoca Gallery

Теперь нам надо загрузить сами изображения. Их вы можете предварительно накопировать с сайта-образца или скачать здесь.

Теперь о загрузке изображений в галерею. Сделать это можно несколькими способами:

• Идем в папку oboi/images/phocagallery. Создаем здесь папку под нашу категорию — brynsk-gofra и в нее копируем наши изображения. Теперь наши изображения находятся на нашем сервере.
• Теперь идем в административный раздел Компоненты — Галерея Phoca Gallery — Изображения

И нажимаем на кнопку Новый. Откроется окно добавления изображения в галерею. Здесь мы сначала щелкаем по кнопке Изображения:

Щелкаем по нашей папке brynsk-gofra:

Ждем какое-то время, пока Phoca Gallery создает пиктограммы наших изображений:

После чего щелкаем по первому изображению (выбирая его таким образом):

и видим, что его название появилось в названии файла в окне описания изображения. Нам осталось задать изображению Название (Адель), Псевдоним (adel) и выбрать категорию (Брянск-гофра). Остальные настройки оставляем без изменения и щелкаем по кнопке Сохранить:

Идем в административный раздел Компоненты — Галерея Phoca Gallery — Изображения и нажимаем на кнопку Новый. Откроется окно добавления изображения в галерею. Щелкаем по кнопке Изображения. В открывшемся окне можно создать папку для изображений категории, набрав название в поле Папка и щелкнув по кнопке Создать папку. А затем загружать изображения по одному, щелкнув по кнопке Обзор, выбрав изображение у себя на компьютере и нажав на кнопку Начать загрузку:

Таким образом, наша первая галерея создана, осталось лишь вывести ее с помощью плагина Phoca Gallery Plugin в нужном месте сайта. Но сначала самостоятельно создайте еще три галереи: Брянск-дуплекс (brynsk-duplex), Брянск-моющиеся (brynsk-moyka) и Брянск-пена (brynsk-pena). Изображения для этих галерей можете скачать здесь (для наших целей хватит по 5-10 изображений на категорию). В результате, в Менеджере категорий Phoca Gallery у вас должно быть четыре категории:

И в каждой категории должно быть по несколько изображений.

Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.