Галерея с Popup окном для Gutenberg в WordPress
Но, как, оказалось, удобно только загружать изображения в галерею. А остальные моменты работы с изображениями вызывают неудобства при обработке.
Да и сама галерея для фронт офиса выводит просто список картинок, даже без всплывающего окна popup, которое давно уже является must have на всех сайтах. Речь, конечно же идет про коробочную версию wordpress, со стандартной темой twentytwentytwo на данный момент.
Итак, задача стоит прикрутить к этой галерее popup окно с минимальными обработками списка готовых изображений для фронт офиса. Для ее решения понадобится плагин, который будет обычным js скриптом обрабатывать список картинок и загружать их в библиотеку Fancybox. Fancybox возьмем последнюю версию на сегодняшний момент v4
Итак, вот код готового плагина, который будет просто загружать js скрипты для обработки DOM модели:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<?php /** * The plugin bootstrap file * * This file is read by WordPress to generate the plugin information in the plugin * admin area. This file also includes all of the dependencies used by the plugin, * registers the activation and deactivation functions, and defines a function * that starts the plugin. * * * @wordpress-plugin * Plugin Name: popup-gallery * Plugin URI: https://webproggi.com/ * Description: Set popup option for gallery * Version: 1.0.0 * Author: Webproggi * Author URI: https://webproggi.com/ * License: GPL-2.0+ * License URI: http://www.gnu.org/licenses/gpl-2.0.txt */ // If this file is called directly, abort. if ( ! defined( 'WPINC' ) ) { die; } /** * Class PopupGallery */ class PopupGallery { public static $instance; /** * PopupGallery constructor. */ private function __construct() { add_action('init', [$this, 'run']); } public function enqueueMain() { $jsName = 'js/fancybox.umd.js'; $jsPath = sprintf('%s%s', plugin_dir_path(__FILE__), $jsName); wp_enqueue_script('popup-gallery', sprintf('%s%s', plugin_dir_url(__FILE__), $jsName), array( 'jquery' ), filemtime($jsPath)); $jsName = 'js/popup-gallery.js'; $jsPath = sprintf('%s%s', plugin_dir_path(__FILE__), $jsName); wp_enqueue_script('popup-gallery-src', sprintf('%s%s', plugin_dir_url(__FILE__), $jsName), [], filemtime($jsPath)); $cssName = 'css/fancybox.css'; $cssPath = sprintf('%s%s', plugin_dir_path(__FILE__), $cssName); wp_enqueue_style('popup-gallery', sprintf('%s%s', plugin_dir_url(__FILE__), $cssName), [], filemtime($cssPath)); $cssName = 'css/style.css'; $cssPath = sprintf('%s%s', plugin_dir_path(__FILE__), $cssName); wp_enqueue_style('popup-gallery-style', sprintf('%s%s', plugin_dir_url(__FILE__), $cssName), [], filemtime($cssPath)); } /** * @return PopupGallery */ public static function getInstance() { if (!self::$instance instanceof self) { self::$instance = new self(); } return self::$instance; } public function run() { $this->enqueueMain(); } } PopupGallery::getInstance(); |
Сам же js скрипт выглядит следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
jQuery(document).ready(function() { jQuery('figure.wp-block-gallery figure.wp-block-image').each(function( index ) { let innerImg = jQuery(this).find('img'); let a = innerImg.attr( "srcset" ); let imgPathArrayDrty = a.split(", "); let imgPathArray = imgPathArrayDrty[0].split(" "); // take last array with large image let wrapperA = "<a data-fancybox='gallery' class='" + jQuery(this).attr("class") + "' href='" + imgPathArray[0] + "'>" + innerImg[0].outerHTML + "</a>"; jQuery(this).replaceWith(wrapperA); }); Fancybox.bind('[data-fancybox="gallery"]', { }); }); |
Из него видно, что берется элемент figure и заменяется на нужную нам структуру элемента ссылки a.
Раньше была структура:
а стала:
В результате, имеем такое popup окно при клике на элемент галереи.
Такой вариант обработки страницы с помощью js скрипта использовать можно, но редко. Так как блочная структура при редактировании записи, может меняться от тех или иных параметров галереи. И на каждое такое изменение потребуется доработка обработчика кода.
Ну и конечно же будет намного проще, если просто скачать хорошо проверенный временем плагин Classic Editor
Скачать плагин можно здесь: popup-gallery