LAB // KIRBY PLUGIN Active

Media Sections Block & Tag

A multi-layout media system for Kirby CMS supporting single hero visuals, 2x1 and 2x2 grids, stacked gallery reels, and embedded/HTML5 video players with compressed one-line rendering.

GitHub Repository

Overview

creativeguy78/media-sections solves a common problem in editorial web design: how to lay out dynamic image grids, stacked galleries, and video breakouts without having to hand-code HTML or construct complex nested block trees.

Layout Arrangements

  1. single-image: Full-bleed or hero image with 1600px responsive downsampling.
  2. image-grid-2x1: Two-column side-by-side comparison or duo image layout.
  3. image-grid-2x2: Four-image balanced grid.
  4. image-gallery: Primary focal image on top with an interactive horizontal thumbnail strip beneath.
  5. video: Embedded YouTube/Vimeo iframe or HTML5 native <video> tag with responsive aspect-ratio preservation.

Preventing Markdown Paragraph Wrapping

A common pitfall with Kirbytext tags rendering multi-line HTML snippets is that Kirby’s Markdown parser wraps loose block tags in <p>...</p>, causing invalid HTML structures.

To solve this, media-sections strips all linebreaks and compresses the snippet output into a single string before returning it to the parser:

$html = snippet('media-section', [...], true);
return preg_replace('/\s+/', ' ', str_replace(["\r", "\n"], ' ', $html));

Self-Contained Architecture

The plugin bundles its own snippets/media-section.php, snippets/blocks/media.php, and blueprints/blocks/media.yml, while fully respecting local overrides in the host site’s site/snippets/ folder.