TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

1 405

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

Плагин Gallery by Supsystic

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

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

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

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

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №1

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

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №2

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

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

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №3

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

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №4

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

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №5

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

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №6

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

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

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №7

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

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

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №8

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №9

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №10

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №11

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №12

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №13

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


Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №14

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

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

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


Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №15

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №16

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

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №17

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №18

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

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №19

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

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №20

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №21

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

Gallery by Supsystic - как создать красивую галерею на странице или записи в WordPressИзображение №22

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

Источник записи: https://mediadoma.com

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