Block Themes: Template mit geänderter Darstellung beim Beitragsbild (featured Image)

Block Themes: Template mit geänderter Darstellung (object-position) beim Beitragsbild (featured Image)

In manchen Fällen ist es bei der Erstellung von Beiträgen hier auf haurand.com schon vorgekommen, dass der Bildausschnitt des Beitragsbildes (featured image) nicht optimal dargestellt wird. Wie man das beeinflussen kann, zeige ich in dem folgenden Beitrag bezogen auf allgemeine Möglichkeiten und den speziellen Möglichkeiten bei Block Themes.

Was ist object-position?

Die CSS-Eigenschaft object-position legt fest, welcher Bereich eines ersetzten Elements (z. B. Bild oder Video) innerhalb seines Rahmens angezeigt wird, wenn das Element skaliert oder zugeschnitten wird – etwa durch object-fit: cover;. So bestimmst du zum Beispiel, ob bei einem gefüllten Bild der obere Rand, die Mitte oder ein anderer Bildausschnitt gezeigt wird.

Hier die wichtigsten Einstellungen, siehe auch die offizielle Dokumentation:

Schlüsselwörter:
- top – zeigt den oberen Bildbereich
- bottom – zeigt den unteren Bildbereich
- left – zeigt den linken Bildbereich
- right – zeigt den rechten Bildbereich
- center – zeigt die Bildmitte (Standard)

Kombinierte Werte:
- top left, top center, bottom right, center center etc.

Prozentangaben:
- object-position: 0% 0% = links oben
- object-position: 100% 0% = rechts oben
- object-position: 50% 100% = mittig unten

Ein neues Template mit einer geänderten Darstellung des featured Image (Beitragsbild) mittels object-position erstellen

Nachfolgend eine kurze Auflistung der Punkte, die zur Erstellung notwendig sind und die ich näher erläutern werde:

individuelles Template für Beiträge erstellen
Bei dem Beitragsbild (Featured Image) wird bei diesem Template unter Erweitert > Zusätzliche CSS-Klasse(n) featured_image_top_center eingetragen
Unter „Zusätzliches CSS“ CSS-Regel erfassen
Z. B. unter Schnellbearbeitung das Template dem entsprechenden Beitrag zuweisen. Alternative: Bei Bearbeitung des Beitrags das Template zuordnen.

Individuelles Template für Beiträge erstellen

Um ein Template für diesen Zweck zu erstellen, muss man über Design > Website-Editor > Templates oben rechts den Button „Template hinzufügen“ klicken (1):

Anschließend wählt man die Option „Individuelles Template“ (2) und vergibt einen Namen für dieses Template. Im Beispiel habe ich die Bezeichnung „featured image top center“ gewählt. Danach wird als Vorlage das Standard-Template für Beiträge angeboten, das man in diesem Fall durch einen Klick auf das Template auswählen sollte.

Info

Info: Unten rechts besteht auch die Option „Überspringen“. In dem Fall hätte man allerdings ein leeres Template, was hier nicht sinnvoll ist, weil man ja letztendlich nur eine kleine Anpassung in dem neuen Template vornehmen möchte.

Danach wird das Template als Vorlage angezeigt. Zunächst sollte man (wie immer) die Dokumentenübersicht (Liste) links oben anklicken (1), damit man eine bessere Orientierung bei den Blöcken hat. In der Liste wählt man „Beitragsbild“ (2), das anschließend eine blauen Rahmen hat, durch den deutlich wird, das dieser Block aktiv ist.

Unter Einstellungen (4 – Symbol „Zahnrad“) wählt man „Zusätzliche CSS-Klasse(n)“ und trägt „featured_image_top_center“ als Bezeichnung für die CSS-Klasse ein. Danach speichert man das neue Template über den Button „Speichern“ oben rechts.

Jetzt folgt der nächste Schritt: Die Klasse für das Template ist zwar zugeordnet, muss aber noch definiert werden.

Zusätzliches CSS bei Block Themes eintragen

Dazu klickt man unter Design > Editor oben rechts auf „Stile“ (der Halbmond – 1), dann auf die drei senkrechten Punkte (2) und schließlich auf die Option „Zusätzliches CSS“.

Eine weitere und damit die sicher schnellste Option ist die Eingabe über die Tastatur (Befehlspalette) mit (Strg/Cmd+K) und Eingabe „CSS“. Anschließend wird sofort „Individuelles CSS öffnen“ angeboten.

Dort tragen wir die folgende CSS-Regel ein:

figure.featured_image_top_center img {
    object-position: top center;
}

Anschließend klicken wir wieder oben rechts auf den Button „Speichern“, damit auch die Einstellungen für CSS gesichert ist.

Nachfolgend noch mal zusätzlich ein kurzes Video als allgemeines Beispiel dazu:

Info

Info: Sollte man bereits Eintragungen unter zusätzliches CSS vorgenommen haben, dann findet man die Option „Zusätzliches CSS“ unter Design > Stile ganz unten.

Einem Beitrag das neue Template zuordnen

Das neue Template ist zwar jetzt fertig, aber muss noch den Beiträgen zugeordnet werden, bei denen der obere Bildbereich als Beitragsbild (featured image) angezeigt werden soll.

Hier gibt es zwei Möglichkeiten:

Template über Schnellbearbeitung zuweisen

Wenn man die Liste der Beiträge über Beiträge > Alle Beiträge hat, werden beim Hovern über den Beitrag (Überfahren des Beitragstitels in der Übersicht mit der Maus) unter dem Beitrag verschiedene Optionen gezeigt, die zunächst nicht sichtbar sind:
Bearbeiten | Schnellbearbeitung | In Papierkorb legen | Anzeigen

Wenn man hier die Option „Schnellbearbeitung“ wählt, dann findet man rechts die Option „Template“ und kann da das neue Template auswählen:

Template bei Bearbeitung zuweisen

Alternativ findet man die Option auch, wenn man einen Beitrag bearbeitet. Unter „Beitrag“ rechts in der Spalte findet man die Option „Template“. Hier ist normalerweise das Standard Template eingetragen. Im Beispiel ist das „Single Post“ oder „Einzelner Beitrag“ (1). Bei Klick kann man „Template ändern“ (2) klicken und kann dann aus der Liste beispielsweise das neu angelegte Template „featured image top center“ wählen.

Änderung der Darstellung des Beitragsbildes bei einem einzelnen Beitrag

Sollte eine andere Darstellung nur bei einem einzelnen Beitrag gewünscht sein, kann man über „Zusätzliches CSS“ anhand der ID des Beitrags auch eine CSS-Regel wie folgt zuweisen, ohne ein neues Template zu erstellen:

.postid-14679 img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
    object-position: top center;
}

Die ID des Beitrags findet man z. B. oben in der Zeile des Browsers, wenn man den Beitrag bearbeitet. Für dieses Beispiel:

http://testinstanz-haurandcom.local/wp-admin/post.php?post=14679&action=edit

Das lohnt sich allerdings nur, wenn man wirklich nur bei einem Beitrag diese (oder auch andere) Änderungen per CSS-Regel durchführen möchte. Bei zwei und mehr Beiträgen mit einer entsprechenden Änderung würde ich bei Verwendung eines Block Themes wie z. B. Twenty Twenty-Five empfehlen, ein neues Template mit der Änderung bei den Eigenschaften des Featured Images (Beitragsbild) zu erstellen.

Fazit

Auch in diesem Fall zeigt sich wieder die unglaubliche Flexibilität von Block Themes: Die Darstellung des Beitragsbilds (featured image) kann nach Belieben mit ein wenig Custom CSS (zusätzliches CSS) recht einfach geändert werden. Hat man einmal die Philosophie von Block Themes „verstanden“, kann man damit fast alles umsetzen.

Links, Quellen und aktuelle Infos

https://developer.mozilla.org/de/docs/Web/CSS/object-position

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.

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