Галерея фотографий для joomla 3.0. Полноценная галерея Joomla, FW Gallery. Загрузка одной фотографии

Предлагаем скачать последнюю версию популярного плагина Joomla 3 предназначенного для вывода изображений из произвольной папки в виде привлекательной и стильной фотогалереи Simple Image Gallery Pro 3.6.7. Используя встроенную кнопку в стандартном визуальном редакторе редакторе (поддерживается JCK Editor, JCE и TinyMCE), вы можете встраивать галереи в материалы K2, стандартные материалы джумла, в карточки товаров таких популярных интернет магазинов как HikaShop и Virtuemart.

Advanced Portfolio Pro 4.1.0 - компонент портфолио для Joomla

Advanced Portfolio Pro 4.1.0 - новая про версия одного из лучших компонентов портфолио совместимого с Joomla! версии 3 и 4. Из основных функций можно отметить наличие опций для настройки наложения, цвета кнопок и прозрачности, настройку интервалов между столбцами и анимации. Также можно отметить возможность фильтрации проектов проектов по категориям и тегам, вывод в Joomla модули и удобную структуру папок с изображениями, использование миниатюр видео, наложение водяных знаков, популярные эффекты CSS3 трансформации, плагин интеллектуального поиска и другие полезные функции.

DJ-MediaTools v2.9.4 Rus - галерея для joomla

DJ-MediaTools - современная и удобная галерея медиа контента с простой системой воспроизведения альбомов. Реализуйте на своем сайте с помощью drag & drop интерфейса отзывчивые видео и фотогалереи в считанные минуты. Извлекайте элементы из сторонних компонентов. Особенности компонента галереи.

Balbooa Gallery 2.0.6 Rus

Balbooa Gallery 2.0.6 - обновленная версия модной и простой в использовании галереи для сайтов на базе джумла. С помощью данного компонента можно без особого труда создавать любые привлекательные макеты, добавлять в элементы видео или фото, наложение анимации. В Gallery используется мощная и простая административная часть. Можно легко управлять и создавать категории, фотографии с помощью удобного Drag & Drop интерфейса. В панели управления можно уже найти 6 видов макетов сетки. Можно установить интервал между изображениями и количество столбцов

Компонент Balboa gallery PRO 2.0.4

Balboa gallery 2.0.4 - является простым в использовании компонентом галереи для сайтов Joomla. Расширение позволяет очень легко реализовать невероятные фото и видео галереи с фантастическими макетами сетки и наложении анимации.Balboa gallery современной и мощной панелью администратора. Реализовано удобное управление категориями и фотографиями с помощью Drag & Drop Interface. Расширение простое для начинающих и мощным для профессионалов. Фото на сайте отображаются в красивых и современных Grid - макетах.
Компонент поддерживает 6 видов макетов сетки: Metro, Grid, Masonry, Justified, quare grid layouts.

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 на вашем сервере.

От автора: очень часто на страницах сайта необходимо публиковать различный медиа контент, а именно изображения или фотографии. При этом очень удобно если изображения будут сгруппированы в одну галерею. Поэтому в данном уроке мы с Вами рассмотрим очень полезное расширение для CMS Joomla — JoomGallery, при помощи которого можно быстро организовать галерею изображений на сайте.

Установка компонента

Расширение которое мы рассмотрим в данном уроке называется JoomGalery – это очень мощное расширение, с огромным количеством различных настроек и множеством различных дополнений.

Первым делом давайте установим данное расширение, для этого переходим на официальный сайт Joomla в раздел расширений: http://extensions.joomla.org/ . Далее переходим в категорию Photos & Images, и в разделе Popular находим расширение JoomGalery. Кликнув по кнопке Download, нас перенаправляют на сайт разработчика данного расширения.

В разделе Component скачиваем компонент JoomGalery, в разделе Languages скачиваем требуемую локализацию данного расширения. В разделе Modules скачаем модуль вывода изображений галереи JoomImages 3.0, и в разделе Plugins скачиваем плагин отображения изображений в контенте Content-Plugin JoomPlu а также Editorbutton JoomBu (кнопка вставки изображений). Затем устанавливаем скачанные расширения.

Добавление категорий

Расширение JoomGalery поддерживает разбиение изображений на отдельные категории. Поэтому давайте перейдем в ассистент категорий и создадим две категории галерея 1 и галерея 2.

Доступ – доступ групп пользователей к данной категории;

Exclude from toplists – исключить категорию их верхних списков?;

Exclude from search – исключить категорию из поиска?

Владелец – выбор владельца;

Размещение мини-эскизов – порядок размещения миниатюр.

Основные настройки

Переходим в ассистент настроек и как Вы видите настроек очень много и они все сгруппированы по отдельным вкладкам.

Вкладка Основные настройки.Пути и каталоги .

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

Оригинальное изображение – изображение которое загрузил пользователь с неизменными размерами.

Изображение детальный вид – уменьшенная копия изображения, которая просматривается на странице детального вида изображения. Обычно ограничивается шириной 400px;

Миниатюра загруженного изображений – очень маленькая копия загруженного изображения.

Замещения . Здесь указываются параметры замены нестандартных символов в именах загружаемых файлов.

Обработка фото — Настройки связанные с обработкой фотографий при их загрузке в галерею. Параметры которые представляют интерес:

Изменение размера – нужно ли изменять размеры изображений при загрузке;

Максимальный размер фотографий – ограничения размера изображения для детального просмотра;

Качество – качество, с которым будут обрабатываться изображений (100 – без потери качества);

Ширина мини-эскизов, Высота мини-эскизов – размеры для миниатюр.

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

Сообщения — Настройки различных системных сообщений и сообщений о ошибках.

Дополнительные функции — Различные дополнительные функции.

Добавление изображений

Изображения в галерею можно загрузить пятью различными способами:

Drag’n"Drop Upload – загрузка большого количества изображений одновременно (более правильно добавление в очередь, так как загрузка в любом случае выполняется поочередно);

Мне больше всего нравится метод Drag’n"Drop Upload, поэтому его и использую. Добавим несколько изображений в категорию Галерея 1.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Далее в настройках уменьшим размеры для миниатюр, и еще загрузим дополнительно изображения в Галерея 2, таким образом миниатюры категории Галерея 2, будут меньшего размера, чем категории Галерея 1. Теперь когда изображения добавлены, можно просмотреть их — перейдя в ассистент фотографий.

Вывод галереи на экран

Для вывода галереи на экран – создадим новый пункт главного меню. При выборе типа пункта меню выбираем JoomGalery:

Я использую пункт меню Категории: стандартный вид, то есть страница отображения данных одной конкретной категории. В параметрах нужно выбрать, данные какой категории будут отображаться. Теперь давайте посмотрим, как выглядит галерея:

Настройки галереи (часть 2)

Теперь давайте посмотрим, какие еще настройки доступны нам.

Вкладка Права пользователей .

Загрузка пользователем через «Моя галерея» – JoomGalery поддерживает загрузку изображений через пользовательскую часть Вашего сайта и на данной под-вкладке настраиваются параметры работы данного механизма.

Скачать – настройки параметров скачивания изображений галереи.

Оценки – настройки возможности оставлять оценки элементам галереи.

Комментарии – параметры системы комментариев галереи JoomGalery.

Reports - настройки отправки жалоб от пользователей.

Вкладка Настройки пользовательского интерфейса .

Здесь собраны настройки по основному виду галереи. Опять же настроек достаточно много, но я бы остановился на под-вкладке Верхний и нижний разделы. Как Вы наверное заметили, при просмотре галереи, она состоит из трех блоков. Верхний блок (шапка), центральный блок, где выводятся изображения и нижний блок. Так вот под-вкладка Верхний и нижний разделы позволяет настроить отображение шапки галереи и ее футера. На данной под-вкладке я отключаю вывод всех элементов. При этом на странице просмотра нашей галереи мы увидим следующее:

На мой взгляд так смотрится симпатичнее.

Вкладка Обзор Галереи – содержит всего одну под-вкладку, и позволяет настроить вид главной страницы галереи. Это страница, которая соответствует типу меню Главная страница: стандартный вид. На данной странице выводятся все категории, добавленные в галерею изображений.

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

Show feed icon – отключаем показ иконки RSS новостей;

Расположение мини-эскизов / Деталей – по центру;

Show number of Downloads – показывать ли количество скачиваний – нет;

Показ числа комментариев – нет;

Показать владельца – нет;

Показ числа оценок – нет.

Теперь сохраняем изменения и посмотрим, что у нас получилось.

Вкладка Детальный Вид – на данной вкладке собраны настройки по странице детального просмотра изображения. На эту страницу мы можем попасть, если кликнем по миниатюре изображения галереи. Вот данная страница:

Вкладка Настройки ТОП-списков – настройки топ списков. Топ-списки – это строка ссылок в верхней и нижней части галереи:

TOP 12: Лучшие оценки — Самые новые — Последние комментарии — Самые популярные

Я их предлагаю так же отключить, для этого используем настройку Показ ТОП-списков и ее значение Не показывать .

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

Сохраняем изменения и посмотрим, что получилось:

Модули и плагины JoomGalery

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

Установленные плагины нужно активировать, причем плагины работают в паре, так как JoomPlu отображает изображения в контенте страницы, а JoomBU — отображает кнопку добавления изображения к материалу.

Вот собственно я создал тестовый материал “Тест галереи” в котором отображаются изображения из галереи JoomGalery.

На этом данный урок можно завершать. Всего Вам доброго и удачного кодирования!!!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

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

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

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

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

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

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

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

{gallery}myfoto{/gallery}

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

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

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

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

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

В итоге:

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

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

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

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

По умолчанию функцией создания фотогалереи Joomla не обладает, зато в каталоге расширений есть целый раздел, посвящённый только выполняющим её дополнениям - Photos & Images -> Galleries .

Самое популярное дополнение этой категории - Phoca Gallery . О нём и расскажу.

Phoca Gallery

Это расширение можно скачать как компонент, как модуль и как плагин. Отличия каждого типа дополнений друг от друга мы уже рассмотрели здесь, с Phoca Gallery ситуация точно такая же. Компонент позволит создавать галереи в основной части страниц, замещая контент, модуль - выводить изображения в специально отведённых местах, плагин - добавлять их внутрь статей с помощью специального кода.

Возможности Phoca Gallery, особенно учитывая бесплатное распространение, поистине обширны. Расширение позволяет создавать разделы фотографий с содержащими описания подкатегориями, выводить снимки в полноэкранном режиме различными способами, автоматически добавлять на них водяной знак из созданного заранее PNG-файла, привязывать картинки к координатам Google Maps, давать пользователям возможность комментировать, оценивать снимки, просматривать их статистику, и даже красиво выводить вместо картинок видеоролики с YouTube.

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

Найти Phoca Gallery можно либо в каталоге Joomla, либо на сайте разработчика, либо в админ-панели (JED). О том, как устанавливать дополнения, вы уже знаете.

После инсталляции меню Компоненты пополнится ещё одним пунктом, перейдя в который, вы сможете управлять галереей.

По умолчанию устанавливается английская версия галереи, но для неё доступен русификатор, скачайте его, Внимание: скачивать надо именно второй архив с одним файлом внутри: первый - устаревший, и русифицировать им не получится.

Распакуйте загруженный архив и скопируйте единственный извлечённый файл ru-RU.com_phocagallery.ini в две директории:

В папку вида http://адрес_сайта/language (у меня на локальном сервере это путь Z:\home\test1.ru\www\language ).
В каталог вида http://адрес_сайта/administrator/language (по умолчанию на localhost - Z:\home\test1.ru\www\administrator\language ).

Интерфейс Phoca Gallery сразу станет русскоязычным.

Перед тем, как компонентом пользоваться, крайне желательно его правильно настроить. Чтобы перейти к параметрам, откройте Компоненты -> Phoca Gallery и в правом верхнем углу появившейся страницы нажмите кнопку Настройки. Параметров очень много, для удобства они сгруппированы по вкладкам.

Категории View. Вкладка, открывающаяся по умолчанию. Здесь настраивается внешний вид списка категорий: по какому критерию они будут отсортированы, размер и порядок изображений категорий и т. д. Здесь же можно показать/скрыть подкатегории, пустые и недоступные категории, а также спрятать те из них, которые, по вашему мнению, некоторые группы посетителей видеть не должны.

Тут настраивается отображение фотографий внутри категорий, то есть отображение в тот момент, когда группа картинок уже открыта, но ни по одной из них пользователь ещё не щёлкнул. Сортировка, показ иконок и названий, возможность прямого скачивания картинок, показ списков и кнопок Категории и Назад, а также параметры статистики и многое другое. Впрочем, расписывать элементы особого смысла нет, так как практически для каждого доступна всплывающая подсказка: переместите указатель мыши на название пункта и через некоторое время всплывающая подсказка сообщит, для чего он нужен.

Детальный просмотр. То, каким образом изображение будет открываться на весь экран, настраивается именно здесь. Виды полноэкранного окна можно настроить. Здесь же можно задать параметры слайд-шоу (кстати, перелистывать фото в этом режиме Phoca Gallery позволяет не только кнопками на экране, но и клавишами).

Главные настройки. Несмотря на символизирующее название вкладки, далеко не все администраторы меняют её параметры. А зря, ведь здесь можно задать мета-данные, настроить RSS и геолокацию.

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

Эскизы. Содержит параметры создания миниатюр и добавления водяного знака, настройка размеров картинок и даже пара параметров безопасности.

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

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

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

Когда фотогалерея настроена, можно перейти к созданию категорий.

Щёлкните Категории в панели управления Phoca Gallery и нажмите кнопку Создать в левом верхнем углу отобразившейся страницы. Настройте категорию (как минимум введите её название), пройдитесь по вкладкам - параметры довольно разнообразны. Не буду заострять на них внимание, так как после знакомства с Joomla их назначение должно быть вполне понятным, а в крайнем случае помогут всплывающие подсказки.

Находясь в панели управления Phoca Gallery, нажмите Изображения, на следующей странице щёлкните Добавить несколько, внизу очередной страницы нажмите кнопку Мульти загрузка, если хотите закачать сразу несколько изображений, затем щёлкните Add files, выберите картинки и нажмите Start Upload.