fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Banner-Slider: Beispiel-Anzeige Breadcrumb Solutions

Browse Source 
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
This commit is contained in:
Felix Schneider
2026-06-19 08:34:39 +02:00
parent 88fceb67b1
commit f294f1a9de
5 changed files with 99 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/components/banner-slider.php
View File

@@ -7,7 +7,9 @@ declare(strict_types=1);
* 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).
* (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).
@@ -40,12 +42,29 @@ $total = count($banners);
<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 if (!empty($banner['cta']['url']) && !empty($banner['cta']['label'])): ?>
<?php $ctaInternal = !empty($banner['cta']['internal']); ?>
<a class="btn ad-banner__cta" href="<?= e($banner['cta']['url']) ?>"<?= $ctaInternal ? '' : ' target="_blank" rel="noopener sponsored"' ?>><?= e($banner['cta']['label']) ?><?php if (!$ctaInternal): ?><span class="visually-hidden"> (öffnet in neuem Tab)</span><?php endif; ?></a>
<?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">
<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>