WordPress Artikelbild via CSS als Hintergrundbild nutzen

Das Artikelbild von WordPress via CSS als Hintergrundbild nutzen, einfach für die Autoren zu bedienen und flexibel im Theme einzusetzen; eine kleine Lösung gibt hier im Artikel

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 );
	
}

Kommentare sind geschlossen.