feat: add scrolly-section shortcode (Scrollama-driven sticky image steps)

2026-06-19 22:47:23 +02:00
parent c514bfd4a9
commit a06f744ec1
1 changed files with 42 additions and 0 deletions
@@ -0,0 +1,42 @@
+<?php
+namespace Grav\Plugin\Shortcodes;
+
+use Thunder\Shortcode\Shortcode\ShortcodeInterface;
+
+class ScrollySectionShortcode extends Shortcode
+{
+    public function init(): void
+    {
+        $this->shortcode->getHandlers()->add('scrolly-section', function (ShortcodeInterface $sc) {
+            $plugin    = $this->grav['plugins']->getPlugin('story-blocks');
+            $page      = $plugin ? $plugin->getCurrentPage() : null;
+
+            $imageName = $sc->getParameter('image', '');
+            $alt       = htmlspecialchars($sc->getParameter('alt', ''), ENT_QUOTES);
+            $caption   = htmlspecialchars($sc->getParameter('caption', ''), ENT_QUOTES);
+            $content   = $sc->getContent(); /* raw inner content — Scrollama JS splits on <hr> */
+            $imageUrl  = ($page && $imageName) ? $page->url() . '/' . $imageName : $imageName;
+
+            $captionHtml = $caption
+                ? '<p class="scrolly__caption">' . $caption . '</p>'
+                : '';
+
+            return <<<HTML
+<div class="scrolly">
+  <div class="scrolly__media" aria-hidden="true">
+    <div class="scrolly__media-inner">
+      <img src="{$imageUrl}" alt="{$alt}" class="scrolly__img" loading="lazy">
+      <div class="scrolly__img-overlay"></div>
+    </div>
+    {$captionHtml}
+  </div>
+  <div class="scrolly__steps">
+    <div class="scrolly__steps-content">
+      {$content}
+    </div>
+  </div>
+</div>
+HTML;
+        });
+    }
+}