Как вставить фотогалерею в материал joomla. Галереи изображений. Загрузка одного изображения в галерею для Joomla

Здравствуйте. Сегодня я расскажу, об одной, незаслуженно не популярной, галереи Joomla, под названием FW Gallery. В отличие от простых галерей Simple Image Gallery и Sigplus, это расширение полнофункциональный, инструмент для создания фото галерей на сайте Joomla в статьях, модулях, каруселях, со своими плагинами (платными и бесплатными), системой каталогизации изображений их поиска и контроля скачивания.

О компоненте FW Gallery

Компонент FW Gallery создан 08 июля 2010 года. Последняя версия 3.3. Лицензия некоммерческая, GPLv2 (универсальная общественная лицензия GNU, второй версии).

Где взять FW Gallery

Установочный ZIP пакет FW Gallery, называется free_gallery_subscription_v3.3 . Он включает две папки, для Joomla 2.5 и для Joomla 3. Папки одинаково наполнены, но разными версиями компонентов, плагина и модулей галереи FW.

Для Joomla 3 это следующие установочные архивы:

  • com_fwgallery_v3.3;
  • com_fwgallerytmpllight_v3.2;
  • com_fwgallerytmplphotographer_v3.2;
  • mod_fwgallery_carousel_v3.0;
  • mod_fwgallery_fancy_slideshow_v3.0;
  • mod_fwgallery_latest_v3.0;
  • plg_search_fwgallery_v3.0.

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

После скачивания, архив нужно распаковать и все содержимое папки Joomla 3, установить расширение на свой сайт. Для чего, вам нужно авторизоваться в административной панели сайта , войти на вкладку Расширения→Менеджер расширений→Загрузить файл из пакета и последовательно выбирая архивы компонентов, модулей и плагина FW галереи установить их на сайт.

После загрузки проверьте их включение на вкладке Расширения→Менеджер расширений→Управлени е, воспользовавшись фильтром «FW». Также посмотрите, отражается ли компонент FW в меню Компоненты.

Знакомство с FW Gallery

В панели управления галереей FW пять вкладок:

  • Галереи;
  • Изображения;
  • Плагины (список установленных плагинов этого расширения);
  • Шаблоны (три шаблона для показа. Работает только один);
  • Язык (русский перевод есть, включается автоматом по локализации Joomla);
  • Конфигурация (здесь, все, что можно делать в расширении, помечено «Да», и что можно будет делать, если поставить дополнительные плагины, помечено «Нет»);
  • ipPhone (ссылка для скачивания приложения для мобильного устройства и документации).

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

Создаем фотоальбом

Перед загрузкой изображений, нужно создать фотоальбом. Идем на вкладку FWGallery→Галереи→кнопка Создать .

  • Даем ей имя (1), любое.
  • Показываем пользователя (2), автора;
  • Задаем цвет отражения (3);
  • Выбираем, кто может видеть альбом (4);
  • Указываем, открыта она или закрыта для общего просмотра (5);
  • Даем ей описание(7);
  • И публикуем ее кнопкой (6).

Сохраняем и закрываем. Все, первая галерея создана. Наполним ее фотографиями.

Загрузка фотографий

Идем на вкладку «Изображения». Фотографии можно загружать по одной (кнопка «Создать») или пакетом (кнопка «Пакетная загрузка»).

Загрузка одной фотографии

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

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

Загрузка видео

На вкладке «Создать» есть поле: Тип файла. Там два типа, файлов, которые можно загружать. Это image и video. Для загрузки video выбираем тип файла: video.

Загружаем видео со своего компьютера. Незабываем правильно указать тип видео файла (mp4, avi и т. д), для этого есть отдельный пункт с выпадающем меню. Да, не забудьте создать для видео отдельную галерею или несколько галерей по тематике видео подборов.

class="eliadunit">

Важно! Загрузить видео вы сможете, а вот для его показа нужен платный плагин, FW Gallery Video плагин (ссылка в конфигурации).

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

Итак, мы создали галерею, загрузили, одиночное фото, видео файл и пакет из 10 фотографий. Остается показать их на сайте. Чем и займемся.

Показать фотографии на сайте

Чтобы показать фотографии галерей на сайте можно создать отдельное меню для фотографий и создать в этом меню пункты меню FW Gallery. В меню можно создавать любое количество разных пунктов меню для фото FW.

  • Frontend manager Layout;
  • Galleries Layout;
  • Single Gallery Layout;
  • Single Image Layout;
  • Single Tag Layout.

Далее, создаем пункт меню нужного типа. Можно создать несколько разных пунктов меню. Создаем модуль типа «Меню» и размещаем это меню на сайте. Чистим кэш сайта (Система→Очисть кэш сайта) и чистим кэш Браузера (Ctrl+F5). Ждем несколько минут. И видим результат работ.

Одиночное фото (Single Image Layout)

Галерея (Single Gallery Layout)

Альбом с привью (Galleries Layout)

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

В бесплатной версии можно показывать фотографии, только в модулях сайта или отдельных галереях. Для показа фотографий в статьях, нужно купить плагин FW Content (9,99$).

Создаем модуль FW Gallery

Входим на вкладку Расширения→Модуль расширений . Видим три типа модулей компонента FW Gallery. Создадим, например, модуль с последними загруженными фотографиями.

  • Даем модулю название (0);
  • В дополнительных настройках указываем галерею (1), количество фотографий для показа (2), сортировку(3), размер фото (4) и форму показа, вертикаль или горизонталь (5);
  • Публикуем модуль не забыв, указать место его размещения.

Управление галереями и фотографиями

Под финал покажу, как можно управлять галереями и редактировать фотографии в галереях.

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

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

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

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

Поэтому рассмотрим как не тратя лишнее время, сделать простую галерею в 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
Значит у вас получиться такой путь:

Ваш_сайт/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 или материала K2.

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

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

В итоге:

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

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

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

Плагин - Simple Image Gallery можно использовать в качестве фотогалереи, он умеет показывать на сайте изображения из папки. Его преимущество в том, вы можете в считанные минуты создать на сайте галерею и разместить ее на сайте на любой странице, это могут быть материалах К2 или любые другие статьи.

Плагин очень прост в использовании, не создает нагрузку на сервер и имеет простые настройки с которыми разберется даже начинающий веб-мастер.

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

Установка плагина

Плагин устанавливается как обычное расширение Joomla. После того, как вы скачаете установочный пакет (один для всех версий Joomla 1.5/2.5/3.x), перейдите в:

Расширения -> Менеджер расширений и установите zip-файл.

Затем, перейдите в Расширения -> Менеджер плагинов и включите плагин (кнопка, опубликовать). Чтобы изменить параметры плагина, просто нажмите на его название "Simple Image Gallery (by JoomlaWorks) ".

Требования

Для того, чтобы плагин Галереи изображений функционировать должным образом, убедитесь, что на вашем сервере установлена библиотека PHP GD image library (эта библиотека присутствует на любом нормальном хостинге).

Вы также должны убедиться, что папка /cache доступна для записи, другими словами, убедитесь, что разрешения для этой папки 755 или 777, иначе плагин видаст ошибку.

Как использовать плагин?

Все просто, если вы хотите добавить внутри статьи галерею, тогда вам нужно добавить специальный тег с именем папки (Галереи изображений). По умолчанию есть корневая папка - это папка "images " (вы можете ее изменить в настройках плагина). Создайте новую папку в внутри корневой папки, например, папку demo и загрузите туда свои изображения в формате JPG или PNG . Затем откройте статью куда нужно разместить галерею и просто вставите этот тег:

Пример встраивания тега

{gallery}demo{/gallery}

где demo - это имя вашей папки, таким образом на месте этого тега появится Галерея изображений . Она может быть размещена в любом месте статьи, так же вы можете выводить несколько разных или одинаковых галерей на одной странице.

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

Пример встраивания тега

{gallery}demo/subfolder{/gallery}

Другими словами, пишем путь к целевой папке с изображениями без всяких слешей в начале или в конце вашего пути (корневую папку изображений указывать не нужно).

Галерея изображений использует библиотеку jQuery на основе "fancyBox", известный как "Lightbox" эффект. Если на вашем сайте не используется jQuery, плагин может подключить ее к сайту (и вы можете выбрать в настройках плагина, какую версию jQuery использовать). Плагин не будет загружать библиотеку jQuery в Joomla 3.x, там она уже загружена по умолчанию самой Joomla.

Скачать файлы:

Simple Image Gallery Версия: v 3.01 Rus

Русифицированная версия, один установочный пакет для всех версий Joomla.

06.07.2014 Русский Joomla 1.5-1.7-2.5-3.0 109.63 KB 7183

Simple image gallery pro v 3.0.8 - это полная версия шикарного компонента галереи для joomla, скачать которую можно бесплатно. C помощью данного расширения вы можете вставлять галереи в любые статьи стандартного компонента контентом джумла, k2, Virtuemart и так далее.

Настройки Simple image gallery pro

Для того чтобы ваша галерея на сайте joomla работала и украшала контент или любую страницу, достаточно сделать всего несколько простых шагов:

  • первое что нужно сделать это скачать компонент по ссылке ниже;
  • затем устанавливаем через обычный менеджер расширений;
  • заходим в компонент Simple image gallery pro и настроим его под свои нужды;

  • Корневая папка для галереи - сдесь нужно указать путь и название папки, в которой будут храниться папки с картинками для галерей joomla, например если вы укажите images/simple, то ваши галереи будут храниться в папке simple;
  • Макет шаблона галереи - выберите какой из шаблонов галерей вам больше всего подходит по дизайну;
  • Ширина и высота эскиза - это размеры уменьшенной копии изображений, кликая на которые пользователь получит полную версию картинки;
  • Умные изменения размера - изображения подстраиваются под разрешение монитора пользователя, иными словами становятся адаптивными;
  • Качество эскиза - чем ниже качество тем меньше будет нагрузка на сервер. Подберите оптимальное соотношение, как правило оно равно 70-80;
  • Порядок - в каком порядке ваши изображения галереи Simple image gallery pro будут выводиться;
  • Подпись и лимит слов - это текст, который будет присутствовать на изображениях галереи joomla;
  • Загрузить модульную позицию во всплывающее окно - этот пункт настроек говорит сам за себя.

Как добавлять галерею

Для того чтобы добавить галерею в Simple image gallery pro достаточно сделать несколько простых шагов.

Первым делом конечно нужно будет скачать и установить расширение.

После установки компонента и плагинов, заходим в любую статью на сайте, щелкаем мышкой на нужном месте и нажимаем на кнопку Simple image gallery pro. Перед вами откроется окно, в котором можно создать новую галерею или отредактировать старую.

Чтобы у нас появилась новая галерея в joomla, нажимаем на одноименную кнопку. Далее вводим название папки с изображениями будущей галереи латинскими буквами и цифрами (желательно называть её так, чтобы вы патом могли разобраться какая папка какой принадлежит статье).

При наведении на галерею Simple image gallery pro появиться кнопка "Вставить", на которую и нужно нажать. Теперь сохраняем статью и любуемся красивой галереей на сайте.

Мы прошлись по основным настройкам Simple image gallery и посмотрели как создавать красивое представление картинок и изображений в joomla. Для того чтобы скачать расширение не нужно регистрироваться и покупать его но помните, что компонент распространяется на платной основе, и скать его с официального сайта можно только в случает оплаты 28 евро.

Для установки русского языка скопируйте файлы архива в папку administrator\language\ru-RU на вашем сервере.

VTEM ImageHover - превосходное расширение, разработанное профессиональной командой разработчиков Vtem, который позволяет отображать изображения на сайте с различными эффектами при наведении на них курсора мышки. Использование библиотеки JQuery, как и у фотошоп онлайн дает возможность выбрать тип отображения из 6 предлагаемых вариантов. Для выбора нужного эффекта достаточно указать требуемый код наложения. Данный способен качественно представлять информацию на страницах сайта с наглядной презентацией материалов.

VTEM Popyey - оригинальный плагин от разработчиков Vtem, позволяющий организовать просмотр галереи изображений, не покидая страницы с материалом. Данный плагин использует возможности скрипта JavaScript и библиотеки jQuery, которые предлагают несколько вариантов отображения графических файлов. Использование плагина позволит сэкономить место при отображении коллекции изображений и придать особой уникальности сайту. Для выбора типа отображения достаточно указать правильный синтаксис, доступный на странице с демонстрацией работы плагина.

Simple Image Gallery Pro v2.5.7 - очередное обновление отличного плагина от команды разработчиков JoomlaWorks, способного создавать галереи изображений в материалах сайта. Для правильной работы плагина необходимо поместить все фотографии в одну папку и опубликовать ее в материале, используя специальные тэги {gallery}myphotos{/gallery}, указав при этом путь к папке. В новой версии были исправлены незначительные ошибки с загрузкой изображений и добавлена совместимость с 2.5.


SJ Image Slideshow - новый от разработчиков из студии SmartAddons, позволяющий организовать наглядное слайд - шоу изображений из материалов сайта. Данный модуль обладает адаптивными функциями, которые позволяют корректно отображаться содержимому на любых мобильных платформах. Огромный список настроек модуля позволит очень гибко настроить внешний вид ротатора для максимального соответствия дизайну сайта. Имеется возможность настройки размеров модуля, выбора источника вывода содержимого, включения показа дополнительной информации и многое другое. Всего доступно 4 темы ротации, которые содержат различные эффекты анимации и оригинальные панели навигации.


SJ Slider for JoomShopping - функциональный модуль отображения товаров, разработанный командой разработчиков SmartAddons. Данный модуль обладает адаптивным дизайном, позволяющим корректно отображать товары на планшетных и мобильных платформах. Среди основных достоинств модуля стоит отметить наличие трех тем отображения содержимого, оптимизированный под поисковые системы код файлов, совместимость со всеми браузерами и многое другое. Настройки модуля позволяют очень гибко настроить работу расширения с возможностью вывода дополнительной информации о каждом товаре. Данный слайдер может быть использован в качестве витрины самых популярных или рекомендованных товаров интернет - магазина.


SJ Mega Slider for JoomShopping - превосходный слайдер для отображения товаров на сайте интернет - магазина, построенного на базе компонента JoomShopping. Данный модуль позволяет отобразить в оригинальной и эффектной форме содержимое любого магазина. Великолепный дизайн макетов отображения со встроенными навигационными кнопками, позволяет качественно увеличить функционал сайта. Гибкие настройки модуля позволяют выбрать один из четырех вариантов вывода товаров, определить количество позиций, участвующих в ротации, и задать эффекты для ротации. Имеется возможность отображения дополнительной информации товаров: краткое описание, изображения и цены. SJ Mega Slider отлично оптимизирован и корректно отображается на любых мобильных устройствах и экранах.

Simple Image Gallery Pro v2.5.6 - обновленная версия плагина от команды разработчиков JoomlaWorks, способного создавать галереи изображений в материалах сайта. Для правильной работы плагина необходимо поместить все фотографии в одну папку и опубликовать ее в материале, используя специальные тэги {gallery}myphotos{/gallery}, указав при этом путь к папке. В новой версии были исправлены ошибки с загрузкой изображений из сервиса Flickr, позволяющего хранить и просматривать пользователям мультимедийный контент.

Simple Image Gallery Pro v2.5.5 - актуальная версия отличного плагина от разработчиков JoomlaWorks, позволяющего создавать галереи изображений в материалах сайта. Для правильной работы плагина необходимо поместить все фотографии в одну папку и опубликовать ее в материале, используя специальные тэги {gallery}myphotos{/gallery}, указав при этом путь к папке.