feat(story-blocks): add full-bleed and image-caption shortcodes

Two new shortcodes for immersive storytelling: - [full-bleed image="" caption="" credit=""] — viewport-wide image, max 80vh - [image-caption image="" caption="" credit="" width="column|full|bleed"] — photo at configurable width with caption Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WPJztrVGbwic2xTG7G9fjM
2026-06-20 23:25:16 +02:00
parent ee107eebdf
commit 512f1ce9b2
3 changed files with 130 additions and 0 deletions
@@ -0,0 +1,34 @@
+<?php
+namespace Grav\Plugin\Shortcodes;
+
+use Thunder\Shortcode\Shortcode\ShortcodeInterface;
+
+class FullBleedShortcode extends Shortcode
+{
+    public function init(): void
+    {
+        $this->shortcode->getHandlers()->add('full-bleed', function (ShortcodeInterface $sc) {
+            $plugin    = $this->grav['plugins']->getPlugin('story-blocks');
+            $page      = $plugin ? $plugin->getCurrentPage() : null;
+
+            $imageName = htmlspecialchars($sc->getParameter('image', ''), ENT_QUOTES);
+            $alt       = htmlspecialchars($sc->getParameter('alt', ''), ENT_QUOTES);
+            $caption   = htmlspecialchars($sc->getParameter('caption', ''), ENT_QUOTES);
+            $credit    = htmlspecialchars($sc->getParameter('credit', ''), ENT_QUOTES);
+            $imageUrl  = ($page && $imageName) ? $page->url() . '/' . $imageName : $imageName;
+
+            $captionHtml = '';
+            if ($caption || $credit) {
+                $creditHtml  = $credit ? '<span class="full-bleed__credit"> · ' . $credit . '</span>' : '';
+                $captionHtml = '<figcaption class="full-bleed__caption">' . $caption . $creditHtml . '</figcaption>';
+            }
+
+            return <<<HTML
+<figure class="full-bleed">
+  <img src="{$imageUrl}" alt="{$alt}" class="full-bleed__img" loading="lazy">
+  {$captionHtml}
+</figure>
+HTML;
+        });
+    }
+}