Просмотр изображений в Gutenberg в виде галереи (лайтбокс)

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

Посмотрите на этот пример, чтобы понять, что я имею ввиду:

Мы будем работать со стандартным блоком «Галерея», но это метод будет работать и в некоторых других ситуациях, например для галереи плагина Jetpack, CoBlocks и BlockGallery.

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

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

После того, как мы вставим наш блог «Галерея», то непосредственно в Gutenberg он будет выглядеть примерно так:

Блок галереи с заполненными изображениями в Gutenberg

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

Настройки блока галерея в Gutenberg

Шаг 1. Настраиваем блок

В настройках галереи ставим опцию «Ссылка на» в значение «Медиафайл».

ссылка на медиафайл в настройках галереи

Шаг 2. Ставим плагин «Lightbox with PhotoSwipe»

Для того, чтобы поставить плагин, переходим в меню в Плагины > Добавить новый и в поиске вводим «Lightbox with PhotoSwipe». Либо можете скачать его и загрузить как архив.

плагин lightbox with photoswipe
Бесплатный плагин Lightbox with PhotoSwipe

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

Это всё 🙂 Наслаждайтесь вашей новой галереей!

Видеоурок

А если вам вдруг что-то было непонятно или вы хотите чуть более подробный обзор плагина, то пожалуйста, для вас это видео:

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!