Gensis: Post Title on Featured Image

This is something that’s done already on my personal blog, and I wanted to repurpose it for another. This was actually very easy, once I reverse engineering a few things.

Add the Featured Image #Add the Featured Image

First you have to make sure you have a featured image to add:

//* Remove default post image
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );

//* Add featured to the entry content - required for the front page/archives
//* With a value of 3 it will be OUTSIDE the <header>
add_action( 'genesis_entry_header', 'halfelf_featured_photo', 3 );

function halfelf_featured_photo() {
	if ( !genesis_get_option( 'content_archive_thumbnail' ) || !has_post_thumbnail() ) {
	    // Don't show on pages without a thumbnail or on archives without a thumbnail but leave space for the compensation.
		printf('<div class="featured-image no-image"></div>');
	}

	elseif ( is_single() ) {
		// No link on single pages
		$image = genesis_get_image( array( 'format' => 'url', 'size' => genesis_get_option( 'image_size' ) ) );
		printf( '<img src="%s" alt="%s" />', $image, the_title_attribute( 'echo=0' ) );
	}

	elseif ( $image = genesis_get_image( array( 'format' => 'url', 'size' => genesis_get_option( 'image_size' ) ) ) ) {
		printf('<a href="%s" title="%s" class="featured-image">', get_permalink(), the_title_attribute( 'echo=0' ) );
		printf( '<img src="%s" alt="%s" />', $image, the_title_attribute( 'echo=0' ) );
		printf('</a>');
	}
}

I’ve probably made this more complicated than necessary, but I needed the extra div for pages without featured images, I wanted to and I wanted to show the image on post pages without a link, so this was what I made.

Top ↑

Move the header with CSS #Move the header with CSS

.entry {
	margin-bottom: 20px;
	position: relative;
}

.entry-content:before {
	clear: both;
}

article .entry-header {
	position: absolute;
	top: 10px;
	width: 100%;
	background: rgba(236, 240, 239, 0.75) !important;
	text-align: center;
}

.featured-image.no-image {
	height: 220px;
	background-color: #333;
}

I actually use some sass to generate this (thank you Taupecat and my sass plugin) but I’ve put it in plain PX for you. Adjust as needed. The .featured-image.no-image height is to match the height of that site’s featured image, which I always know.

Top ↑

Style as desired #Style as desired

I threw in this so the whole image changes color when you hover, as a good indicator to what’s going on.

a.featured-image:hover, a.featured-image.no-image {
	opacity: .33;
}

Surprisingly simple.