Здравствуйте друзья, сегодня мы рассмотрим каким образом можно добавить красивую галерею изображений на сайт под управлением WordPress совершенно бесплатно, получив при этом отличный инструмент для создания адаптивных галерей.
Плагин Gallery by Supsystic
Для начала нам нужно установить плагин Gallery by Supsystic, как устанавливать плагины в WordPress подробно описано здесь.
Gallery by Supsystic – плагин, позволяющий создавать красивые галереи, отображаемые в лайтбоксе практически с любыми носителями информации или контентом. Таким как изображения, видео и слайд-шоу (видео и слайд-шоу доступно при условии что у Вас есть купленная лицензия, но и без нее данный плагин весьма хорош собой).
Созданные галереи очень просты в использовании — вы можете настроить отображение галерей в несколько кликов. Галереи изображений выглядят адаптивно и красиво как на ПК, мобильных, так и на планшетных ПК. Lightbox плагин предлагает различные эффекты и элементы навигации, опции для слайд-шоу, записи и страницы контент менеджмента, и многое другое.
Создание новой галереи
После того как плагин был установлен давайте создадим первую галерею, для этого перейдите в панель администрирования WordPress, далее наведите курсор мышки на «Gallery by Supsystic»(1) Изобр.№1 и в выпадающем меню нажмите на пункт «Новая галерея»(2) Изобр.№1.
Изображение №1
В появившемся окне плагин предлагает создать новую галерею, стоит отметить что плагин предоставляет варианты выбора темы оформления галереи, за частую самым ходовым вариантом является варант «Standart Gallery», но вы можете выбрать и другую тему (Все темы у которых в названии присутствует слово «PRO», требуют платной лицензии на плагин).
Что ж начнем, введите название новой галереи(1, Изобр.№2) (лично я всегда называю галереи в соответствии имени записи или страницы, так проще работать с галереями в будущем). В данном примере я назвал галерею именем «Наша первая галерея», после того как название галереи введено нажмите на кнопку «Сохранить» (2, Изобр.№2)
Изображение №2
Теперь нам открылась страница с настройками галереи, кратко о каждой вкладке с настройками,
Краткое описание вкладок галереи
Вкладка «Главная» :
Изображение №3
На данной вкладке производятся основные манипуляции с видом отображения галереи.
Вкладка «Подпись»:
Изображение №4
На данной вкладке производятся настройки отображения подписей к изображениям, а точнее атрибутов тайтл и альт.
Вкладка «Категории»:
Изображение №5
Доступ к работе с данной вкладкой появляется только после приобретения платной лицензии.
Вкладка «Записи»:
Изображение №6
На данной вкладке производится настройка отображения галереи записей на сайте, к сожалению в бесплатной версии работа с вкладкой не возможна.
Работа с галереей
И так вернемся к работе с нашей галереей, давайте добавим в неё изображения. Для этого вернемся на первую вкладку галереи (1, Изобр.№7), и нажмем кнопку «Добавить картинки» (2, Изобр.№7).
Изображение №7
Перед нами появится всплывающее окно, в котором будет предложен выбор источника с изображениями. Здесь нам будет полностью доступен источник в виде медиатеки WordPress, для того что бы полноценно работать с другими источниками изображений необходимо приобрести лицензию.
Добавление изображений в галерею
Добавим изображения нажав кнопку «Импорт через WordPress библиотеку» (1, Изобр.№8).
Изображение №8
Теперь мы попадаем на стандартную страницу медиатеки WordPress, здесь мы можем или выбрать уже имеющиеся в медиатеке изображения (Изобр.№9), или же добавить новые (для этого перейдите на вкладку «Загрузить файлы» (1, Изобр.№10), далее или перетяните изображения на страницу загрузки, или и воспользуйтесь стандартным диалоговым окном загрузки файлов – для этого нажмите «Выберите файлы» (2, Изобр.№10).).
Изображение №9
Изображение №10
В данном примере добавим изображения, которые уже имеются в медиатеке WordPress, для этого отметьте галочками изображения, которые вы планируете добавить в галерею. Для этого наведите курсор мышки на правый верхний угол эскиза изображения и отметьте его (2, Изобр.№11). После того как изображения были отмечены (3, Изобр.№11), нажмите «**Choose image» («Выбрать изображения»)(4, Изобр.№11).**
Изображение №11
Как только изображения будут выбраны окошко медиатеки WordPress закроется, Вы будете перенаправлены на главную вкладку галереи, где на светлом фоне будут мелькать сообщения о добавлении новых изображений (Изобр.№12).
Изображение №12
После того как все изображения были добавлены, у вас есть возможность поставить подпись к каждой фотографии галереи (1, Изобр№13). После внесения желаемых изменений нажмите кнопку «Ок» (2, Изобр№13).
Изображение №13
После нажатия кнопки «Ок», экран на время покроет белая пелена, в центре которой будет отображаться надпись «**Loading…»(Изобр№14)**, это индикатор применения всех Вами внесенных изменений в галерею. Дождитесь окончания его индикации.
Почти все готово, осталось только добавить нашу галерею на страницу или запись, для добавления галереи у нас есть два способа.
Способы добавления галереи на страницу
Способ 1 – откройте галерею и нажмите свойства(1, Изобр№15),
Здесь скопируйте шорт код галереи (Изобр.№16), и вставьте его в окне текстового редактора страницы или записи, в том месте где хотите что бы отображалась Ваша галерея.
Изображение №16
Способ 2 – Откройте текстовый редактор страницы (или записи), в данном примере я вставлю галерею в запись.
Наведите курсор на ярлык Gallery by Supsystic (Изобр.№17), и щелкните по нему левой клавишей мышки.
Изображение №17
Появится всплывающее окно, в котором Вам просто нужно выбрать Вашу галерею. Для этого нажмите на индикатор выпадающего меню (1, Изобр.18), и в списке имеющихся галерей выберите новую (как правило всегда новая галерея будет в самом верху списка(2, Изобр.18)).
Изображение №18
Результат вставки шорт кода галереи для WordPress
После вставки шорт кода галереи у Вас в новости отобразится вот такого плана шорт код (Изобр.19). Опубликуйте (или обновите страницу).
Изображение №19
Отображение галереи
Вот и все друзья, мы подходим к финалу всех наших действий с галерей от Gallery by Supsystic, вот собственно и финал всех наших действий, любуйтесь).
Изображение №20
Отображение галереи при щелчке по изображению
Изображение №21
Отображение на мобильном телефоне iPhone 6+
Изображение №22
ПС. Друзья в данной статье мной было рассмотрено основные азы создания и работы с галереями в плагине Gallery by Supsystic. Естественно что Вы можете манипулировать с настройками галереи как Вашей душе угодно, для получения требуемого Вами результата. На этом все, до скорых встреч на сайте медиадома.ком.
Источник записи: https://mediadoma.com