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.