• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

How to display Featured Image on Single Post or Page in Genesis

Last Updated on July 18, 2018 Favorited: 1 times

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/

  • http://genesisdictionary.com/featured-image/

Related Posts

  • Post list design showing featured image when hovered in Genesis
  • Hero Section with Full Width Titles in Genesis
  • Replicate Single Post Design of Monochrome Pro in Genesis Sample
  • Single Post design having background image, title and other meta info in Genesis Sample
  • Showcase Pro Site Header and page header in Genesis

Categories: Free Content, Genesis Tutorials Tags: Featured Image, genesis_get_image, genesis_image()

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service