fs
f294f1a9de
Zweite Slide als echte Sponsoren-Anzeige (Hero-Foto + Wortmarken-Logo, self-hosted). Komponente erweitert um cta_secondary (Outline-Button) und logo_light (weiße Logo-Platte für dunkle Firmenlogos). CTAs verlinken extern (target=_blank, rel=sponsored) auf Lösungen + Über uns. Mit zwei Slides aktiviert der Slider Auto-Rotation und Indikatoren. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv
93 lines
5.2 KiB
PHP
93 lines
5.2 KiB
PHP
<?php
|
|
|
|
declare(strict_types=1);
|
|
|
|
/**
|
|
* Werbe-/Sponsoren-Banner-Slider. Daten: data/banners.json (Single Source of Truth).
|
|
* Layout je Slide: 2/3 Titel + Text + CTA, 1/3 Firmenlogo.
|
|
* Pro Slide optional: "variant" (CSS-Modifier, z. B. "house" für Eigenwerbung),
|
|
* "tag" (Badge-Text, Default "Anzeige"), "background" (Bild), "cta.internal"
|
|
* (interner Link ohne target=_blank/rel=sponsored, für eigene Seiten/Anker),
|
|
* "cta_secondary" (zweiter Button als Outline), "logo_light" (helle Logo-Platte
|
|
* für dunkle Firmenlogos).
|
|
* Auto-Rotation + Fortschritts-Indikatoren übernimmt assets/js/banner.js
|
|
* (pausiert bei Hover/Fokus, respektiert prefers-reduced-motion).
|
|
* Ohne JS: nur der erste Banner ist sichtbar (Graceful Degradation).
|
|
*/
|
|
$bannerData = json_load('banners');
|
|
$banners = $bannerData['banners'] ?? [];
|
|
if ($banners === []) {
|
|
return;
|
|
}
|
|
$heading = $bannerData['heading'] ?? null;
|
|
$subline = $bannerData['subline'] ?? null;
|
|
$total = count($banners);
|
|
?>
|
|
<section class="section ad-banner" id="anzeigen" aria-roledescription="Karussell" aria-label="Anzeigen unserer Sponsoren und Partner" data-banner>
|
|
<div class="container">
|
|
<?php if ($heading !== null): ?>
|
|
<h2><?= e($heading) ?></h2>
|
|
<?php else: ?>
|
|
<h2 class="visually-hidden">Anzeigen unserer Sponsoren & Partner</h2>
|
|
<?php endif; ?>
|
|
<?php if ($subline !== null): ?>
|
|
<p class="text-muted ad-banner__subline"><?= e($subline) ?></p>
|
|
<?php endif; ?>
|
|
<ul class="ad-banner__track" id="ad-banner-track" aria-live="off">
|
|
<?php foreach ($banners as $i => $banner): ?>
|
|
<?php $bg = $banner['background'] ?? null; ?>
|
|
<?php $variant = $banner['variant'] ?? null; ?>
|
|
<li class="ad-banner__slide<?= $bg ? ' ad-banner__slide--bg' : '' ?><?= $variant ? ' ad-banner__slide--' . e($variant) : '' ?>"<?= $bg ? ' style="--banner-bg: url(' . e(asset($bg)) . ')"' : '' ?> data-banner-slide role="group" aria-roledescription="Folie" aria-label="<?= ($i + 1) ?> von <?= $total ?>"<?= $i === 0 ? '' : ' hidden' ?>>
|
|
<div class="ad-banner__content">
|
|
<span class="ad-banner__tag"><?= e($banner['tag'] ?? 'Anzeige') ?></span>
|
|
<p class="ad-banner__title"><?= e($banner['title']) ?></p>
|
|
<p class="ad-banner__text"><?= e($banner['text']) ?></p>
|
|
<?php
|
|
// Rendert einen CTA-Link; externe Links öffnen im neuen Tab (rel=sponsored),
|
|
// interne (cta.internal) bleiben normale Links. $btnClass für Primär/Sekundär.
|
|
$renderCta = static function (?array $cta, string $btnClass) {
|
|
if (empty($cta['url']) || empty($cta['label'])) {
|
|
return;
|
|
}
|
|
$internal = !empty($cta['internal']);
|
|
echo '<a class="' . e($btnClass) . ' ad-banner__cta" href="' . e($cta['url']) . '"'
|
|
. ($internal ? '' : ' target="_blank" rel="noopener sponsored"') . '>'
|
|
. e($cta['label'])
|
|
. ($internal ? '' : '<span class="visually-hidden"> (öffnet in neuem Tab)</span>')
|
|
. '</a>';
|
|
};
|
|
?>
|
|
<?php if (!empty($banner['cta']) || !empty($banner['cta_secondary'])): ?>
|
|
<div class="ad-banner__actions">
|
|
<?php $renderCta($banner['cta'] ?? null, 'btn'); ?>
|
|
<?php $renderCta($banner['cta_secondary'] ?? null, 'btn btn--outline'); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="ad-banner__logo<?= !empty($banner['logo_light']) ? ' ad-banner__logo--light' : '' ?>">
|
|
<img src="<?= e(asset($banner['logo'])) ?>" alt="<?= e($banner['company'] ?? $banner['title']) ?>" loading="lazy" decoding="async">
|
|
</div>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
<?php if ($total > 1): ?>
|
|
<?php /* Ohne JS verborgen (Steuerung wäre funktionslos); banner.js blendet sie ein. */ ?>
|
|
<div class="ad-banner__controls" data-banner-controls hidden>
|
|
<?php /* Explizite Pause/Play-Taste — WCAG 2.2.2. Nur bei aktiver Auto-Rotation sichtbar. */ ?>
|
|
<button class="ad-banner__toggle" type="button" data-banner-toggle aria-pressed="false" aria-controls="ad-banner-track" hidden>
|
|
<?= icon('pause-fill', 'ad-banner__toggle-icon ad-banner__toggle-icon--pause') ?>
|
|
<?= icon('play-fill', 'ad-banner__toggle-icon ad-banner__toggle-icon--play') ?>
|
|
<span class="visually-hidden" data-banner-toggle-label>Automatischen Wechsel pausieren</span>
|
|
</button>
|
|
<div class="ad-banner__indicators" role="group" aria-label="Anzeige wählen">
|
|
<?php foreach ($banners as $i => $banner): ?>
|
|
<button class="ad-banner__dot" type="button" data-banner-dot aria-controls="ad-banner-track" aria-label="Anzeige <?= ($i + 1) ?> von <?= $total ?>: <?= e($banner['company'] ?? $banner['title']) ?>">
|
|
<span class="ad-banner__progress" aria-hidden="true"></span>
|
|
</button>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</section>
|