' . '' . ''; } } if ( ! function_exists( 'bw_cg_magnifier' ) ) { /** * The magnifying-glass icon shown bottom-right on a lightbox card (FontAwesome * magnifying-glass), signalling the image opens in a lightbox on click. * * @return string HTML. */ function bw_cg_magnifier() { // FontAwesome search-plus (magnifying-glass-plus) — matches the live // brentwood.ca photo "enlarge" icon. return ''; } } if ( ! function_exists( 'bw_cg_dash' ) ) { /** * The dash divider drawn on its own line below the label — the live site's * dash.svg (a flat 64×4 bar), as a CSS-coloured rule so it can be recoloured. * * @param string $color Dash colour. * @return string HTML. */ function bw_cg_dash( $color ) { return ''; } } if ( ! function_exists( 'bw_cg_arrow' ) ) { /** * A prev / next arrow for the slider (FontAwesome angle-right; the prev arrow is * flipped in CSS). Same icon family as the inline chevron. * * @return string HTML. */ function bw_cg_arrow() { return ''; } } // ── sanitize attributes ────────────────────────────────────────────────────── $image_id = (int) ( $attributes['imageId'] ?? 0 ); $image_url = esc_url_raw( $attributes['imageUrl'] ?? '' ); $alt = sanitize_text_field( $attributes['imageAlt'] ?? '' ); $number = sanitize_text_field( $attributes['number'] ?? '' ); $label = sanitize_text_field( $attributes['label'] ?? '' ); $caption = sanitize_text_field( $attributes['caption'] ?? '' ); // Nothing to show. $has_slides = ! empty( $attributes['images'] ) && is_array( $attributes['images'] ); if ( '' === $image_url && 0 === $image_id && '' === $label && '' === $number && '' === $caption && ! $has_slides ) { return; } $layout = in_array( $attributes['layout'] ?? 'label', array( 'label', 'caption', 'slider', 'lightbox' ), true ) ? $attributes['layout'] : 'label'; // Overlay style: "default" = small corner number badge + big label; "stat" = // the number shown large on the first line with the label as the caption below // (mirrors the live brentwood.ca "72% / Accepted into their first choice // university" figures). The previous default style is unchanged. $overlay_style = in_array( $attributes['overlayStyle'] ?? 'default', array( 'default', 'stat' ), true ) ? ( $attributes['overlayStyle'] ?? 'default' ) : 'default'; $is_stat = ( 'stat' === $overlay_style ); $show_label = ! isset( $attributes['showLabel'] ) || false !== $attributes['showLabel']; $show_chevron = ! empty( $attributes['showChevron'] ); $show_dash = ! empty( $attributes['showDash'] ); $valign = in_array( $attributes['valign'] ?? 'bottom', array( 'top', 'center', 'bottom' ), true ) ? $attributes['valign'] : 'bottom'; $halign = in_array( $attributes['halign'] ?? 'left', array( 'left', 'center', 'right' ), true ) ? $attributes['halign'] : 'left'; $cap_align = in_array( $attributes['captionAlign'] ?? 'left', array( 'left', 'center', 'right' ), true ) ? $attributes['captionAlign'] : 'left'; $cap_width = ( 'full' === ( $attributes['captionWidth'] ?? 'fit' ) ) ? 'full' : 'fit'; // Defined here (not next to $caption_html below) because the slider loop needs it // too — each slide carries its own caption text and this is the shared on/off. $show_caption = ! isset( $attributes['showCaption'] ) || false !== $attributes['showCaption']; $behavior = ( 'modal' === ( $attributes['behavior'] ?? 'link' ) ) ? 'modal' : 'link'; $label_color = bw_cg_color( $attributes['labelColor'] ?? '', '#ffffff' ); $chevron_color = bw_cg_color( $attributes['chevronColor'] ?? '', '#ffffff' ); $dash_color = bw_cg_color( $attributes['dashColor'] ?? '', '#ffffff' ); $radius = max( 0, min( 60, (int) ( $attributes['radius'] ?? 4 ) ) ); $ratio = trim( (string) ( $attributes['ratio'] ?? '1 / 1' ) ); // "fill" — the card follows its section / column height IN FLOW, so it can // also define the row height (a shorter neighbour stretches to it). // "fill-col" — the card also matches the column height but stays OUT OF FLOW, so // it can NEVER define the row height: a taller neighbour sizes the // row and the image conforms/crops to it, without stretching it. $is_fill = ( 'fill' === $ratio ); $is_fill_col = ( 'fill-col' === $ratio ); if ( ! $is_fill && ! $is_fill_col && ! preg_match( '/^[0-9]+(\.[0-9]+)?\s*\/\s*[0-9]+(\.[0-9]+)?$/', $ratio ) ) { $ratio = '1 / 1'; } // "Show whole image" — object-fit:contain, so the image keeps its own ratio // inside the frame and the leftover area shows the frame background colour. $fit = ( 'contain' === ( $attributes['imageFit'] ?? 'cover' ) ) ? 'contain' : 'cover'; $frame_bg = bw_cg_color( $attributes['frameBg'] ?? '', '' ); $frame_bg_hover = bw_cg_color( $attributes['frameBgHover'] ?? '', '' ); // Focal point → object-position. $fp = is_array( $attributes['focalPoint'] ?? null ) ? $attributes['focalPoint'] : array(); $fx = isset( $fp['x'] ) ? max( 0, min( 1, (float) $fp['x'] ) ) : 0.5; $fy = isset( $fp['y'] ) ? max( 0, min( 1, (float) $fp['y'] ) ) : 0.5; $obj = round( $fx * 100, 2 ) . '% ' . round( $fy * 100, 2 ) . '%'; // Image source (a single large source, scaled by object-fit:cover). $src = ''; if ( $image_id > 0 ) { $src = wp_get_attachment_image_url( $image_id, 'large' ); if ( ! $src ) { $src = wp_get_attachment_image_url( $image_id, 'full' ); } if ( '' === $alt ) { $alt = (string) get_post_meta( $image_id, '_wp_attachment_image_alt', true ); } } if ( ! $src ) { $src = $image_url; } // Full-size source for the lightbox layout (falls back to the display source). $full_src = ''; if ( $image_id > 0 ) { $full_src = wp_get_attachment_image_url( $image_id, 'full' ); } if ( ! $full_src ) { $full_src = ( '' !== $src ) ? $src : $image_url; } $img_html = ( '' !== $src ) ? ' ' . esc_attr( $alt ) . '

' : ''; // ── slider slides (only used by the "slider" layout) ───────────────────────── $slides_html = ''; $dots_html = ''; $arrows_html = ''; $slide_count = 0; // Set when at least one slide has caption text — the box then gets a class that // lifts the dots / timer clear of the caption bar (they share the bottom edge). $has_slide_caption = false; if ( 'slider' === $layout ) { $slides = $has_slides ? $attributes['images'] : array(); // Fall back to the single image if the gallery is empty. if ( empty( $slides ) && '' !== $src ) { $slides = array( array( 'id' => $image_id, 'url' => $src, 'alt' => $alt ) ); } $slide_items = ''; $dot_items = ''; foreach ( $slides as $slide ) { $s_id = (int) ( $slide['id'] ?? 0 ); $s_url = esc_url_raw( $slide['url'] ?? '' ); $s_alt = sanitize_text_field( $slide['alt'] ?? '' ); $s_src = ''; if ( $s_id > 0 ) { $s_src = wp_get_attachment_image_url( $s_id, 'large' ); if ( ! $s_src ) { $s_src = wp_get_attachment_image_url( $s_id, 'full' ); } if ( '' === $s_alt ) { $s_alt = (string) get_post_meta( $s_id, '_wp_attachment_image_alt', true ); } } if ( ! $s_src ) { $s_src = $s_url; } if ( '' === $s_src ) { continue; } // Per-slide caption. It lives INSIDE the slide, so it fades in and out with // its own image (the .is-active opacity transition) — view.js needs no // changes. Width / alignment come from the shared caption attributes, so // every slide's bar looks the same; only the text differs. $s_cap = sanitize_text_field( $slide['caption'] ?? '' ); $s_cap_html = ( $show_caption && '' !== $s_cap ) ? '' . esc_html( $s_cap ) . '' : ''; if ( '' !== $s_cap_html ) { $has_slide_caption = true; } $active = ( 0 === $slide_count ) ? ' is-active' : ''; $slide_items .= '

' . '

0 ? ' loading="lazy"' : '' ) . ' decoding="async" />' . $s_cap_html . '

'; $dot_items .= ''; $slide_count++; } if ( $slide_count > 0 ) { $slides_html = '

' . $slide_items . '

'; if ( $slide_count > 1 ) { // Dots show by default; hide them via the "Show dots" toggle. $show_dots = ! isset( $attributes['sliderDots'] ) || false !== $attributes['sliderDots']; if ( $show_dots ) { $dots_html = '

' . $dot_items . '

'; } if ( ! empty( $attributes['sliderArrows'] ) ) { $arrows_html = '' . ''; } } } } $show_number = ! isset( $attributes['showNumber'] ) || false !== $attributes['showNumber']; // The corner badge is only drawn in the default style — in "stat" mode the same // number is rendered large inside the overlay instead (below), so it isn't // duplicated in the corner. $num_html = ( ! $is_stat && $show_number && '' !== $number ) ? '' . esc_html( $number ) . '' : ''; // The label sits on its own line with the chevron inline right after it; the dash // is a divider on the line below (mirrors brentwood.ca's photo blocks). The label // text can be hidden (e.g. a slider that only wants the number badge) while the // chevron stays under its own toggle. $label_span = ( $show_label && '' !== $label ) ? '' . esc_html( $label ) . '' : ''; $chevron_span = $show_chevron ? bw_cg_chevron( $chevron_color ) : ''; $line_html = ( '' !== $label_span || '' !== $chevron_span ) ? '' . $label_span . $chevron_span . '' : ''; $dash_html = $show_dash ? bw_cg_dash( $dash_color ) : ''; // Stat number — the big first line (uses the same colour as the label so both // lines match). Only in "stat" mode, and only when a number is set + shown. $statnum_html = ( $is_stat && $show_number && '' !== $number ) ? '' . esc_html( $number ) . '' : ''; $overlay_html = ''; if ( '' !== $statnum_html || '' !== $line_html || '' !== $dash_html ) { $overlay_class = 'bw-cg-card__overlay bw-cg-card__overlay--' . $valign . ' bw-cg-card__overlay--h-' . $halign; if ( $is_stat ) { $overlay_class .= ' bw-cg-card__overlay--stat'; } $overlay_html = '' . $statnum_html . $line_html . $dash_html . ''; } // Caption — a bottom overlay ON the image (black box, white text), mirroring // brentwood.ca's photo "description" line and the video-text layout-6 caption. // Lives inside the image box. The background can fit the text (--fit) or span the // full width (--full), and the text aligns left / center / right. // ($show_caption is defined near the top — the slider loop above needs it too.) $caption_html = ( $show_caption && '' !== $caption ) ? '' . esc_html( $caption ) . '' : ''; // "Image + Caption" drops the number badge and the label / chevron / dash overlay. // "Slider" swaps the single image for a slideshow of slides + dots (+ optional // arrows), keeping the same number / label overlay. "Image + Label" keeps them all. if ( 'caption' === $layout ) { $box_inner = $img_html . $caption_html; } elseif ( 'slider' === $layout ) { $box_inner = $slides_html . $num_html . $overlay_html . $arrows_html . $dots_html; } elseif ( 'lightbox' === $layout ) { // The image + a magnifying-glass hint; clicking opens the lightbox. An // optional caption bar can sit along the bottom (same as the caption layout). $box_inner = $img_html . $caption_html . bw_cg_magnifier(); } else { $box_inner = $img_html . $num_html . $overlay_html . $caption_html; } $aria = ( '' !== $label ) ? $label : ( '' !== $caption ? $caption : ( '' !== $alt ? $alt : 'View image' ) ); $dialog_html = ''; if ( 'lightbox' === $layout ) { // A button that opens the full-size image in the shared lightbox (view.js). $has_caption_cls = ( '' !== $caption_html ) ? ' bw-cg-card__box--has-caption' : ''; $box = ''; } elseif ( 'slider' === $layout ) { // The slider keeps its on-click behaviour, but the link / modal trigger can't // WRAP the dots / arrows (they're '; $close = ''; $dialog_html = ''; } else { $link_url = esc_url_raw( $attributes['linkUrl'] ?? '' ); if ( '' !== $link_url ) { $target = ! empty( $attributes['linkNewTab'] ) ? ' target="_blank" rel="noopener noreferrer"' : ''; $hit_html = ''; } } // Autoplay progress line at the bottom of the image (mirrors brentwood.ca's // slideshow-timer: a white/20% bar that scales 0 → 1 over the interval). Only // when autoplay is on and there is more than one slide. $timer_html = ( '1' === $autoplay && $slide_count > 1 ) ? '' : ''; $box = '

' . $slides_html . $hit_html . $num_html . $overlay_html . $arrows_html . $dots_html . $timer_html . '

'; } elseif ( 'modal' === $behavior ) { $uid = wp_unique_id( 'bw-cg-modal-' ); $modal_size = in_array( $attributes['modalSize'] ?? 'medium', array( 'small', 'medium', 'large', 'full' ), true ) ? $attributes['modalSize'] : 'medium'; $box = ''; $close = ''; $dialog_html = ''; } else { $link_url = esc_url_raw( $attributes['linkUrl'] ?? '' ); if ( '' !== $link_url ) { $target = ! empty( $attributes['linkNewTab'] ) ? ' target="_blank" rel="noopener noreferrer"' : ''; $box = '' . $box_inner . ''; } else { $box = '

' . $box_inner . '

'; } } $style = '--bw-cg-radius:' . $radius . 'px;'; // No fixed ratio for the two fill modes. fill-col still needs a shape on mobile // (stacked, no sibling) — the CSS falls back to 1 / 1 via var(--bw-cg-ratio,…). if ( ! $is_fill && ! $is_fill_col ) { $style .= '--bw-cg-ratio:' . esc_attr( $ratio ) . ';'; // Responsive per-breakpoint overrides. Only valid " / " ratios are // emitted; the CSS media queries pick these up (tablet ≤1024, mobile ≤767) // and fall back mobile → tablet → desktop when a breakpoint is left unset. $ratio_re = '/^[0-9]+(\.[0-9]+)?\s*\/\s*[0-9]+(\.[0-9]+)?$/'; $ratio_t = trim( (string) ( $attributes['ratioTablet'] ?? '' ) ); $ratio_m = trim( (string) ( $attributes['ratioMobile'] ?? '' ) ); // Skip the ratio var when that breakpoint uses "fill column" (it overrides it). if ( empty( $attributes['fillColTablet'] ) && '' !== $ratio_t && preg_match( $ratio_re, $ratio_t ) ) { $style .= '--bw-cg-ratio-tablet:' . esc_attr( $ratio_t ) . ';'; } if ( empty( $attributes['fillColMobile'] ) && '' !== $ratio_m && preg_match( $ratio_re, $ratio_m ) ) { $style .= '--bw-cg-ratio-mobile:' . esc_attr( $ratio_m ) . ';'; } } if ( 'contain' === $fit ) { $style .= '--bw-cg-fit:contain;'; // Default to white (not the block's dark #1a1a1a) so "Show whole image" never // looks like dark mode unless the author picks a colour. $style .= '--bw-cg-frame-bg:' . ( '' !== $frame_bg ? $frame_bg : '#ffffff' ) . ';'; if ( '' !== $frame_bg_hover ) { $style .= '--bw-cg-frame-bg-hover:' . $frame_bg_hover . ';'; } } $wrap_class = 'bw-cg-card'; if ( $is_fill ) { $wrap_class .= ' bw-cg-card--fill'; } elseif ( $is_fill_col ) { $wrap_class .= ' bw-cg-card--fill-col'; } // Opt-in per-breakpoint "fill column" (independent of the desktop shape). if ( ! empty( $attributes['fillColTablet'] ) ) { $wrap_class .= ' bw-cg-card--fill-col-t'; } if ( ! empty( $attributes['fillColMobile'] ) ) { $wrap_class .= ' bw-cg-card--fill-col-m'; } printf( '

%s%s

', get_block_wrapper_attributes( array( 'class' => $wrap_class, 'style' => $style ) ), // phpcs:ignore WordPress.Security.EscapeOutput $box, // phpcs:ignore WordPress.Security.EscapeOutput -- assembled from escaped parts (caption now lives inside the box) $dialog_html // phpcs:ignore WordPress.Security.EscapeOutput -- close is literal, content is InnerBlocks (self-escaped) );