Header Image via Featured Thumbnail

A lot of sites employ a header splash, notably photographer websites.  It is a highly requested feature of clients.  Fortunately WordPress has an easy hook with its featured image (thumbnail) setting that will allow an admin to set whatever image they wish for each post or page.  First, in functions.php, activate thumbnail support.

add_theme_support( ‘post-thumbnails’ );

Then in your theme file, such as header.php, call it forth.

<?php if (has_post_thumbnail( $post->ID ) ) : // is thumbnail set?
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘single-post-thumbnail’ ); // grab image attr array ?>
<header class=”main-header” style=”background-image: url(‘<?php echo $image[0]; // the first array item is the src ?>’)”>
<?php else : ?>
<header class=”main-header” style=”background-image: url(‘<?php bloginfo(‘template_url’); // define a default in your theme folder ?>/images/defaultbg.jpg’)”>
<?php endif; ?>

Then CSS3’s background-size will do you well.   Alternatively you could have it echo into an img tag and set width, height 100% auto.

 

More Posts

Donate

Hey was this useful? Please consider tipping or subscribing as a member. Even just $1 or $5 can help me improve this content and keep it ad-free.