Featured Image Before Single Post Entry in Genesis

The code in this tutorial enables you to add the featured image before the entry on single posts in Genesis.

It displays the image you add to the featured image box on the single posts edit screen before the entry div in any Genesis child theme.

Here’s what the featured image looks like when using the code in the Genesis Sample child theme by StudioPress.

Update : This can now be done using code in functions.php.

add_post_type_support( 'post', 'genesis-singular-images' );

Demo Video

( 1 ) The video shows how the image added to the featured image meta box on the Edit Post screen is displayed flush with the start of the entry div on the front end.

( 2 ) It also shows how a fallback image from the child themes functions.php file is added when a featured image is not added on the Edit post screen.

Code Installation

There’s 2 simple steps :

Step 1 : Using a code editor & FTP, add the following PHP code to the end of your child themes functions.php file.

Step 2 : Add the following CSS rule to the end of your child themes style.css file before the start of the media queries.

.featured-image img {
    vertical-align: bottom;
}

2nd Solution – Include Backup Image

You can also use the following code in replace of the above PHP code. This 2nd snippet enables you to display a fallback image if none added to the featured image meta box on single post edit screens.

add_action( 'genesis_before_entry', 'image_before_entry', 12 );

function image_before_entry() {

if ( ! is_singular( 'post' )  ) {
    return;
}

$default = genesis_get_image( array( 
'size' => 'full',
'format' => 'html',
'attr'   =>  array ( 'alt' => the_title_attribute( 'echo=0' ) )
) );

$featured = sprintf( '<a class="featured-image" href="%s" rel="bookmark">%s</a>', get_permalink(), $default );

$images_url = sprintf('%s/images/default.png', get_stylesheet_directory_uri() );

$backup = sprintf( '

<div class="featured-image"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div>

', get_permalink(), $images_url, the_title_attribute( 'echo=0' ) );

$image = has_post_thumbnail() ? $featured : $backup;

echo $image;

}

In this example, a default image named default.png is uploaded to the child themes images folder.

The PHP code includes a ternary operator to check if the post has a post thumbnail, if so, it uses the featured image otherwise it uses the fallback.

You could also code the ternary like this:

$image = $default ? $featured : $backup;

or like this :

$image = genesis_get_image() ? $featured : $backup;

Related Tutorials

• Add Featured Image Before Single Page Entry Title in Genesis
• If Video Else Featured Image Before Single Post Content In Genesis
• Hero Image On Every Page Type – Genesis