WordPress Artikelbild via CSS als Hintergrundbild nutzen

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 13 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

Ab und an braucht man pro Beitrag oder Seite ein Bild als Hingucker oder um den Inhalt zu verschönern. Für Redakteure ist die Post Thumbnail Funktion recht komfortable um ein Bild zum Beitrag oder der Seite fest zu legen. Darum lohnt es, auch dieses Bild als Hintergrundbild zum Beitrag zu nutzen. Allerdings ist es wesentlich schöner, wenn das Bild via CSS in Hintergrund definiert ist und im Markup nicht auftaucht. Daher eine kleine Funktion, die ein Standard-Bild definiert und wenn es ein definiertes Post Thumbnail gibt, dann wird dieses gezogen.

Die Funktion stellt nur eine kleine Lösung dar, muss also nach belieben angepasst und erweitert werden. Viel Spaß damit. Eine ähnliche Lösung gibt es außerdem bei Sergej, der damit Facebook befüttert.


/**
 * return post thumbnail inside style in head
 */
if ( !function_exists('fb_background_image') ) {
	
	function fb_background_image() {
		// only frontend
		if ( is_feed() || is_trackback() ) {
			return;
		}
		
		// default image, when no set an post thumbnail
		if ( !has_post_thumbnail($GLOBALS['post']->ID) ) {
			$style = '<style type="text/css">.banner {background-image:url(\'' . get_bloginfo('stylesheet_directory') . '/images/banner.jpg\');} </style>' . "\n\n";
		} else {
			// get post thumbnail
			$image = wp_get_attachment_image_src(
				get_post_thumbnail_id($GLOBALS['post']->ID),
				'banner' // size for image; defined via add_image_size
			);
			
			$style = sprintf(
				'<style type="text/css">.banner {background-image:url(\'%s\');}</style>',
				esc_attr($image[0]),
				"\n\n"
			);
		}
		if ($style)
			echo $style;
	}
	
	// add functions
	add_action( 'wp_head', 'fb_background_image' );
	add_theme_support( 'post-thumbnails' );
	add_image_size( 'banner', 980, 350, true );
	
}

Von Frank Bültge

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.