gallery-by-supsystic

Gallery by Supsystic – как создать красивую галерею на странице или записи в WordPress

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

Содержание:

Плагин Gallery by Supsystic

Для начала нам нужно установить плагин Gallery by Supsystic, как устанавливать плагины в WordPress подробно описано здесь.

image1-minGallery by Supsystic – плагин, позволяющий создавать красивые галереи, отображаемые в лайтбоксе практически с любыми носителями информации или контентом. Таким как изображения, видео и слайд-шоу  (видео и слайд-шоу  доступно при условии что у Вас есть купленная лицензия, но и без нее данный плагин весьма хорош собой).

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

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

После того как плагин был установлен давайте создадим первую галерею, для этого перейдите в панель администрирования WordPress, далее наведите курсор мышки на «Gallery by Supsystic»(1) Изобр.№1 и в выпадающем меню нажмите на пункт «Новая галерея»(2) Изобр.№1.

image2-minИзображение №1

В появившемся окне плагин предлагает создать новую галерею, стоит отметить что плагин предоставляет варианты выбора темы оформления галереи, за частую самым ходовым вариантом является варант «Standart Gallery», но вы можете выбрать и другую тему (Все темы у которых в названии присутствует слово «PRO», требуют платной лицензии на плагин).

Что ж начнем, введите название новой галереи(1, Изобр.№2) (лично я всегда называю галереи в соответствии имени записи или страницы, так проще работать с галереями в будущем). В данном примере я назвал галерею именем «Наша первая галерея», после того как название галереи введено нажмите на кнопку «Сохранить» (2, Изобр.№2)

image3-minИзображение №2

Теперь нам открылась страница с настройками галереи, кратко о каждой вкладке с настройками,

Краткое описание вкладок галереи

Вкладка «Главная» :

image4-minИзображение №3

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

Вкладка «Подпись»:

image5-minИзображение №4

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

Вкладка «Категории»:

image6-minИзображение №5

Доступ к работе с данной вкладкой появляется только после приобретения платной лицензии.

Вкладка «Записи»:

image7-minИзображение №6

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

Работа с галереей

И так вернемся к работе с нашей галереей, давайте добавим в неё изображения. Для этого вернемся на первую вкладку галереи (1, Изобр.№7), и нажмем кнопку «Добавить картинки» (2, Изобр.№7).

image8-minИзображение №7

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

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

Добавим изображения нажав кнопку «Импорт через WordPress библиотеку» (1, Изобр.№8).

image9-minИзображение №8

Теперь мы попадаем на стандартную страницу медиатеки WordPress, здесь мы можем или выбрать уже имеющиеся в медиатеке изображения (Изобр.№9), или же добавить новые (для этого перейдите на вкладку «Загрузить файлы» (1, Изобр.№10), далее или перетяните изображения на страницу загрузки, или и воспользуйтесь стандартным диалоговым окном загрузки файлов – для этого нажмите «Выберите файлы» (2, Изобр.№10).).

image10-minИзображение №9

 

image11-minИзображение №10

В данном примере добавим изображения, которые уже имеются в медиатеке WordPress, для этого отметьте галочками изображения, которые вы планируете добавить в галерею. Для этого наведите курсор мышки на правый верхний угол эскиза изображения и отметьте его (2, Изобр.№11). После того как изображения были отмечены (3, Изобр.№11), нажмите «Choose image» («Выбрать изображения»)(4, Изобр.№11).

image12-minИзображение №11

Как только изображения будут выбраны окошко медиатеки WordPress закроется, Вы будете перенаправлены на главную вкладку галереи, где на светлом фоне будут мелькать сообщения о добавлении новых изображений (Изобр.№12).

image13-minИзображение №12

После того как все изображения были добавлены, у вас есть возможность поставить подпись к каждой фотографии галереи (1, Изобр№13). После внесения желаемых изменений нажмите кнопку «Ок» (2, Изобр№13).

image14-minИзображение №13

После нажатия кнопки «Ок», экран на время покроет белая пелена, в центре которой будет отображаться надпись «Loading…»(Изобр№14), это индикатор применения всех Вами внесенных изменений в галерею. Дождитесь окончания его индикации.


12Изображение №14

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

Способы добавления галереи на страницу

Способ 1 – откройте галерею и нажмите свойства(1, Изобр№15),


2342-minИзображение №15

Здесь скопируйте шорт код галереи (Изобр.№16), и вставьте его в окне текстового редактора страницы или записи, в том месте где хотите что бы отображалась Ваша галерея.

image17-minИзображение №16

Способ 2 – Откройте текстовый редактор страницы (или записи), в данном примере я вставлю галерею в запись.

Наведите курсор на ярлык Gallery by Supsystic (Изобр.№17), и щелкните по нему левой клавишей мышки.

image18-minИзображение №17

Появится всплывающее окно, в котором Вам просто нужно выбрать Вашу галерею. Для этого нажмите на индикатор выпадающего меню (1, Изобр.18),  и в списке имеющихся галерей выберите новую (как правило всегда новая галерея будет в самом верху списка(2, Изобр.18)).

image19-minИзображение №18

Результат вставки шорт кода галереи для WordPress

После вставки шорт кода галереи у Вас в новости отобразится вот такого плана шорт код (Изобр.19). Опубликуйте (или обновите страницу).

image20-minИзображение №19

Отображение галереи

Вот и все друзья, мы подходим к финалу всех наших действий с галерей от Gallery by Supsystic, вот собственно и финал всех наших действий, любуйтесь).

image21-minИзображение №20

 

Отображение галереи при щелчке по изображению

image22-minИзображение №21

Отображение на мобильном телефоне iPhone 6+

26-09-2016-17-54-04-minИзображение №22

ПС. Друзья в данной статье мной было рассмотрено основные азы создания и работы с галереями в плагине Gallery by Supsystic. Естественно что Вы можете манипулировать с настройками галереи как Вашей душе угодно, для получения требуемого Вами результата. На этом все, до скорых встреч на сайте медиадома.ком.

 

 

Gallery by Supsystic – как создать красивую галерею на странице или записи в WordPress
Рейтинг данной записи