Bildkomponente gibt bei mode fit falsche Masse aus und erzeugt Layout-Spruenge #139

New issue

Closed

opened 2026-09-10 08:49:58 +00:00 by Phil · 0 comments

Phil commented

2026-09-10 08:49:58 +00:00

Owner

Symptom

Die Sektion „Wer ist Philipp Lütje" wächst bei 390 px Breite um 58 px, sobald ihr Bild geladen ist. Alles darunter rutscht nach. Gemessen:

vorher  16284 px  Sektionen: 719,1450,1433,2064,587,807,1848,1597,524,2024,1368,1020
nachher 16343 px  Sektionen: 719,1450,1433,2064,587,807,1848,1655,524,2024,1368,1020
                                                        ^^^^  +58

Nebeneffekt: Das Gate reduced_motion misst dadurch 2,09 % bei 390 px (Schwelle 2 %) — es vergleicht eine gescrollte gegen eine ungescrollte Aufnahme, und der Versatz zählt als fehlender Inhalt. Das Gate ist hier der Bote, nicht der Schuldige.

Ursache

templates/_components/core/image.twig schreibt die angeforderten Maße in die width- und height-Attribute:

{% include "_components/core/image" with { image: …, height: 1000, width: 600 } %}

Bei mode: fit — dem Standard der Komponente — passt Craft das Bild in diese Box ein und behält sein Seitenverhältnis. Das erzeugte Bild hat deshalb andere Maße als die Box:

angefordert	Datei auf der Platte	Bild
`600 × 1000`	526 × 1000	`info-hero.webp`
`850 × 1000`	618 × 1000	`Hero-Photo.png`

Der Browser reserviert vor dem Laden Platz nach dem Verhältnis aus den Attributen (0,60) und korrigiert beim Laden auf das echte Verhältnis (0,53). Das ist der Sprung.

Das betrifft jedes fit-Bild der Seite, nicht nur diese eine Sektion — auch das Hero-Porträt, also das größte Bild über der Falz.

Fix

Die tatsächlichen Maße des angewandten Transforms ausgeben statt der angeforderten. Craft liefert sie über asset.getWidth(transform) / asset.getHeight(transform), oder sie lassen sich aus dem natürlichen Seitenverhältnis des Assets in die Box hineinrechnen.

Zu beachten: bei mode: crop stimmen die angeforderten Maße, dort darf sich nichts ändern. Und height/width dürfen nicht wegfallen — ohne sie reserviert der Browser gar keinen Platz, das wäre schlimmer.

Akzeptanzkriterien

width/height entsprechen bei mode: fit dem tatsächlich erzeugten Bild
Bei mode: crop unverändert
Keine Sektion ändert beim Durchscrollen ihre Höhe (Messung wie oben, 1440 und 390)
Gate reduced_motion bei 390 px unter 2 %

Refs #133, #137

## Symptom Die Sektion „Wer ist Philipp Lütje" wächst bei 390 px Breite um **58 px**, sobald ihr Bild geladen ist. Alles darunter rutscht nach. Gemessen: ``` vorher 16284 px Sektionen: 719,1450,1433,2064,587,807,1848,1597,524,2024,1368,1020 nachher 16343 px Sektionen: 719,1450,1433,2064,587,807,1848,1655,524,2024,1368,1020 ^^^^ +58 ``` Nebeneffekt: Das Gate `reduced_motion` misst dadurch 2,09 % bei 390 px (Schwelle 2 %) — es vergleicht eine gescrollte gegen eine ungescrollte Aufnahme, und der Versatz zählt als fehlender Inhalt. Das Gate ist hier der Bote, nicht der Schuldige. ## Ursache `templates/_components/core/image.twig` schreibt die **angeforderten** Maße in die `width`- und `height`-Attribute: ```twig {% include "_components/core/image" with { image: …, height: 1000, width: 600 } %} ``` Bei `mode: fit` — dem Standard der Komponente — passt Craft das Bild **in** diese Box ein und behält sein Seitenverhältnis. Das erzeugte Bild hat deshalb andere Maße als die Box: | angefordert | Datei auf der Platte | Bild | |---|---|---| | `600 × 1000` | **526 × 1000** | `info-hero.webp` | | `850 × 1000` | **618 × 1000** | `Hero-Photo.png` | Der Browser reserviert vor dem Laden Platz nach dem Verhältnis aus den Attributen (0,60) und korrigiert beim Laden auf das echte Verhältnis (0,53). Das ist der Sprung. Das betrifft **jedes** `fit`-Bild der Seite, nicht nur diese eine Sektion — auch das Hero-Porträt, also das größte Bild über der Falz. ## Fix Die tatsächlichen Maße des angewandten Transforms ausgeben statt der angeforderten. Craft liefert sie über `asset.getWidth(transform)` / `asset.getHeight(transform)`, oder sie lassen sich aus dem natürlichen Seitenverhältnis des Assets in die Box hineinrechnen. Zu beachten: bei `mode: crop` stimmen die angeforderten Maße, dort darf sich nichts ändern. Und `height`/`width` dürfen nicht wegfallen — ohne sie reserviert der Browser gar keinen Platz, das wäre schlimmer. ## Akzeptanzkriterien - [ ] `width`/`height` entsprechen bei `mode: fit` dem tatsächlich erzeugten Bild - [ ] Bei `mode: crop` unverändert - [ ] Keine Sektion ändert beim Durchscrollen ihre Höhe (Messung wie oben, 1440 und 390) - [ ] Gate `reduced_motion` bei 390 px unter 2 % Refs #133, #137

Phil referenced this issue from a commit

2026-09-10 08:53:38 +00:00

fix(images): tatsaechliche Transform-Masse ausgeben statt angeforderter

Phil referenced this issue from a pull request that will close it,

2026-09-10 08:53:51 +00:00

Bildkomponente gibt bei mode fit falsche Masse aus und erzeugt Layout-Spruenge #140

Phil closed this issue

2026-09-10 08:53:56 +00:00

Phil referenced this issue

2026-09-10 15:02:49 +00:00

Uebergang strecken, Produktbilder schaerfen, Streifen im Schluss entfernen #147