Half-Elf on Tech

Thoughts From a Professional Lesbian

Gensis: Post Title on Featured Image

Written by

Ipstenu (Mika Epstein)

in

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

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.

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.

author avatar
Ipstenu (Mika Epstein)
I’m Mika (aka Ipstenu) and I’m complicated. I’ve been on the net since the days of dedicated terminals and Novation CAT modems and solved Missionaries and Cannibals (or Goats and Cabbages) before I was six, and blog about WordPress and technical/computer things at Half Elf on Tech.
See Full Bio

More posts