53 lines
1.9 KiB
PHP
53 lines
1.9 KiB
PHP
|
<?php
|
||
|
|
|
||
|
|
declare(strict_types=1);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Bildergalerie einer Veranstaltung: Raster aus Vorschaubildern, Klick öffnet
|
||
|
|
* das Bild groß. Props:
|
||
|
|
* $bilder array [{base, widths, alt, source?}, …] (script-verwaltet,
|
||
|
|
* bin/veranstaltung-bilder.php)
|
||
|
|
* $title string (optional, Default 'Bilder')
|
||
|
|
*
|
||
|
|
* Progressive enhancement: jedes Vorschaubild ist ein normaler Link auf die
|
||
|
|
* größte Variante der Datei — ohne JS führt der Klick einfach zum Bild. Mit JS
|
||
|
|
* fängt assets/js/lightbox.js den Klick ab und zeigt es im Overlay
|
||
|
|
* (Vor/Zurück, Pfeiltasten, Esc). Das Overlay-Markup steht am Ende und ist
|
||
|
|
* `hidden`, bis JS es übernimmt.
|
||
|
|
*
|
||
|
|
* Die Overlay-Grafik erbt ihr srcset vom angeklickten Vorschaubild (siehe
|
||
|
|
* lightbox.js) — deshalb braucht der Link hier keine zweite Bildliste.
|
||
|
|
*/
|
||
|
|
$bilder = $bilder ?? [];
|
||
|
|
$title = $title ?? 'Bilder';
|
||
|
|
|
||
|
|
if ($bilder === []) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$anzahl = count($bilder);
|
||
|
|
?>
|
||
|
|
<section class="section veranstaltung-galerie" id="bilder" data-lightbox-gallery>
|
||
|
|
<div class="container">
|
||
|
|
<h2><?= e($title) ?></h2>
|
||
|
|
<ul class="veranstaltung-galerie__grid">
|
||
|
|
<?php foreach ($bilder as $i => $bild): ?>
|
||
|
|
<?php
|
||
|
|
$gross = asset($bild['base'] . '-' . max($bild['widths']) . '.jpg');
|
||
|
|
?>
|
||
|
|
<li class="veranstaltung-galerie__item">
|
||
|
|
<a class="veranstaltung-galerie__link" href="<?= e($gross) ?>" data-lightbox="<?= $i ?>">
|
||
|
|
<?php component('img', [
|
||
|
|
'image' => $bild,
|
||
|
|
'sizes' => '(max-width: 600px) 45vw, (max-width: 992px) 30vw, 22vw',
|
||
|
|
'class' => 'veranstaltung-galerie__img',
|
||
|
|
]); ?>
|
||
|
|
<span class="visually-hidden">(größer ansehen)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<?php component('lightbox-overlay', ['label' => $title, 'count' => $anzahl]); ?>
|
||
|
|
</section>
|