m038
31f3c6fb2f
- gpx-manager: raise th color #666→#999 (6.9:1 contrast on dark bg) - gpx-manager: raise .gpx-delete text #c0392b→#e07070 (6.2:1 contrast) - gpx-manager: add visible label text 'Choose GPX file' to file input - snap-gallery: add tabindex=0 to .pgallery__frame for keyboard scrollability Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WPJztrVGbwic2xTG7G9fjM
55 lines
2.1 KiB
PHP
55 lines
2.1 KiB
PHP
<?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 . htmlspecialchars($filename, ENT_QUOTES);
|
|
$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" tabindex="0">
|
|
{$slidesHtml}
|
|
<div class="pgallery__dots" aria-hidden="true">{$dotsHtml}</div>
|
|
</div>
|
|
</div>
|
|
HTML;
|
|
});
|
|
}
|
|
}
|