Beitragsbild (Featured Image) vollständig bei Beiträgen zeigen

Beitragsbild (Featured Image) bei Block Themes vollständig bei Beiträgen zeigen

In manchen Fällen ergibt sich ein Problem bei Beiträgen und Verwendung von Block Themes wie Twenty Twenty-Five, weil das Beitragsbild (Featured Image) nicht vollständig gezeigt wird. Das Beitragsbild wird auf mobilen Geräten rechts und links beschnitten. Das ist insbesondere bei Gruppenbildern mit Menschen unschön. Woran liegt das und wie kann man das beheben?

Bei Block-Themes wie Twenty Twenty-Five verwendet WordPress object-fit: cover für Featured Images, um sie in feste Container einzupassen. Auf mobilen Geräten führt dies zu seitlichem Beschneiden. Das ist besonders bei breiten Gruppenbildern ungünstig, weil man in diesem Fall die Personen links und rechts nicht mehr sehen kann.

Um das zu korrigieren, kann man bei Block Themes ein neues Template auf Grundlage des Templates „Einzelne Beiträge“ anlegen, bei dem man das Beitragsbild (featured image) entsprechend anpasst.

Anlegen eines neuen Templates

Über Design > Editor kann man ein neues (individuelles) Template anlegen. Hier ein kurzes Video dazu:

In dem Video zeige ich, wie man ein individuelles Template erstellt und bei einem Beitrag anwendet.

Wie man erkennen kann, wird das Beitragsbild (Featured Image) in dem Fall allerdings sehr hoch angezeigt.

Weitere Anpassungen am Template

Um das zu ändern, kann das Template wie folgt geändert werden:

Änderung der Höhe des featured image (Beitragsbild) und der oberen Ränder

Um dafür zu sorgen, dass das Beitragsbild direkt oben unter der Navigation gezeigt wird, habe ich zusätzlich den oberen Rand bei den Gruppen auf 0 gesetzt.

Für die Einstellung der Höhe eines Beitragsbildes in voller Breite im Template ist in der Regel vh besser als px oder % geeignet:

px: Fixe Höhe, reagiert nicht auf Bildschirmgröße. Führt schnell zu abgeschnittenen oder verzerrten Bildern auf kleinen bzw. sehr großen Displays.
% (height): Bezieht sich auf die Höhe des Elternelements, das oft „auto“ hat – dadurch ist das Ergebnis unvorhersehbar.
vw: Orientiert sich an der Breite des Viewports, nicht an der Höhe. Für Bildhöhen meist unlogisch, kann auf hohen, schmalen Displays zu extremen Höhen führen.
vh: Höhe relativ zur Fensterhöhe (z. B. 50vh = halbe Bildschirmhöhe). Eignet sich gut für „Hero“-Bilder oder Header‑Bilder in voller Breite, weil es auf allen Geräten proportional zum Bildschirm wirkt.

In dem Fall habe ich die Höhe des Beitragsbildes auf 60vh eingestellt.

Änderung des featured images (Beitragsbild) über Seitenverhältnis

Eine weitere Option bieten auch die Einstellungen beim Seitenverhältnis in den Eigenschaften. In CSS legt die Eigenschaft aspect-ratio, die hier im Hintergrund Verwendung findet, das Seitenverhältnis eines Elements fest, also das Verhältnis von Breite zu Höhe.

Nachdem ich einige Optionen getestet habe, zeigt sich, dass die Einstellung „Breit – 16:9“ das beste Ergebnis liefert. Hier nochmals ein Film dazu:

Umstellung des featured images beim Template auf „Breit 16:9“

Fazit

Durch die Erstellung von (individuellen) Templates für unterschiedliche Zwecke gibt es bei Block Themes eigentlich für fast alle Fälle eine Lösung. In diesem Fall habe ich gezeigt, dass man mit entsprechenden Einstellungen bei dem Seitenverhältnis bezogen auf das Beitragsbild (featured image) grundsätzlich auf allen Geräten eine passable Ansicht erreicht.

Links, Quellen und aktuelle Infos

Wir freuen uns über eine Kontaktaufnahme

02722-6577725

info@haurand.com

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Newsletter: Wenn du über unsere neuesten Beiträge und Neuigkeiten rund um WordPress informiert werden möchtest, kannst du dich gerne bei unserem kostenlosen Newsletter anmelden. Hier die bisher versendeten Newsletter

Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.