Platzhalter-Avatar: AdobeStock-Frauenavatar (von alter Seite, lokal optimiert 11 KB) statt Initialen-Fallback
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -5,16 +5,11 @@ declare(strict_types=1);
|
|||||||
/**
|
/**
|
||||||
* Visitenkarte für eine Person. Props:
|
* Visitenkarte für eine Person. Props:
|
||||||
* $person array{department, name, phone?, email?, image?}
|
* $person array{department, name, phone?, email?, image?}
|
||||||
* Ohne image rendert die Karte einen geschlechtsneutralen Initialen-Avatar
|
* Ohne image greift der Platzhalter-Avatar (img/persons/platzhalter.jpg).
|
||||||
* (Coolvetica-Initialen + Logo-Wasserzeichen) — keinen Foto-Platzhalter.
|
|
||||||
* Kontakt-Link: phone → tel:, sonst email → mailto:.
|
* Kontakt-Link: phone → tel:, sonst email → mailto:.
|
||||||
*/
|
*/
|
||||||
$image = $person['image'] ?? null;
|
$image = $person['image'] ?? null;
|
||||||
|
$src = $image ?: 'img/persons/platzhalter.jpg';
|
||||||
$initials = implode('', array_map(
|
|
||||||
static fn (string $word): string => mb_substr($word, 0, 1),
|
|
||||||
array_slice(preg_split('/\s+/', trim($person['name'])) ?: [], 0, 2)
|
|
||||||
));
|
|
||||||
|
|
||||||
if (!empty($person['phone'])) {
|
if (!empty($person['phone'])) {
|
||||||
$contactHref = 'tel:' . preg_replace('/[^+\d]/', '', $person['phone']);
|
$contactHref = 'tel:' . preg_replace('/[^+\d]/', '', $person['phone']);
|
||||||
@@ -30,15 +25,9 @@ if (!empty($person['phone'])) {
|
|||||||
?>
|
?>
|
||||||
<article class="person-card">
|
<article class="person-card">
|
||||||
<div class="person-card__media">
|
<div class="person-card__media">
|
||||||
<?php if ($image): ?>
|
<img src="<?= e(asset($src)) ?>"
|
||||||
<img src="<?= e(asset($image)) ?>"
|
alt="<?= $image ? e($person['name']) : '' ?>"
|
||||||
alt="<?= e($person['name']) ?>"
|
|
||||||
width="480" height="600" loading="lazy" decoding="async">
|
width="480" height="600" loading="lazy" decoding="async">
|
||||||
<?php else: ?>
|
|
||||||
<div class="person-card__initials" aria-hidden="true">
|
|
||||||
<span><?= e($initials) ?></span>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="person-card__body">
|
<div class="person-card__body">
|
||||||
<h3 class="person-card__department"><?= e($person['department']) ?></h3>
|
<h3 class="person-card__department"><?= e($person['department']) ?></h3>
|
||||||
|
|||||||
@@ -319,34 +319,6 @@
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Initialen-Avatar: geschlechtsneutraler Fallback ohne Foto */
|
|
||||||
.person-card__initials {
|
|
||||||
position: relative;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
aspect-ratio: 4 / 5;
|
|
||||||
background: radial-gradient(circle at 50% 35%, rgb(255 255 255 / 0.07), transparent 65%), var(--clr-bg-deep);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.person-card__initials span {
|
|
||||||
font-family: var(--ff-heading);
|
|
||||||
font-size: var(--fs-800);
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
color: var(--clr-text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.person-card__initials::after {
|
|
||||||
/* dezente rote Akzentlinie unten, statt Logo-Wasserzeichen */
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
height: 3px;
|
|
||||||
background: linear-gradient(90deg, transparent, rgb(var(--clr-accent-rgb) / 0.6), transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.person-card__body {
|
.person-card__body {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.2rem;
|
gap: 0.2rem;
|
||||||
|
|||||||
BIN
public/assets/img/persons/platzhalter.jpg
Normal file
BIN
public/assets/img/persons/platzhalter.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Reference in New Issue
Block a user