Dashboard
PHP:
8.4.22
OS:
Linux
User:
provencez
/
/
home
/
provencez
/
www
/
wp-content
/
plugins
/
flexa-block
/
build
/
blocks
/
images-gallery
📤 Upload
📝 New File
📁 New Folder
Close
Editing: render.php
<?php /** * Images Gallery block — server-side render. * * CSS is generated at save time by Images_Gallery_CSS and printed inline on the * front end. This file outputs the items > item > figure > img structure with an * optional overlay and caption per image, plus the click/lightbox wiring read by * view.js. Output is escaped and caption text passes through wp_kses with a small * inline whitelist. * * @package Flexa\Block * * @var array $attributes Block attributes. * @var string $content Save content (unused — dynamic block). * @var WP_Block $block Block instance. */ if ( ! defined( 'ABSPATH' ) ) { exit; } // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- $attributes provided by WP block API. use Flexa\Block\HTML_Helpers; $block_id = $attributes['blockId'] ?? ''; $images = $attributes['images'] ?? []; // Nothing to render without a block id or at least one image. if ( '' === $block_id || ! is_array( $images ) || empty( $images ) ) { return; } $anchor = $attributes['anchor'] ?? ''; $layout = in_array( $attributes['galleryLayout'] ?? 'grid', [ 'grid', 'masonry', 'tiled' ], true ) ? $attributes['galleryLayout'] : 'grid'; $image_size = $attributes['imageSize'] ?? 'large'; $lazy_load = ! empty( $attributes['lazyLoad'] ); $hover_effect = (string) ( $attributes['hoverEffect'] ?? 'none' ); $overlay = $attributes['overlay'] ?? []; $caption = $attributes['caption'] ?? []; $click_action = in_array( $attributes['clickAction'] ?? 'lightbox', [ 'none', 'lightbox', 'media' ], true ) ? $attributes['clickAction'] : 'lightbox'; $lightbox = $attributes['lightbox'] ?? []; $caption_show = ! empty( $caption['show'] ); $caption_display = 'below' === ( $caption['display'] ?? 'overlay' ) ? 'below' : 'overlay'; $caption_pos = in_array( $caption['position'] ?? 'bottom', [ 'top', 'center', 'bottom' ], true ) ? $caption['position'] : 'bottom'; $caption_hover = 'hover' === ( $caption['visibility'] ?? 'always' ); $has_overlay = 'none' !== ( $overlay['type'] ?? 'none' ); $inline_allowed = [ 'strong' => [], 'em' => [], 'b' => [], 'i' => [], 'br' => [], 'span' => [], 'a' => [ 'href' => true, 'target' => true, 'rel' => true ], ]; // Wrapper classes. $classes = [ 'flexa-images-gallery', 'flexa-images-gallery-' . sanitize_html_class( $block_id ), 'flexa-images-gallery--' . sanitize_html_class( $layout ) ]; if ( 'none' !== $hover_effect ) { $classes[] = 'flexa-images-gallery--hover-' . sanitize_html_class( $hover_effect ); } if ( $caption_show && 'overlay' === $caption_display ) { $classes[] = 'flexa-images-gallery--cap-' . sanitize_html_class( $caption_pos ); if ( $caption_hover ) { $classes[] = 'flexa-images-gallery--cap-hover'; } } $classes = HTML_Helpers::build_wrapper_classes( $classes, $attributes ); $wrapper_args = [ 'class' => implode( ' ', $classes ) ]; if ( $anchor ) { $wrapper_args['id'] = sanitize_html_class( $anchor ); } $wrapper_attributes = get_block_wrapper_attributes( $wrapper_args ); $data_attrs = HTML_Helpers::build_data_attrs( $attributes ); // Click / lightbox wiring on the wrapper. $click_attrs = ''; if ( 'lightbox' === $click_action || 'media' === $click_action ) { $click_attrs = ' data-click="' . esc_attr( $click_action ) . '"'; if ( 'lightbox' === $click_action ) { $lb_bg = $lightbox['background']['light'] ?? ''; $lb_bg_dark = $lightbox['background']['dark'] ?? ''; if ( '' !== $lb_bg ) { $click_attrs .= ' data-lightbox-bg="' . esc_attr( $lb_bg ) . '"'; } if ( '' !== $lb_bg_dark ) { $click_attrs .= ' data-lightbox-bg-dark="' . esc_attr( $lb_bg_dark ) . '"'; } if ( false === ( $lightbox['showCaption'] ?? true ) ) { $click_attrs .= ' data-lightbox-no-caption="1"'; } } } // Build each item. $items_html = ''; foreach ( $images as $image ) { if ( ! is_array( $image ) ) { continue; } $img_url = (string) ( $image['url'] ?? '' ); $img_id = $image['id'] ?? null; $alt = (string) ( $image['alt'] ?? '' ); // Caption comes live from the attachment's own "Caption" field in the media // library; the stored value is only a fallback for id-less external images. $cap_txt = ''; if ( $img_id ) { $cap_txt = (string) wp_get_attachment_caption( (int) $img_id ); } if ( '' === $cap_txt ) { $cap_txt = (string) ( $image['caption'] ?? '' ); } $img_width = $image['width'] ?? null; $img_height = $image['height'] ?? null; $full_url = $img_url; if ( $img_id ) { $sized = wp_get_attachment_image_src( (int) $img_id, $image_size ); if ( $sized ) { $img_url = $sized[0]; $img_width = $sized[1]; $img_height = $sized[2]; } $full = wp_get_attachment_image_src( (int) $img_id, 'full' ); if ( $full ) { $full_url = $full[0]; } } if ( '' === $img_url ) { continue; } // <img>. $img_attr = ' src="' . esc_url( $img_url ) . '" alt="' . esc_attr( $alt ) . '" class="flexa-images-gallery__image"'; if ( $img_width ) { $img_attr .= ' width="' . absint( $img_width ) . '"'; } if ( $img_height ) { $img_attr .= ' height="' . absint( $img_height ) . '"'; } if ( $lazy_load ) { $img_attr .= ' loading="lazy" decoding="async"'; } $img_html = '<img' . $img_attr . ' />'; $overlay_html = $has_overlay ? '<span class="flexa-images-gallery__overlay" aria-hidden="true"></span>' : ''; $overlay_caption = ''; $below_caption = ''; if ( $caption_show && '' !== trim( $cap_txt ) ) { if ( 'overlay' === $caption_display ) { $overlay_caption = '<figcaption class="flexa-images-gallery__caption">' . wp_kses( $cap_txt, $inline_allowed ) . '</figcaption>'; } else { $below_caption = '<figcaption class="flexa-images-gallery__caption flexa-images-gallery__caption--below">' . wp_kses( $cap_txt, $inline_allowed ) . '</figcaption>'; } } // Per-item click data (full-size URL + caption) feeds the lightbox / media jump. $item_data = ''; if ( 'lightbox' === $click_action || 'media' === $click_action ) { $item_data = ' data-full="' . esc_url( $full_url ) . '"'; if ( 'lightbox' === $click_action && '' !== trim( $cap_txt ) ) { $item_data .= ' data-caption="' . esc_attr( wp_strip_all_tags( $cap_txt ) ) . '"'; } } $items_html .= '<div class="flexa-images-gallery__item"' . $item_data . '>' . '<figure class="flexa-images-gallery__media">' . $img_html . $overlay_html . $overlay_caption . '</figure>' . $below_caption . '</div>'; } if ( '' === $items_html ) { return; } printf( '<div %1$s%2$s%3$s><div class="flexa-images-gallery__items">%4$s</div></div>', $wrapper_attributes, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- built via get_block_wrapper_attributes. $data_attrs, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- keys sanitized, values escaped in helper. $click_attrs, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- values escaped with esc_attr/esc_url above. $items_html // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- src/alt escaped, caption wp_kses'd, data escaped above. );
Save
Cancel