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.