Галерея с Popup окном для Gutenberg в WordPress

Галерея с Popup окном для Gutenberg в WordPress
Рассматривая подробно список блоков в Gutenberg наткнулся на блок галереи, которую можно легко создать в редакторе. Блок галерея представляет из себя список изображений, которые загружаются стандартными средствами wordpress и с которыми можно делать потом что угодно в галерее.
 

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

Галерея с Popup окном для Gutenberg в WordPress

Да и сама галерея для фронт офиса выводит просто список картинок, даже без всплывающего окна popup, которое давно уже является must have на всех сайтах. Речь, конечно же идет про коробочную версию wordpress, со стандартной темой twentytwentytwo на данный момент.

 

Галерея с Popup окном для Gutenberg в WordPress

Итак, задача стоит прикрутить к этой галерее popup окно с минимальными обработками списка готовых изображений для фронт офиса. Для ее решения понадобится плагин, который будет обычным js скриптом обрабатывать список картинок и загружать их в библиотеку Fancybox. Fancybox возьмем последнюю версию на сегодняшний момент v4

Итак, вот код готового плагина, который будет просто загружать js скрипты для обработки DOM модели:

Сам же js скрипт выглядит следующим образом:

Из него видно, что берется элемент figure и заменяется на нужную нам структуру элемента ссылки a.

Раньше была структура:

Галерея с Popup окном для Gutenberg в WordPress

а стала:

Галерея с Popup окном для Gutenberg в WordPress

В результате, имеем такое popup окно при клике на элемент галереи.

Галерея с Popup окном для Gutenberg в WordPress

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

Ну и конечно же будет намного проще, если просто скачать хорошо проверенный временем плагин Classic Editor

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 0 / 5. Количество оценок: 0

Оценок пока нет. Поставьте оценку первым.

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

Ваш адрес email не будет опубликован.