Wordpress nextgen gallery вложенные изображения. Галерея для wordpress плагин nextgen gallery. Платные версии NextGen

Доброе время суток!
В сегодняшнем посте рассмотрим такой вопрос, как реализовать на сайте (блоге) галерею изображений с помощью плагина nextgen gallery ну и конечно разберемся со всеми тонкостями его настроек — это размещения галереи изображений в статьях, страницах, рубриках, установка водяного знака на изображения и множество других параметров.
Итак, ниже вы можете увидеть, как будет отображаться галерея изображений на вашем сайте.

Клик для увеличения

Настройка плагина nextgen gallery

Пункт установки и активации плагина пропускаю, думаю, вы не впервые устанавливаете плагины WP, а если призабыли, тогда вспоминаем .

После установки в админ. панели WP появится новый пункт «Галерея» с 7 пунктами, пронумерованы на скриншоте ниже.

1. пропускаем там статистические данные сколько создано галерей и альбомов.

2. «Добавить галерею/Изображения»

Клик для увеличения

• 1 – создать новую галерею – данный пункт будет установлен по умолчанию.
• 2 – указываем свое название галереи – к примеру: Корсеты2.
• 3 – переходим Add Files – откроется окно выбираем свои
  заранее.заготовленные изображения, картинки.
• 4 – открыть.
• 5 – список загруженных изображений.
• 6 – Start Upload – загрузка изображений в созданную галерею.

3. Управления галереями – в данном пункте будут отображаться созданные галереи и их информация (id, название, количество изображений, ).
Также в данном пункте устанавливается водяной знак той или иной галереи.

Клик для увеличения

• 1 – выбираем действие.
• 2 — отмечаем id.
• 3 – выбираем поставить водяной знак nextgen gallery.
• 4- применить.

4. Управления альбомами — после создания и выбора альбома ниже, вы можете перетащить галерею или другой альбом в ваш новый альбом.

5. Теги – правка, изменение или задать новые теги изображениям.

6. Настройка галереи – здесь задаются основные требования для вашей галереи изображений при настройки плагина nextgen gallery – это раздел можно считать одним из основных, итак, что здесь будет
7 пунктов

Клик для увеличения

п. 1 NextGEN Basic Thumbnails — основных миниатюр

Клик для увеличения

здесь основное внимание стоит обратить на п. 2 — здесь задаем размер изображений галереи, п. 3 сколько отображать на странице и вряд.
К примеру: зададим 3 изображения на страницу и 3 в ряд получим

Клик для увеличения

п. 2 NextGEN Basic Slideshow — слайд-шоу
здесь можно задать максимальный размер изображения (параметры 600 на 400 вполне нормальные) но можно и поэкспериментировать.
п. 3 NextGEN Basic imageBrowser — изображения в браузере.
Также можно оставить по умолчанию (Переключение страниц через AJAX)
п. 4 NextGEN Basic Single Pic — одиночное
здесь отмечаем п. 1, п. 2 и п. 3 отмечены на скриншоте

Клик для увеличения

обратите внимание на п. 2 показывать водяной знак (который подключается к галереи в Управлении галереи ).
п. 5 NextGEN Basic TagCloud — облако тегов.
максимальное количество тегов — по умолчанию стоит 45 — можно ничего не менять.
п. 6 NextGEN Basic Compact Album — компактный альбом.
п. 7 NextGEN Basic Extended Album — расширенный альбом.
Можно оставить по умолчанию с самого названия уже должно быть вам видно что они предназначены для альбомов, если будите создавать альбомы тогда можно их настроить указав сколько галерей отображать в альбоме и т.д.

7. Прочие настройки — здесь задаются основные настройки всему плагину в данном пункте 8 подпунктов.

Клик для увеличения

Здесь основное внимание хочу обратить на пункт 3 эффекты Lightbox и 4 водяной знак .
3 — эффекты Lightbox здесь два пункта.
Пункт 1. Выбор эффекта — их там 5, при установки того или иного эффекта изображения будут переключаться для просмотра по-разному. Пример, трех показан на скриншоте

Клик для увеличения

по тестируйте подберите свой эффект переключения изображений.

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

4. водяной знак — здесь настраиваем свой , можно надпись, или картинку.

Как разместить галерею изображений на странице

Для этого необходимо разместить шорткод на странице где вы собираетесь отобразить галерею
миниатюра галерей

Ко мне часто обращаются с просьбами помочь установить и настроить тот или иной функционал для сайтов на WordPress. Чаще всего я не отказываю, делаю, а затем – пишу подробную или не очень Инструкцию, по настройке и использованию того или иного плагина. Несколько дней назад ко мне обратился читатель с просьбой быстро поставить и настроить Галерею фотографий на его сайте. Исходя из пожеланий, я понял, что для решения этой задачи лучше всего подойдет плагин NextGen Gallery.

Я как-то уже выкладывал статью, посвященную настройке этого плагина. Тогда была прежняя версия. Чтобы не ошибиться – решил написать Инструкцию еще раз. Выслал – человек остался доволен.

Она не полностью описывает все без исключения настройки этого замечательного плагина. В ней я изложил главные моменты, которые позволяют быстро настроить основные функции плагина – вывести фотографии в виде Галереи, а не Слайдшоу, и для каждой фотографии добавить короткое описание.

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

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

Итак, начинаю.

Настройка и использования плагина NextGen Gallery

Я установил последнюю рабочую версию плагина,она не локализована на русский, но я постараюсь написать основное и показать в картинках – как создать Галерею и как ее вывести внутри записи.

Вы просили сделать так, что бы в один ряд у вас выводилось три картинки. Я сделал.

Немного о настройках:

У плагина есть своя вкладка настроек в Консоли Управления. Расположена слева в самом низу:

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

На странице Option вы увидите несколько Вкладок:

Перейдите на вкладку Image s :

Я подчеркнул красным важный элемент настройки вывода Картинки – ее размер в пикселах – ширина и высота.

Это размер всплывающего окна.

СОВЕТ: Делайте все картинки одного размера, например 800 на 600 пиксел, или другой корректный размер (корректный = соотношение 2 к 1 или 4 к 3).

Если ваши большие картинки будут разного размера, то в окне размером 800 на 600 они потеряют в качестве изображения, если картинки маленькие – будут «размазанными» и т.д.

Если вы планируете выводить большие картинки в другом размере, тогда замените выбранный размер 800 на 600 другим размером, например:

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

Перейдите на страницу Add / Gallery Image . Откройте вкладку – Add New Gallery

Сначала надо придумать Имя для Галереи изображений и записать в этом окне.

СОВЕТ: неиспользуйте русские буквы. Лучше пишите транслитерой, чтобы и вам понятно было о чем эта галерея.

Например: в галереи вы хотите добавить картинки природы, виды гор. Тогда имя рубрики напишите так: Priroda_Gory. Не используйте пробелы (не рекомендуется). Можно использовать цифры без пробелов.

ВАЖНО! Не добавляйте файлы изображений, в имени которых – русские названия!

Файлы только на английском.

СОВЕТ: не надо придумывать файлам имена в виде чисел. Желательно (для лучшей индексации поисковиками – файлу дать английский термин). Если на картинке – тушь для ресниц – так и назовите файл: mascara.jpg.

Формат файлов – стандартный: JPG, GIF, PNG.

Если файлы посвящены какой-то рубрике, общей теме – назовите также (примерно) и Галерею. Например: Mascara

Затем нажмите кнопку – Add gallery.

Галерея будет создана и вы увидите ее короткий ID в виде числа.

Видите? Вверху появился номер созданной Галереи – id=4. Можете запомнить номер, он вам пригодится.

Теперь вам надо добавить в эту Галереи файлы картинок.

Вы находитесь в первой вкладке страницы. Сначала выберите в открывающемся списке – Choose gallery. Найдите созданную Галерею и подставьте ее в этом окне.

Затем Нажмите кнопку – Browse… Откроется окно и на своем компьютере выберите подготовленные файлы картинок.

СОВЕТ: Готовьте картинки для Галереи заранее, с установленными размерами. Создайте Папку, назовите ее Галереи. Внутри – папки с Галереями по именам Галерей (так же как здесь). Вам будет легче искать и ориентироваться в дальнейшем.

Напомню, что в Записи миниатюры выводятся по 3 штуки в ряд. Значит, ваша Галерея должна иметь число фоток, краткое трем, например: 3, 6, 9 и т.д.

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

Я сейчас буду делать для примера чтобы показать:

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

Видите – список из трех файлов? Теперь нажмите кнопку – Upload images.

Подождите когда плагин добавит все картинки в Галерею.

Если все прошло удачно – появится вот такое сообщение — 3 picture(s) successfully added

Значит, Галерея создана и добавлена в вашу коллекцию.

Если что-то пойдет не так – будет ошибка и Галереи не будет. Попробуйте повторить.

Как добавить картинки в Запись

После того, как вы создали Галерею, вы можете ее добавить в вашу запись. Переходим в режим редактирования записи (или создания новой), заходим в редактор. В панели редактора у вас появилась новая кнопка – для добавления Галерей:

Поставьте курсор на новую строку.

Нажмите кнопку. Откроется всплывающее окно:

Нажмите на выбор:

Выберите Галерею с именем Mascara. Нажмите кнопку – Insert.

У вас в записи появится короткий код —

Зная ID Галереи (помните, я советовал запомнить), вы можете просто добавлять Галерею с помощью этого кода, только менять ID выбранной Галереи.

Теперь Сохраните запись и проверьте в режиме – Просмотреть изменения.

У вас теперь в этом черновике записи есть две Галереи, созданные мной:

Как создать короткое описание к картинке

При открытии большой картинки посетитель видит следующее:

При перемещении курсора по картинке – направо и налево – появляется посередине стрелка навигации посетителя.

Внизу – слова Image 4 of 6. То есть есть возможность навигации по всем Галереям, добавленным в одну запись. Но нет сопроводительного, короткого описания к каждой картинке. Давайте сделаем вместе.

Откройте страницу Manage Gallery (в консоли управления плагином). Увидите список ваших Галерей.

Здесь вы можете их удалять и редактировать.

Выберите Галерею и нажмите на ее имя – откроется страница редактирования Галереи:

Вас должен интересовать раздел Alt & Text / Description в описании одной картинки. Видите слово в первой картинке – snow? Это тег Alt картинки. А чуть ниже – пустое окно для Описания к картинке. Давайте напишем несколько слов, например:

Заснеженная усадьба графа Волконского под Москвой

Открываете запись. Нажимаете на просмотр картинки. Смотрите внизу под фото:

Я рассказал вам основные функции для работы с этим плагином.

Если вы внимательно посмотрите все настройки, а их – не менее 80-ти, вы поймете, что плагин имеет очень много интересного функционала.

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

Искать по нему информацию советую с помощью таких запросов:

WordPress плагин NextGen Gallery настройки

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

Будут еще вопросы – пишите.

Описание

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

Полное название в поиске: NextGEN Gallery

Установка:

Автоматическая:

1. Перейдите на админ-панель и выберите Плагины -> Добавить новый.
2. В поиске наберите»NextGEN Gallery».
3. Нажмите кнопку Установить.
4. Нажмите кнопку Активировать.

Ручная:

1. Перейдите по ссылке http://wordpress.org/plugins/nextgen-gallery/
2. Скачайте последнюю версию «NextGEN Gallery».
3. Разархивируйте файл в папку плагинов WordPress.
4. Активируйте плагин на сайте.

Работа с плагином

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

После установки плагина в админ-панели появляется пункт Gallery (рис. 1).

В плагине 8 разделов (рис.2).

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

Галерею будем создавать на новой странице, создание галереи в записи происходит аналогично. Итак выбираем пункт «Добавить новую страницу», вводим название страницы «Gallery Page» и выбираем на панели инструментов «Прикрепить галерею» (рис.3).

В открывшимся окне выбираем «Add Gallery/Images» для создания новой галереи и добавления изображений в неё. Далее пишем имя галереи, выбираем изображения для загрузки нажав «Add Files» и загружаем их нажав «Start Upload» (рис.4).

Выбираем саму галерею для отображения (рис.6).

Сортируем картинки для отображения на странице и завершаем создание галереи нажав кнопку «Save» (рис.7).

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

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

У вас будет на выбор несколько вариантов отображения галереи:

— NextGEN Basic Thumbnails, стандартная галерея.

— NextGEN Basic Slideshow, слайд-шоу.

— NextGEN Basic ImageBrowser, браузер галерея.

— NextGEN Basic TagCloud, галерея в виде облака тегов.

— NextGEN Basic Compact Album, компактная галерея.

— галерея в виде альбома.

Установить плагин на свой сайт вы сможете прямо из админ-панели wordpress. Перейдите на страницу: Плагины — Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

После установки и активации плагина, перейдите на страницу: Галерея — Настройки галереи . Здесь вы сможете настроить основные параметры для всех галерей.

— NextGEN Basic Thumbnails, здесь вы можете указать сколько изображений будет отображаться на одной странице. Можно указать сколько будет изображений в одном ряду. Можно выбрать шаблон галереи. Можно включить функцию переключение страниц через AJAX. Остальные настройки можно не менять. Наведите курсор мыши на обозначения параметра и вам покажут окно пояснениями.

— NextGEN Basic Slideshow, здесь можно задать максимальные размеры изображений, выбрать для изображений эффект (поэкспериментируйте с эффектами), можно задать интервал между изображениями, можете включить или отключить показ ссылок миниатюр.

— NextGEN Basic ImageBrowser, можно включить функцию переключение страниц через AJAX, можно выбрать шаблон для данной галереи.

— NextGEN Basic SinglePic, здесь можно задать параметры для показа одного изображения.

— NextGEN Basic TagCloud, укажите максимальное отображение тегов в галереи, выберите шаблон.

— NextGEN Basic Compact Album, здесь можете выбрать как будут отображаться галереи в альбоме, можно указать сколько изображений будет на одной странице. Можно включить хлебные крошки (breadcrumbs), всё остальное можно не менять.

— NextGEN Basic Extended Album, те же настройки что и у предыдущего альбома, только здесь более расширенный альбом.

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

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

— Эффекты Lightbox, здесь вы можете выбрать эффект для открытия изображений в лайтбокс окне. С эффектами можете поэкспериментировать.

— Водяной знак, можете добавить на изображения водяной знак. Можно выбрать в какой части изображения будет отображаться водяной знак. Вам нужно будет указать URL изображения водяного знака.

— Стили, здесь можно ничего не менять, оставьте всё как есть.

— Распределение привилегий, здесь вы можете указать кому открыт доступ к параметрам плагина Nextgen Gallery.

— Прочие настройки, здесь вы можете добавить ссылку RSS в галерею, можно очистить кэш изображений и т.д.

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

Сохраните сделанные изменения.

На странице Теги вы можете :

— Переименовать существующие теги.

— Удалить существующие теги.

На странице — Управление Альбомами, вы можете создавать альбомы и добавлять к ним галереи.

Для создания альбома, укажите имя альбома и нажмите на кнопку — Добавить . После создания альбома вы можете редактировать альбом, указать описание альбома, выбрать миниатюру для альбома, можно выбрать страницу для альбома.

Создание новой галереи

Чтобы создать новую галерею, перейдите на станицу: Добавить Галерею/Изображения.

1 — укажите имя новой галереи.

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

3 — нажмите на кнопку Начать загрузку, чтобы загрузить изображения в галерею.

После чего у вас создастся новая галерея. Здесь вы можете импортировать уже готовую папку с изображениями в вашу галерею. Выберите папку и нажмите на кнопку — import/gallery . Обратите внимание, если вы поставите галочку, чтобы оставлять изображения в исходной папке, то при удалении галереи все изображения удалятся из исходной папки.

На странице галереи вы сможете изменить основные параметры галереи — заголовок, описание, расположение галереи, ссылку на страницу, изображение обложки. Можно исключить любое изображение из галереи.

Добавление через запись или страницу

Откройте для редактирования или создайте новую страницу или запись. В визуальном редакторе wordpress у вас появится новая зелёная кнопка для добавления галереи. Нажмите на данную кнопку.

Далее, в открывшемся окне выберите вариант отображения галереи. На вкладке — Что вы хотите отображать , нажмите по полю Галереи и выберите галерею которая будет отображаться на данной странице. Нажмите на кнопку — Сохранить .

Опубликуйте или обновите страницу, перейдите на сайт. На сайте будет отображаться готовая фото галерея.

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

). Nextgen gallery является мощным и достаточно гибким инструментов для вывода разных форм изображений на сайте, будь то галерея, слайдер или отдельное изображение. Управление плагином интуитивно понятно и обычно не вызывает затруднений (особенно учитывая огромное количество мануалов и тематических материалов в сети).

Организация изображений с помощью nextgen gallery album

Мы будем создавать альбом nggalbum (в нашем случае альбом нужен для вывода изображений из галереи "шторы для ванной") в два этапа:

1. Подготовка изображений.
2. Подготовка страниц для отображения нашей галереи.

Подготовка изображений для организации альбома с помощью nextgen gallery album:

• создаем галерею (запоминаем ID нашей галереи - 3 );
• добавляем в галерею нужные изображения (не используйте кирилические названия и избегайте пробелов в названиях изображений ).

Подготовка страниц для отображения nextgen gallery album:

• Создадим новую страницу с названием "Шторы для ванной", в которой выведем свежесозданную галерею с помощью шорткода (не используйте кавычки и лишние пробелы ).

Перейдем к редактированию альбомов в nextgengellery.

1. Создадим новый альбом: для этого достаточно написать его название в соответствующем поле и нажать "Создать" (запоминаем ID нашего альбома - 5 ).

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

Теперь, когда наш альбом создан, создадим страницу для отображения категорий альбомов (в нашем случае это страница "Галерея"): для этого добавим на страницу следующий шорткод , где ID - это айди альбома, а template=compact - шаблон краткого (только изображение и название) отображения альбома (template=caption - изображение и краткое описание, template=extend - изображение, название и полное описание альбома).

В результате получим вот такую симпатичную галерею, состоящую из пяти альбомов:

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

Nextgen gallery отображает шорткод

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

• проверьте шорткод на наличие лишних пробелов;
• попробуйте убрать все лишние кавычки;
• убедитесь, что в шорткоде указан корректный ID (его можно проверить на странице настройки галереи);
• проверьте правильность синтаксиса шорткода (список шорткодов можно найти на официальном сайте nextgen gallery);
• убедитесь, что в названии изображений нет кириличных символов и пробелов;
• проверьте разрешения на папки внутри директории плагина.