Просмотр изображений в 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. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

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

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

Оставить комментарий

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.