Your archives featured image (Post Thumbnail) will be pulled from the featured image regardless of how you add it on your Edit Post screen.
The image displayed before or after your single post entry title is pulled from the 1st image you insert into the post, unless you remove it.
You can remove or modify the code which displays an image before or after your single post entry titles using one of the code snippets on this page.
If you add an image as a featured image, it will be displayed on your archives as a post thumbnail and not as a featured image after your single posts title.
If you don’t add a featured image, the 1st image in your post will be displayed before or after your single post entry titles as well as on your archive pages.
In this post, i’ll provide you with a few lines of PHP code you can simply paste at the end of your child themes functions.php file.
The code will enable you to display your post image, before or after your title on single posts.
Dan asked this question recently:
Been racking my brain searching around, using different code found in this forum and have resulted to making a new post.
Using Minimum Pro, I would simply like to display a post’s Featured Image in a “single post” page. Preferably above the text content. I’ve found code on this forum and put it in functions.php. It’s displayed the Featured Image, but simultaneously wiped-out the text content. So obviously I’m doing something wrong. 🙂
Note: Please use the last PHP code snippet in this post if you’re running the old XHTML markup and not HTML 5 as the hooks have changed.
Display Featured Image After Title
This code displays the image after your single post title.
add_action( 'genesis_entry_header', 'single_post_featured_image', 15 );
function single_post_featured_image() {
if ( ! is_singular( 'post' ) )
return;
$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
}Display Featured Image Before Title
This code displays you image before your single post title.
add_action( 'genesis_entry_header', 'single_post_featured_image', 5 );
function single_post_featured_image() {
if ( ! is_singular( 'post' ) )
return;
$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
}Display Featured Image on Static Pages
If you also want this to work for static single pages, simply add page to the code like this:
add_action( 'genesis_entry_header', 'single_post_featured_image', 5 );
function single_post_featured_image() {
if ( ! is_singular( 'page' ) )
return;
$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
}Display Featured Image on Static Pages & Single Posts
If you also want this to work for static pages and posts simply add page to the code like this:
add_action( 'genesis_entry_header', 'single_post_featured_image', 5 );
function single_post_featured_image() {
if ( ! is_singular() )
return;
$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
}The position your featured image displays can be determined using the third parameter for positioning priority.
In the above code its simply a matter of changing the 3rd parameter from 5 to 15.
Change Image Size
Here’s an example of using a the large size according to your Media Settings.
add_action( 'genesis_entry_header', 'single_post_featured_image', 15 );
function single_post_featured_image() {
if ( ! is_singular( 'post' ) )
return;
$img = genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) );
printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
}You can also use any of the other default sizes configured in Settings > Media.
- thumbnail
- medium
- large
- full
You can also use any custom sizes you’ve added in your functions file.
Example:
portfolio
add_image_size( 'portfolio', 540, 340, TRUE );Using Old XHTML Loop Hooks
If your still running XHTML and haven’t yet converted to HTML 5, you will need to use the old Loop Hooks:
add_action( 'genesis_before_post_title', 'single_post_featured_image' );
function single_post_featured_image() {
if ( ! is_singular( 'post' ) )
return;
$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
}Adding Space Between Title & Image
Here’s some sample CSS code you can add to the end of your child themes style.css file before the code for Media Queries which adds a margin between your featured image and your entry title on single posts.
.single .post-image {
margin-bottom: 30px;
}Use this sample for pages:
.page .post-image {
margin-bottom: 30px;
}Align Featured Image (post-image) Right
You can also align your post images to the right.
Simply add this CSS code before your Media Queries near the end of your child themes style.css file:
.single .post-image {
float:right;
margin:0 0 1em 1em;
width: 285px;
height: 285px;
}The above code will align the image you add as a featured image in all single posts to the right of your content so its text wrapped like this:
You can also add the alignright class to the PHP code rather than use CSS.
'class' => 'alignright'Simply replace post-image in the PHP code with alignright and your text will wrap around your image on the right hand side of your content.
Align Featured Image (post-image) Left
You can also align your single posts featured images to the left.
.single .post-image {
float:left;
margin: 1em 1em 0 0;
width: 200px;
height: 200px;
}And here’s the result:
You can also add the alignleft class to the PHP code rather than use CSS.
'class' => 'alignleft'Simply replace post-image in the PHP code with alignleft and your text will wrap around your image on the left hand side of your content.
Remove a href Link from Featured Image
A member asked me how to remove the link from the code so here it is:
Simply replace this part of the code:
$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );With this:
$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
echo $img;Related Posts
- 2 Ways To Use Different Featured Images For Single Posts & Archive Pages
- Entry Title Over Featured Image On Single Posts
- Checkbox To Add or Remove Featured Image on Individual Posts or Pages
- Link Featured Image to Custom URL
- Customise The Display of Featured Images On Single Posts
- Add Featured Image Before Content In Any Theme
- Set Fallback Featured Image For Each Category
Leave a Reply
You must be logged in to post a comment.