How to overlay entry title on featured image in single Posts

In Genesis Facebook group a user asked:

Hello friends, I was able to move my entry-header outside the loop and make it full width, thanks to Sridhar Katakam! However, I’d like to take my featured image outside the loop (preferably above the entry-header).

Here’s what it currently looks like: http://leaguewp.com/web-hosting-service-guide/

Here’s how I’d rather it appear on single post: http://www.nab.com.au/personal/learn/managing-your-debts/pay-less-interest-on-your-home-loan-with-100-percent-offset

I’d appreciate any help. Thanks in advance!

In this tutorial we shall

• add a div.post-hero below header on single Posts and set the featured image as its cover background.
• use a fallback image from the images directory if there’s no featured image set
• display the entry title inside the div and remove it from the entry header

Step 1

Add the following in child theme’s functions.php:

	// Register a custom image size for hero images on single Posts
	add_image_size( 'post-image', 1600, 400, true );
	add_action( 'genesis_after_header', 'sk_hero_image' );
	function sk_hero_image() {
	// if we are not on a single Post, abort.
	if ( !is_singular( 'post' ) ) {
	return;
	}
	// set $image to URL of featured image. If featured image is not present, set it to post-image.jpg in child theme's images directory.
	if ( has_post_thumbnail() ) {
	$image = genesis_get_image( 'format=url&size=post-image' );
	} else {
	$image = get_stylesheet_directory_uri() . '/images/post-image.jpg';
	} ?>
	<div class="post-hero" style="background-image: url('<?php echo $image; ?>')">
	<div class="wrap">
	<?php genesis_do_post_title(); ?>
	</div>
	</div>
	<?php
	// Remove entry title
	remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
	}

view raw functions.php hosted with by GitHub

Upload your desired fallback image to child theme’s images directory having the name of post-image.jpg.

Step 2

Regenerate thumbnails.

Step 3

Add the following in child theme’s style.css:

	.post-hero {
	padding: 200px 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	}
	.post-hero .entry-title {
	margin-bottom: 0;
	color: #fff;
	background-color: rgba(0,0,0,.75);
	padding: 15px;
	text-transform: uppercase;
	max-width: 50%;
	}
	@media only screen and (max-width: 1023px) {
	.post-hero .entry-title {
	max-width: none;
	}
	}

view raw style.css hosted with by GitHub