Beitragsbild als Hintergrundbild ausgeben - Wordpress Basics

Bereits seit der Version 2.9 von Wordpress gibt es die "Beitragsbild festlegen" Funktion im Backend. Mit dieser kann einem bestimmten Beitrag oder einer einzelnen Seite ein individuelles "Featured Image" zugeordnet werden. Unterstützt das genutzte Wordpress Theme diese Funktion kann damit an geeigneter Stelle das jeweilige Bild ausgegeben werden. Ob das eigene Theme die Funktion untersützt kann man am einfachsten mit einem Blick in die functions.php überprüfen. Findet sich folgender Code:

add_theme_support( 'post-thumbnails' );

in der Datei, ist die Funktion unterstützt. Beim schreiben eines Beitrages oder einer Seite kann man dann in der rechten Spalte ein entsprechendes Bild festlegen bzw. hochladen. Sollte die Funktion noch nicht in der functions.php vorhanden sein, einfach den oberen Code-Schnipsel per "Copy&Paste" einfügen.

Ausgegeben werden kann das Bild mit folgendem Code im Theme (innerhalb der Loop):

<?php echo get_the_post_thumbnail(); ?> 

Damit wird ein "Image Element" <img>...</img> mit dem ausgewählten Bild des jeweiligen Beitrags als src="..." ausgegeben.

Nur die URL des  Beitragsbild abfragen und als Hintergrundbild verwenden

Aber: Was ist wenn man das Bild nicht als eigenes Element ausgeben will, sondern nur dessen URL nutzen will. Z.B: um selber das Image Element "zusammenbauen" zu können, oder das Bild als Hintergrundbild für ein DIV Kontainer verwenden will? Das Bild über diesem Artikel ist ein gutes Beispiel dafür: Es handelt sich dabei nicht um ein <img> Element sondern um ein Hintergrundbild. Für mich hat es hier im konkreten Beispiel den Vorteil per CSS und background-size: cover das Hintergrundbild dynamisch besser anpassen zu können.

Das ganze geht recht einfach mit folgendem Code:

Was passiert dabei? Durch wp_get_attachment_url "erfragt" man die URL des Anhangs des momentanen Beitrags und packt diese in die Variable $url. Diesen Wert fügt man dann als Hintergrundbild per Inline- CSS an einen DIV Kontainer an.

Die Angabe 'full' bezieht sich im übrigen auf die Größe des Bildes. Mit 'full' wird das Bild in Originalgröße angezeigt. Dies kann auch mit thumbnail, medium oder large ersetzt werden. Dementsprechend wird das Bild dann in den bei Wordpress hinterlegten Standardgrößen angezeigt.