feat: add pull-quote and snap-gallery shortcodes

2026-06-19 22:50:27 +02:00
parent 3b5dc18ec6
commit fcdb3de387
2 changed files with 97 additions and 0 deletions
@@ -0,0 +1,43 @@
+<?php
+namespace Grav\Plugin\Shortcodes;
+
+use Thunder\Shortcode\Shortcode\ShortcodeInterface;
+
+class PullQuoteShortcode extends Shortcode
+{
+    public function init(): void
+    {
+        $this->shortcode->getHandlers()->add('pull-quote', 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);
+            $content   = trim($sc->getContent());
+            $imageUrl  = ($page && $imageName) ? $page->url() . '/' . $imageName : '';
+
+            $bgHtml = '';
+            if ($imageUrl) {
+                $bgHtml = <<<HTML
+  <div class="pull-quote__bg" aria-hidden="true">
+    <img src="{$imageUrl}" alt="{$alt}" class="pull-quote__bg-img" loading="lazy">
+    <div class="pull-quote__bg-tint"></div>
+  </div>
+HTML;
+            }
+
+            $innerClass = $imageUrl ? 'pull-quote__inner' : 'pull-quote__inner pull-quote__inner--no-image';
+
+            return <<<HTML
+<blockquote class="pull-quote" aria-label="Pull quote">
+{$bgHtml}
+  <div class="{$innerClass}">
+    <span class="pull-quote__mark" aria-hidden="true">"</span>
+    <p class="pull-quote__text">{$content}</p>
+    <span class="pull-quote__mark pull-quote__mark--close" aria-hidden="true">"</span>
+  </div>
+</blockquote>
+HTML;
+        });
+    }
+}
@@ -0,0 +1,54 @@
+<?php
+namespace Grav\Plugin\Shortcodes;
+
+use Thunder\Shortcode\Shortcode\ShortcodeInterface;
+
+class SnapGalleryShortcode extends Shortcode
+{
+    public function init(): void
+    {
+        $this->shortcode->getHandlers()->add('snap-gallery', function (ShortcodeInterface $sc) {
+            $plugin   = $this->grav['plugins']->getPlugin('story-blocks');
+            $page     = $plugin ? $plugin->getCurrentPage() : null;
+            $baseUrl  = $page ? $page->url() . '/' : '';
+
+            $images   = array_map('trim', explode(',', $sc->getParameter('images', '')));
+            $captions = array_map('trim', explode(',', $sc->getParameter('captions', '')));
+            $alts     = array_map('trim', explode(',', $sc->getParameter('alts', '')));
+
+            $slidesHtml = '';
+            $dotsHtml   = '';
+
+            foreach ($images as $i => $filename) {
+                if (!$filename) continue;
+                $url     = $baseUrl . $filename;
+                $caption = htmlspecialchars($captions[$i] ?? '', ENT_QUOTES);
+                $alt     = htmlspecialchars($alts[$i] ?? '', ENT_QUOTES);
+                $eager   = $i === 0 ? 'eager' : 'lazy';
+                $active  = $i === 0 ? ' is-active' : '';
+
+                $captionTag = $caption
+                    ? '<figcaption class="pgallery__caption">' . $caption . '</figcaption>'
+                    : '';
+
+                $slidesHtml .= <<<HTML
+      <figure class="pgallery__slide" data-index="{$i}">
+        <img src="{$url}" alt="" class="pgallery__bg" aria-hidden="true" loading="{$eager}">
+        <img src="{$url}" alt="{$alt}" class="pgallery__fg" loading="{$eager}">
+        {$captionTag}
+      </figure>
+HTML;
+                $dotsHtml .= '<span class="pgallery__dot' . $active . '" data-dot="' . $i . '" aria-hidden="true"></span>';
+            }
+
+            return <<<HTML
+<div class="pgallery">
+  <div class="pgallery__frame" role="region" aria-label="Photo gallery">
+    {$slidesHtml}
+    <div class="pgallery__dots" aria-hidden="true">{$dotsHtml}</div>
+  </div>
+</div>
+HTML;
+        });
+    }
+}