Polly in the GenesisWP Facebook group wanted to know how Featured images attached to Posts and Pages can be shown automatically above the content in Genesis.
A static Page:
A single Post:
Step 1
Add the following at the end of child theme’s functions.php:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Register a custom image size for Singular Featured images | |
| add_image_size( 'singular-featured-thumb', 800, 250, true ); | |
| add_action( 'genesis_before_entry', 'sk_display_featured_image' ); | |
| function sk_display_featured_image() { | |
| if ( ! is_singular( array( 'post', 'page' ) ) ) { | |
| return; | |
| } | |
| if ( ! has_post_thumbnail() ) { | |
| return; | |
| } | |
| // Display featured image above content | |
| echo '<div class="singular-featured-image">'; | |
| genesis_image( array( 'size' => 'singular-featured-thumb' ) ); | |
| echo '</div>'; | |
| } |
Step 2
Add the following in child theme’s style.css and modify depending on which child theme is active:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .singular-featured-image img { | |
| vertical-align: top; | |
| } | |
| @media only screen and (max-width: 800px) { | |
| .singular-featured-image { | |
| margin-bottom: 40px; | |
| } | |
| } |
[…] my earlier How to display Featured image before entry content on Posts and Pages in Genesis tutorial, a user […]
Just used this on a site and works like a charm! Thanks – as always, you come through with a clear, easy to implement, solution.
Really helpful! Thanks you for explaining this clearly!
Hi Sridhar, is it possible to also include this on the Archive page above the title?
Never mind, I figured out how to do it. 🙂
Can you explain How?
Follow https://sridharkatakam.com/display-featured-image-background-entry-header-archives-genesis/
Hello Sridhar,
I added this to a site I’m working on and all was great. Then I implemented another one of your tutorials :
https://sridharkatakam.com/posts-grid-on-archives-in-genesis/
And discovered that the full sized featured image no longer displays at top of single posts (only a small thumbnail)”
http://www.staging1.pixelhappy.co/build-your-list-the-right-way-with-thrive-leads/
I’ve tried to sort out by comparing the two code snippets added to functions.php but I am not able to see what is causing the issue.
Any chance you can identity this for me?
Thank you. Yael
Code in the posts grid tutorial should have no affect on this.
Does it work if you remove the posts grid code?
Hello,
Thanks, this worked for posts,
but does not show on Custom posts types.
Does need to add something else?
Hi…
I found this code from https://ryantownley.com, and it works too.
//* Display featured image before single post title
add_action( ‘genesis_before_entry’, ‘featured_post_image’, 8 );
function featured_post_image() {
if ( ! is_singular( ‘post’ ) ) return;
the_post_thumbnail(‘post-image’);
}
On tablet and mobile there is a gap before entry content.
I guess you can adjust it with CSS.
This tutorial was written for and tested in Genesis Sample child theme. If you are using a different theme, a few more adjustments might be needed as you have observed.
Hi Sridhar, thanks for the code added the code as described and work well, but It’s also shown at the homepage ( frontpage) and that’s nog what I want how can i disable the front_page
https://bit.ly/2F7HKy6
Before
add
Thank you, it works!