How to display full width Featured image below Header in Minimum Pro

A reader mailed me today:

I would like to add a different full-width image, to every inner page, below the header, in Minimum Pro.

In this article I show how we can show featured image (if present) on single Posts and Pages below the .site-header in Minimum Pro. We are going to center the featured image and set its width to 100% so it fills the full page.

Screenshots:

A particular single Post:

Dusk

A static Page:

sample-page

Add the following in functions.php:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
<?php
//* Do NOT include the opening php tag
 
/**
* Get featured image markup.
*
* Only when the single Post or Page has a featured image, and only when
* showing the first page when the Page or Post is divided into multiple
* pages using next page quicktag.
*
* @author Sridhar Katakam
* @author Gary Jones
* @link http://sridharkatakam.com/display-featured-image-header-minimum-pro/
*
* @return string|bool Image markup if image could be determined
*/
function sk_get_featured_image() {
// Uncomment the lines below if you want to limit to *just* featured
// images, and not fallback to first-attached images.
// if ( ! has_post_thumbnail() ) {
// return;
// }
 
if ( ! is_page() && ! is_single() ) {
return;
}
 
if ( (int) get_query_var( 'page' ) > 0 ) {
return;
}
 
// If post has no featured image, it will attempt to fallback to
// first-attached image if the first conditional in this function
// is commented out.
return genesis_get_image( 'class=aligncenter' );
}
 
add_action ( 'genesis_after_header', 'sk_featured_image', 9 );
/**
* Display Featured image after header.
*
* Only on the first page when the Page or Post is divided into multiple
* using next page quicktag.
*
* Scope: static Pages and single Posts.
*
* @author Sridhar Katakam
* @author Gary Jones
* @link http://sridharkatakam.com/link-to-your-tutorial
*/
function sk_featured_image() {
if ( $image = sk_get_featured_image() ) {
echo '<div class="my-featured-image">' . $image . '</div>';
}
}
view raw code.php hosted with ❤ by GitHub

(Alternate code)

and the following in style.css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
.my-featured-image {
margin-top: 60px;
}
 
.my-featured-image img {
width: 100%;
margin-bottom: 0;
}
 
.my-featured-image + .site-tagline {
margin-top: 0;
}
 
@media only screen and (max-width: 1023px) {
 
.my-featured-image {
margin-top: 0;
}
 
}
view raw style.css hosted with ❤ by GitHub

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 416 other subscribers

Donate

Found this article helpful?

Comments

  1. says

    Thank you so much! This advice, as well as the

    How to remove site tagline section in Minimum Pro

    as well as the

    How to push Footer all the way down when there’s little content in Genesis

    has been of utmost value to me the last days. I’m so grateful.

    Testing your code for How to remove site tagline section in Minimum Pro I see that it also is better than the original Minimum (non html5) theme code where I had to choose a 1600x600px image. Now I can choose whatever image and it will adjust to the full width.

    One question: To me it seems like the space below the Featured full width image and the following content becomes too long – it looks as that space is the same as the space earlier occupied by the Tagline area. Am I right? How can this be adjusted?

      • says

        Thanks! That did it.

        I also want to share something I learnt some months ago by contacting StudioPress support. I had found it a bit ugly to see the header flicker side-wards between the Minimum theme’s pages with and the pages without the full-width featured image.

        I learnt that this the header’s flickering behavior was caused by short pages where WP first thinks scrolling isn’t necessary, until it realizes that it also has to add a image on top, and when switching between short and long pages.

        For me the solutions for a steady site header was to force vertical scroll on every page, like this:

        body {
        overflow-y: scroll;
        }

  2. says

    Hi there.

    This is an excellent idea, the only problem is that you wont keep dimensions throughout in your global settings. This means if you have different image sizes, every page and every post will look different.

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>