Sridhar Katakam

Genesis and WordPress Tutorials

Featured image below header on Pages and Posts with entry header overlay in Monochrome Pro

by 16 Comments

Updated on March 11, 2018

In the past, I covered Featured image below header on Pages and Posts with entry header overlay in Infinity Pro.

In this tutorial, we shall implement the same in Monochrome Pro's single posts and static Pages i.e., show featured image below the site header and overlay entry header (title on Pages and title + post info on posts) centered.

It should be noted that the image is NOT a background and is inserted/embedded and hence is naturally responsive.

Sample single post:

Sample static Page:

At smaller widths, entry header will be set to appear below the image.

Tested in Monochrome Pro 1.0.

Step 1

Add the following in child theme's functions.php:

// Register a custom image size for hero image on static Pages and single Posts.
add_image_size( 'page-header', 1600, 400, true );

Regenerate thumbnails.

Step 2

Create a file named say, template-pageheader.php in the Monochrome's directory having the following:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • This is awesome Sridhar! Thanks for your help.

    I’m already using the code you wrote to add a Soliloquy slider to Monochrome Pro. Does any of this conflict with the Soliloquy slider code? I just wanted to check before I implement it. Thanks again for all your efforts!

    Reply

  • What do I need to modify if I want the entry header below the image at ALL widths?

    Also, if I want the header image to be taller than 400 px, do I simply modify this code in the functions.php file?
    // Register a custom image size for hero image on static Pages and single Posts.
    add_image_size( ‘page-header’, 1600, 400, true );

    Thanks!

    Reply

    • 1) Delete js/single.post.js

      2) Replace all the code in template-pageheader.php with

      <?php

add_filter( 'body_class', 'custom_body_class' );
/**
 * Adds a css class to the body element.
 *
 * @param  array $classes the current body classes.
 * @return array $classes modified classes.
 */
function custom_body_class( $classes ) {
    // if there is no featured image, abort.
    if ( has_post_thumbnail() ) {
        $classes[] = 'has-page-header';
    }

    return $classes;
}

add_action( 'genesis_after_header', 'custom_page_header' );
/**
 * Show featured image (if present) below site header.
 */
function custom_page_header() {
    // if there is no featured image, abort.
    if ( ! has_post_thumbnail() ) {
        return;
    }

    // display the image and entry header.
    printf( '<figure class="page-header"><img src="%s" alt="%s" /></figure>', genesis_get_image( 'format=url&size=page-header' ), the_title_attribute( 'echo=0' ) );
}

genesis();

      3) Replace the code to be added in style.css with

      .has-page-header .site-inner {
    margin-top: 80px;
}

.page-header {
    position: relative;
}

.page-header:before {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.75);
    content: "";
    pointer-events: none;
}

.page-header img {
    width: 100%;
    vertical-align: top;
}

.page-header + .site-inner .content {
    padding-top: 0;
}

@media only screen and (min-width: 601px) {
    .page-header {
        margin-top: 80px;
    }
}

@media only screen and (max-width: 600px) {
    .admin-bar.has-page-header .site-inner {
        margin-top: 60px;
    }
}

      Also, if I want the header image to be taller than 400 px, do I simply modify this code in the functions.php file?
      // Register a custom image size for hero image on static Pages and single Posts.
      add_image_size( ‘page-header’, 1600, 400, true );

      Yes.

      Reply

  • Hi Sridhar,

    Great tutorial. Is there a way to make the entry header appear over the image even at smaller widths ?

    Thank you.

    Reply

  • I was also wondering how you would modify your ‘Transparent Site Header in Monochrome Pro’ tutorial to work with this tutorial.

    Reply

  • Hey Sridhar, when you get a chance can you check your code at various browser widths. For some reason, the h1 entry-title under the .entry-header element is not left aligned with the body copy at some browser widths. I tried modifying the margin, but I can’t get it to work. Please advise. Thanks!

    Reply

  • Very useful thank you. Quick question if i use a page with the above featured image as the home page, the image does not appear its just styled as a normal page. Is there a simple solution to make it work on home page. Many thanks

    Reply
    • >