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:

<br />
//* Remove default post image<br />
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );</p>
<p>//* Add featured to the entry content - required for the front page/archives<br />
//* With a value of 3 it will be OUTSIDE the </p>
<header>
add_action( 'genesis_entry_header', 'halfelf_featured_photo', 3 );</p>
<p>function halfelf_featured_photo() {<br />
	if ( !genesis_get_option( 'content_archive_thumbnail' ) || !has_post_thumbnail() ) {<br />
	    // Don't show on pages without a thumbnail or on archives without a thumbnail but leave space for the compensation.<br />
		printf('</p>
<div class="featured-image no-image"></div>
<p>');<br />
	}</p>
<p>	elseif ( is_single() ) {<br />
		// No link on single pages<br />
		$image = genesis_get_image( array( 'format' => 'url', 'size' => genesis_get_option( 'image_size' ) ) );<br />
		printf( '<img src="%s" alt="%s" />', $image, the_title_attribute( 'echo=0' ) );<br />
	}</p>
<p>	elseif ( $image = genesis_get_image( array( 'format' => 'url', 'size' => genesis_get_option( 'image_size' ) ) ) ) {<br />
		printf('<a href="%s" title="%s" class="featured-image">', get_permalink(), the_title_attribute( 'echo=0' ) );<br />
		printf( '<img src="%s" alt="%s" />', $image, the_title_attribute( 'echo=0' ) );<br />
		printf('</a>');<br />
	}<br />
}<br />

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

<br />
.entry {<br />
	margin-bottom: 20px;<br />
	position: relative;<br />
}</p>
<p>.entry-content:before {<br />
	clear: both;<br />
}</p>
<p>article .entry-header {<br />
	position: absolute;<br />
	top: 10px;<br />
	width: 100%;<br />
	background: rgba(236, 240, 239, 0.75) !important;<br />
	text-align: center;<br />
}</p>
<p>.featured-image.no-image {<br />
	height: 220px;<br />
	background-color: #333;<br />
}</p>
<p>

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.

<br />
a.featured-image:hover, a.featured-image.no-image {<br />
	opacity: .33;<br />
}<br />

Surprisingly simple.