askdesign
6/15/2015 - 4:55 PM

How To Add A Full Width Image Above Page Content In Genesis

Benweiser.com

/*--- In childtheme CSS, add the following class ---*/
.above-post-hero {
	max-width:100%;
	height:400px;
	background-size:cover;
	background-position:50% 50%;
}

/*--- change above code to make images responsive ---*/
.above-post-hero {
	max-width:100%;
	height:auto;
	background-repeat:no-repeat;
  background-size:100%;
	background-position:50% 50%;
}

//Functions.php
//Step 2: Here we are creating a new image size with add_image_size you can change 1400, and 400 to reflect whatever image size you want to use. The first is the width, and the second is the height. I chose 1400px as it should cover most desktop screens without losing too much quality, and 400 px seemed like a good place to round off the height.

//The following script uses WordPress’ featured image to insert a background as a background image in the genesis_after_header hook.

//I thought about doing this as an inline image, but I realized that a background would make it easier in case I want to put text over the image.
//Add the following to your child theme’s functions.php file

// Benweiser.com 
//Add hero image above post/page content
 
// Create new image size for our hero image

add_image_size( 'hero-image', 1400, 400, TRUE ); // creates a hero image size
 
// Hook after header area
add_action( 'genesis_after_header', 'bw_hero_image' );

function bw_hero_image() {
 
	// If it is a page and has a featured thumbnail, but is not the front page do the following...
	
    if (has_post_thumbnail() && is_page() && !is_front_page() ) {
    
    	// Get hero image and save in variable called $background
    	
    	$background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'hero-image' );
    	
    	// You can change above-post-hero to any class you want and adjust CSS styles
    	
	    echo "<div class='above-post-hero' style='background-image: url(  $background[0]  );'></div>";
	    
    } 
}
//http://benweiser.com/how-to-add-a-full-width-image-above-page-content-in-genesis/

If you’re familiar with Medium you’re probably familiar with huge hero images being displayed above the content. In order to accomplish something similar we just need a few small tweaks to our functions file, and our style.css.

Essentially what we’re doing is created a custom “Hero Image” that appears above each page of post on your Genesis site.

Here’s what it looks like,
genesis add hero image above content

Using WordPress’ built-in Featured Image option we can add a different featured image to any page or post and have it display as a large hero area above the content.

Implementation

We’re going to be editing the theme’s functions file so we need to make sure that backup our install before going forward.

Step 1: Download and install the Regenerate Thumbnails plugin you’re going to need it pretty soon.