How To

Gensis: Post Title on Featured Image

A little more featured image magic for your day.

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

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' ) );

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.

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;
} {
	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 height is to match the height of that site’s featured image, which I always know.

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, {
	opacity: .33;

Surprisingly simple.

%d bloggers like this: