85 lines
3.6 KiB
PHP
85 lines
3.6 KiB
PHP
|
<?php
|
||
|
|
|
||
|
|
declare(strict_types=1);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Artikelkörper einer News-Detailseite. Props:
|
||
|
|
* $image array (optional) — Aufmacher {base, widths, alt}, above the fold
|
||
|
|
* $blocks array — data/news.json → artikel[], Blöcke mit `typ`:
|
||
|
|
* text {absaetze: string[]} Fließtext
|
||
|
|
* zwischentitel {text} h2 (h1 steht im detail-head)
|
||
|
|
* bild {base, widths, alt, caption?}
|
||
|
|
* zitat {text, quelle?}
|
||
|
|
*
|
||
|
|
* Ein unbekannter `typ` wird stillschweigend übersprungen; gemeldet wird er von
|
||
|
|
* bin/preflight.php, damit ein Tippfehler vor dem Deploy auffällt und nicht erst
|
||
|
|
* durch einen fehlenden Absatz auf der Seite.
|
||
|
|
*
|
||
|
|
* Fließtext läuft durch inline_links_html(): interne Deeplinks [Label](slug)
|
||
|
|
* werden zu <a>, alles andere escaped. Kein rohes HTML in der JSON.
|
||
|
|
*
|
||
|
|
* Bilder sind wie bei den Veranstaltungen ohne JS normale Links auf die größte
|
||
|
|
* Variante; mit JS fängt assets/js/lightbox.js den Klick ab. Das Overlay kommt
|
||
|
|
* nur dazu, wenn der Artikel überhaupt Bilder hat.
|
||
|
|
*/
|
||
|
|
$image = $image ?? null;
|
||
|
|
$blocks = $blocks ?? [];
|
||
|
|
|
||
|
|
$bilder = array_values(array_filter(
|
||
|
|
$blocks,
|
||
|
|
static fn (array $b): bool => ($b['typ'] ?? '') === 'bild' && !empty($b['base']) && !empty($b['widths'])
|
||
|
|
));
|
||
|
|
$bildAnzahl = count($bilder);
|
||
|
|
$bildIndex = 0;
|
||
|
|
?>
|
||
|
|
<article class="section news-article"<?= $bildAnzahl > 0 ? ' data-lightbox-gallery' : '' ?>>
|
||
|
|
<div class="container">
|
||
|
|
<?php if (!empty($image['base'])): ?>
|
||
|
|
<figure class="news-article__lead">
|
||
|
|
<?php component('img', [
|
||
|
|
'image' => $image,
|
||
|
|
'sizes' => '(max-width: 768px) 100vw, 72ch',
|
||
|
|
'class' => 'news-article__lead-img',
|
||
|
|
'eager' => true,
|
||
|
|
]); ?>
|
||
|
|
</figure>
|
||
|
|
<?php endif; ?>
|
||
|
|
<div class="news-article__body prose">
|
||
|
|
<?php foreach ($blocks as $block): ?>
|
||
|
|
<?php $typ = $block['typ'] ?? ''; ?>
|
||
|
|
<?php if ($typ === 'text'): ?>
|
||
|
|
<?php foreach ($block['absaetze'] ?? [] as $absatz): ?>
|
||
|
|
<p><?= inline_links_html((string) $absatz) ?></p>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
<?php elseif ($typ === 'zwischentitel' && !empty($block['text'])): ?>
|
||
|
|
<h2 class="news-article__heading"><?= e($block['text']) ?></h2>
|
||
|
|
<?php elseif ($typ === 'bild' && !empty($block['base']) && !empty($block['widths'])): ?>
|
||
|
|
<figure class="news-article__figure">
|
||
|
|
<a class="news-article__figure-link" href="<?= e(asset($block['base'] . '-' . max($block['widths']) . '.jpg')) ?>" data-lightbox="<?= $bildIndex++ ?>">
|
||
|
|
<?php component('img', [
|
||
|
|
'image' => $block,
|
||
|
|
'sizes' => '(max-width: 768px) 100vw, 72ch',
|
||
|
|
'class' => 'news-article__img',
|
||
|
|
]); ?>
|
||
|
|
<span class="visually-hidden">(größer ansehen)</span>
|
||
|
|
</a>
|
||
|
|
<?php if (!empty($block['caption'])): ?>
|
||
|
|
<figcaption class="news-article__caption"><?= e($block['caption']) ?></figcaption>
|
||
|
|
<?php endif; ?>
|
||
|
|
</figure>
|
||
|
|
<?php elseif ($typ === 'zitat' && !empty($block['text'])): ?>
|
||
|
|
<figure class="news-article__quote">
|
||
|
|
<blockquote><p><?= e($block['text']) ?></p></blockquote>
|
||
|
|
<?php if (!empty($block['quelle'])): ?>
|
||
|
|
<figcaption class="news-article__quote-source"><?= e($block['quelle']) ?></figcaption>
|
||
|
|
<?php endif; ?>
|
||
|
|
</figure>
|
||
|
|
<?php endif; ?>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<?php if ($bildAnzahl > 0): ?>
|
||
|
|
<?php component('lightbox-overlay', ['label' => 'Bild aus dem Artikel', 'count' => $bildAnzahl]); ?>
|
||
|
|
<?php endif; ?>
|
||
|
|
</article>
|