Leerer srcset-Kandidat macht zehn Bilder unbrauchbar #134

Merged
Phil merged 1 commit from fix/leere-srcset-kandidaten into main 2026-09-10 08:21:35 +00:00
Owner

Behebt den Fehler, durch den auf der Startseite zehn Bilder gar nicht erschienen — darunter beide Goldader-Bilder der Goldprozess-Sektion, also ausgerechnet die Sektion, die die Positionierung trägt. Sie stand live als leerer Rahmen mit Alt-Text da.

Ursache

templates/_components/core/image.twig baute die srcset-Kandidaten per String-Verkettung. Liefert image.getUrl(...) zur Renderzeit eine leere URL — was passiert, wenn der Transform noch nicht erzeugt ist — entstand trotzdem ein Kandidat, nur ohne Adresse:

srcset="… 375w,  750w, … 1125w"

Der Browser liest die nackte Breite 750w als URL, läuft in einen Fehler und verwirft das gesamte Bild (naturalWidth === 0).

Verschärfend: config/general.php:49 setzt generateTransformsBeforePageLoad(true), und Blitz cacht das Seiten-HTML. Ein einziger unglücklicher Render friert damit dauerhaft ein — Cache leeren allein ist kein Fix, der Zustand kommt wieder.

Änderung

Die URL wird jetzt geholt und geprüft, bevor der Kandidat entsteht; leere Kandidaten fallen weg. Bleibt keiner übrig, wird srcset/sizes gar nicht ausgegeben statt leer — dafür werden die Variablen explizit auf null statt '' gesetzt, damit der bestehende ??-Fallback und die {% if %}-Bedingung greifen.

Verifikation (ausgeführt)

docker exec philflow_php_local php craft blitz/cache/clear
curl -s http://localhost:8090/ | grep -cE 'srcset="[^"]*(,|")\s+[0-9]+w'
→ 0   (vorher: 10)

Browser-Prüfung über alle 57 Bilder der Startseite nach vollem Durchscrollen: kein Bild mehr mit naturalWidth === 0. Zwei Treffer im Zwischenstand waren kein Defekt, sondern verzögertes Laden zweier Slides im Kundenergebnisse-Slider — mit erzwungenem loading="eager" laden beide einwandfrei.

Closes #133

🤖 Generated with Claude Code

https://claude.ai/code/session_01Y29GMuZcsumFPpLUh84c8G

Behebt den Fehler, durch den auf der Startseite zehn Bilder gar nicht erschienen — darunter **beide Goldader-Bilder der Goldprozess-Sektion**, also ausgerechnet die Sektion, die die Positionierung trägt. Sie stand live als leerer Rahmen mit Alt-Text da. ## Ursache `templates/_components/core/image.twig` baute die srcset-Kandidaten per String-Verkettung. Liefert `image.getUrl(...)` zur Renderzeit eine leere URL — was passiert, wenn der Transform noch nicht erzeugt ist — entstand trotzdem ein Kandidat, nur ohne Adresse: ``` srcset="… 375w, 750w, … 1125w" ``` Der Browser liest die nackte Breite `750w` als URL, läuft in einen Fehler und verwirft das gesamte Bild (`naturalWidth === 0`). Verschärfend: `config/general.php:49` setzt `generateTransformsBeforePageLoad(true)`, und Blitz cacht das Seiten-HTML. Ein einziger unglücklicher Render friert damit dauerhaft ein — **Cache leeren allein ist kein Fix**, der Zustand kommt wieder. ## Änderung Die URL wird jetzt geholt und geprüft, bevor der Kandidat entsteht; leere Kandidaten fallen weg. Bleibt keiner übrig, wird `srcset`/`sizes` gar nicht ausgegeben statt leer — dafür werden die Variablen explizit auf `null` statt `''` gesetzt, damit der bestehende `??`-Fallback und die `{% if %}`-Bedingung greifen. ## Verifikation (ausgeführt) ``` docker exec philflow_php_local php craft blitz/cache/clear curl -s http://localhost:8090/ | grep -cE 'srcset="[^"]*(,|")\s+[0-9]+w' → 0 (vorher: 10) ``` Browser-Prüfung über alle 57 Bilder der Startseite nach vollem Durchscrollen: **kein** Bild mehr mit `naturalWidth === 0`. Zwei Treffer im Zwischenstand waren kein Defekt, sondern verzögertes Laden zweier Slides im Kundenergebnisse-Slider — mit erzwungenem `loading="eager"` laden beide einwandfrei. Closes #133 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01Y29GMuZcsumFPpLUh84c8G
Liefert getUrl() zur Renderzeit eine leere URL -- etwa weil der Transform
noch nicht erzeugt ist -- entstand durch die String-Verkettung trotzdem ein
Kandidat, nur ohne Adresse: " 750w". Browser lesen die nackte Breite als
URL, laufen in einen Fehler und verwerfen das gesamte Bild. Blitz friert
so ein Rendering im Seiten-Cache ein, weshalb Cache-Leeren allein nicht
reicht.

Auf der Startseite betraf das zehn Bildquellen, darunter beide Goldader-
Bilder der Goldprozess-Sektion.

Closes #133

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Y29GMuZcsumFPpLUh84c8G
Phil merged commit a21445026b into main 2026-09-10 08:21:35 +00:00
Phil deleted branch fix/leere-srcset-kandidaten 2026-09-10 08:21:35 +00:00
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Phil/philflow.io!134
No description provided.