Вход | Регистрация

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

галерея изображений для joomla 3

Рассмотрим быстрое создание простой и адаптивной галереи в Joomla.
Без тяжёлых компонентов и расширений.


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

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

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

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

Установка обычная.

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

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

Находим плагин 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
Значит у вас получиться такой путь:

Ваш_сайт/images/myfoto

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

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

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

  2. Сжимайте подготовленные фото. В этом вам поможет сервис TinyPNG, про него написано здесь >>
    Он может сжать картинку без потери качества. Так вы улучшите скорость загрузки.

  3. Чтобы галерея выглядела красиво и ровно, желательно (но необязательно) чтобы все изображения имели одинаковое соотношение сторон.
    Не размеры в пикселях, а именно соотношение сторон. Например, картинка 320 * 240px - это такое же соотношение что 480 * 640.
    Такое соотношение сторон 4 к 3.
    Что такое соотношение сторон посмотрите здесь >>

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

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

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

{gallery}myfoto{/gallery}

И сохранить.

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

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

галерея для joomla 3

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

 

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

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

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

В итоге:

  1. Устанавливаем плагин
  2. Выбираем изображения на своём компьютере, при необходимости сжимаем и обрабатываем.
  3. Создаём папку для галереи и загружаем в неё ваши фото
  4. Вставляем в статью тег для вывода галереи.

Вот так, всё просто, легко и без лишних заморочек.

Спасибо за внимание)

С уважением, Олег Касьянов

Сохраните эту информацию к себе, чтобы не потерять:

И подписывайтесь на наш онлайн-журнал.
С уважением, Олег Касьянов.

Комментарии

Оставьте ваше мнение

*

Получать уведомления о новых комментариях

X

Спасибо!
Ваш комментарий появится после одобрения

нашли ошибку? напишите
X

Вход

Ваш e-mail:

Ваш пароль:


Забыли пароль?
Регистрация

X

Нашли ошибку или баг? Напишите мне.

placeholder="Опишите пожалуйста где вы нашли ошибку и какую, буду вам очень благодарен">

^ Наверх