This tutorial provides the multiple ways to show the featured image on single post page including custom post types with various settings, positioning, and styling.
METHOD 1
The Plugin way.
The simplest solution is to use Display Featured Image for Genesis plugin by Robin cornett. Robin is a great Genesis developer and i love using her amazing plugins includes this one and superside me.
STEP 1
Install and Activate the Plugin.
STEP 2
Go to > Appearance > Display Featured Image for Genesis and Make the Changes and Tweaks.
Robin also introduces additional customizations using two more hooks.
METHOD 2
The functons.php way.
TYPE 1
Just featured image without a href link includes custom image-size and CPT support.
// Register a custom image size for Singular Featured image.
add_image_size( 'singular-featured-thumbnail', 960, 350, true );
//Display Featured Image Before Title
add_action( 'genesis_before_entry', 'wpize_display_featured_image' );//You can change location genesis_before_entry
function wpize_display_featured_image() {
if ( ! is_singular( array( 'post', 'page' ) ) ) {//Post Types:- add one of your CPT if you want..
return;
}
if ( ! has_post_thumbnail() ) {
return;
}
// Display featured image above content.
echo '<div class="singular-featured-image">';
genesis_image( array( 'size' => 'singular-featured-thumbnail' ) );
echo '</div>';
}
Change genesis_before_entry hook to other using Genesis Visual Hook Guide to move the featured image to a different location.
with link.
// Register a custom image size for Singular Featured image.
add_image_size( 'singular-featured-thumbnail', 960, 350, true );
//Display Featured Image Before Title
add_action( 'genesis_before_entry', 'wpize_display_featured_image' );//You can change location genesis_before_entry
function wpize_display_featured_image() {
if ( ! is_singular( array( 'post', 'page' ) ) ) {//Post Types:- add one of your CPT if you want..
return;
}
if ( ! has_post_thumbnail() ) {
return;
}
// Display featured image above content.
echo '<div class="singular-featured-image">';
printf('<a href="%s" class="featured-image">', get_permalink() );
genesis_image( array( 'size' => 'singular-featured-thumbnail' ) );
echo '</a></div>';
}
TYPE 2
Featured image without a href link includes custom image-size and CPT support with additional featured image control.
//display featured image on singular posts.
add_action( 'genesis_before_entry', 'custom_display_featured_image' );
function custom_display_featured_image() {
if ( ! is_singular( array( 'post', 'page' ) ) ) {//Post Types:- add one of your CPT.
return;
}
if ( ! has_post_thumbnail() ) {
return;
}
// Display featured image above content.
echo '<div class="singular-featured-image">';
$image = genesis_get_image( array( 'format' => 'url', 'size' => genesis_get_option( 'image_size' ) ) );// find more -> genesis/lib/functions/image.php
printf( '<img src="%s" alt="%s" />', $image, the_title_attribute( 'echo=0' ) );
echo '</div>';
}
Change genesis_before_entry hook to other using Genesis Visual Hook Guide to move the featured image to a different location.
It uses image size from here Genesis > Theme Settings > Content Archives > Featured image. Take help of TYPE 1 or continue reading to Change Image Size.
TYPE 3
Featured image with a href link includes custom image-size and CPT support with additional featured image control.
//display featured image on singular posts with post link.
add_action( 'genesis_before_entry', 'custom_display_featured_image_link' );
function custom_display_featured_image_link() {
if ( ! is_singular( array( 'post', 'page' ) ) ) {//Post Types:- add one of your CPT.
return;
}
if ( ! has_post_thumbnail() ) {
return;
}
// Display featured image above content.
echo '<div class="singular-featured-image">';
$image = genesis_get_image( array( 'format' => 'url', 'size' => genesis_get_option( 'image_size' ) ) );// find more -> genesis/lib/functions/image.php
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>');
echo '</div>';
}
Change genesis_before_entry hook to other using Genesis Visual Hook Guide to move the featured image to a different location.
It uses image size from here Genesis > Theme Settings > Content Archives > Featured image. Take help of TYPE 1 or continue reading.
Styling
You can start with this.
.singular-featured-image img {
margin-bottom: 30px;
width: 100%;
height: auto;
}
Change Image Size
This is not required but recommended to define the image size.
//register a custom image size add_image_size( 'singular-featured-thumbnail', 960, 350, true );
//custom post type size add_image_size( 'portfolio', 1024, 500, true );
Once You have defined it, Give it to the function to do the work.
size' => 'singular-featured-thumbnail'
OR
size' => 'portfolio'
Image Output Customization
genesis_get_image(
array( // more options here -> genesis/lib/functions/image.php
'format' => 'html',
'size' => 'large',// add in your image size large, medium or thumbnail - for custom see the post
'context' => '',
'attr' => array ( 'class' => 'aligncenter' ), // set a default WP image class
)
);
or something like this
genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) );
You can also use any of the other default sizes configured in Settings > Media.
thumbnail
medium
large
full
You can also add the alignleft class to the PHP code rather than use CSS.
'class' => 'alignleft'
Using Custom Image Sizes
For any image sizes outside of thumbnail, medium or large you need to pass in the size and crop values in an array like this…
size => array(500, 250, true),
This pass in width, height and whether or not to hard crop; true for yes and false for no.
This will give you a simple idea to make the featured image more awesome on the single post, page. You can change the location of the image, change the image size, make it float left or right and can do more.
You can use conditional tags and return early function to make it more awesome for each post, page or CPT.
Featured Image on Post page Archive
The above snippets will not work. You should use this if you want the featured image to appear on Blog Post page archive too.
// add featured images on post page.
add_action( 'genesis_after_header', 'post_page_featured_image', 15 );
function post_page_featured_image() {
if ( ! is_home() ) {
return;
}
// Display featured image
echo '<div class="featured-image">';
$page_for_posts = get_option( 'page_for_posts' );
echo get_the_post_thumbnail($page_for_posts, 'full');
echo '</div>';
}
Reference: https://halfelf.org/2014/gensis-post-title-on-featured-image/ , https://wpbeaches.com/add-featured-image-top-page-genesis/