Sridhar Katakam

Genesis and WordPress Tutorials

How to overlay entry title on featured image in single Posts

by 34 Comments

In Genesis Facebook group a user asked:

Hello friends, I was able to move my entry-header outside the loop and make it full width, thanks to Sridhar Katakam! However, I’d like to take my featured image outside the loop (preferably above the entry-header).

Here’s what it currently looks like: http://leaguewp.com/web-hosting-service-guide/

Here’s how I’d rather it appear on single post: http://www.nab.com.au/personal/learn/managing-your-debts/pay-less-interest-on-your-home-loan-with-100-percent-offset

I’d appreciate any help. Thanks in advance!

In this tutorial we shall

  • add a div.post-hero below header on single Posts and set the featured image as its cover background.
  • use a fallback image from the images directory if there’s no featured image set
  • display the entry title inside the div and remove it from the entry header

genesis-entry-title-on-image

Step 1

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

// Register a custom image size for hero images on single Posts
add_image_size( 'post-image', 1600, 400, true );
add_action( 'genesis_after_header', 'sk_hero_image' );
function sk_hero_image() {
// if we are not on a single Post, abort.
if ( !is_singular( 'post' ) ) {
return;
}
// set $image to URL of featured image. If featured image is not present, set it to post-image.jpg in child theme's images directory.
if ( has_post_thumbnail() ) {
$image = genesis_get_image( 'format=url&size=post-image' );
} else {
$image = get_stylesheet_directory_uri() . '/images/post-image.jpg';
} ?>
<div class="post-hero" style="background-image: url('<?php echo $image; ?>')">
<div class="wrap">
<?php genesis_do_post_title(); ?>
</div>
</div>
<?php
// Remove entry title
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
}
view raw functions.php hosted with ❤ by GitHub

Upload your desired fallback image to child theme’s images directory having the name of post-image.jpg.

Step 2

Regenerate thumbnails.

Step 3

Add the following in child theme’s style.css:

.post-hero {
padding: 200px 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.post-hero .entry-title {
margin-bottom: 0;
color: #fff;
background-color: rgba(0,0,0,.75);
padding: 15px;
text-transform: uppercase;
max-width: 50%;
}
@media only screen and (max-width: 1023px) {
.post-hero .entry-title {
max-width: none;
}
}
view raw style.css hosted with ❤ by GitHub

  • if we wanted to do this on pages, is there as simple substitution, like “pages” for “posts” ?

    Reply

  • Hi Sridhar, can you look here, http://petreleo.com/toolkit/contact-us/
    I added code just as above, with “page” instead of “post” but no image, I did add the default image to images folder as well as all css

    // Register a custom image size for hero images on single Posts
    add_image_size( ‘post-image’, 1600, 400, true );

    add_action( ‘genesis_after_header’, ‘sk_hero_image’ );
    function sk_hero_image() {
    // if we are not on a single Post, abort.
    if ( !is_singular( ‘page’ ) ) {
    return;
    }

    // set $image to URL of featured image. If featured image is not present, set it to post-image.jpg in child theme’s images directory.
    if ( has_post_thumbnail() ) {
    $image = genesis_get_image( ‘format=url&size=post-image’ );
    } else {
    $image = get_stylesheet_directory_uri() . ‘/images/post-image.jpg’;
    } ?>

    <div class="post-hero" style="background-image: url('’)”>

    <?php
    // Remove entry title
    remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
    }

    Reply

  • My BAD! I had not saved my functions.php (with “page”) , a little birdie told me to check it and , all is well, thanks for this amazing effect!!

    Reply

  • Thanks very much for sharing this, Sridhar! I’m just beginning learning PHP and find this to be very helpful in understanding (for the first time) the logic behind the code!

    What if I wanted the entry background effect on pages AND posts, but not the homepage? I’ve found that I can get it on both by entirely removing
    if ( !is_singular( ‘page’ ) ) { return; } – but that also adds my most recent post title to the homepage just below the header.

    Any suggestions are TRULY appreciated, and thanks again!

    Reply

    • Try

      // if this is the front page, abort.
if ( is_front_page() ) {
    return;
}

// if we are not on a single Post or a static Page, abort.
if ( ! is_singular( array( 'post', 'page' ) ) {
    return;
}
      Reply

      • Thanks very much Sridar! I’ve gotten everything working perfectly. The second part of your argument above wanted to crash the PHP, but removing it and a few minor tweaks worked! Now… one more question – is it possible to add a gradient overlay over the post-hero in CSS? I’ve tried a few different ways, but nothing that’s working correctly. Would a different style have to be called from php or am I just missing something obvious?

        Many thanks again,
        Rob

        Reply

      • Thanks Sridhar, very useful stuff!
        Is it possible to nullify the effect in a specific page?
        In my case is the archive page, I’ve tried to use “is_archive()” function but it doesn’t work (I probably make some mistakes, I’m not very good with PHP!) .
        Thanks
        Michel

        Reply

  • HEY! Nevermind – I figured it out… super simple and works perfectly. Just changed the PHP to:

    <div class="post-hero" style="background-image: linear-gradient(90deg, rgba(25, 81, 118, 1.0), rgba(25, 81, 118, 0.6)), url('’)”>

    Thanks for all you do, Sridhar!!!

    Reply

  • Hi Sridhar,
    I am trying to get the full width responsive background hero image under the header out of featured image on my pages (sorry it’s a mouthfull) – so basically everything here but not moving the title. And I need that .post_hero class to be populated with video bg on one of the pages (as you explained at another tutorial – Thank You!). I kinda made it work, but was wondering if there is a better way, especially since i am getting 200px margin on the bottom I am not sure how to get rid off – I am customizing Infinity Pro, so made the same size as front page images and regenerated – it’s stil l local
    Would love to see a ‘proper’ take on it. Thank you

    Code below
    [code]
    // Register a custom image size for hero images on single Posts [d*]
    // https://sridharkatakam.com/overlay-entry-title-featured-image-single-posts/

    add_image_size( ‘post-image’, 1600, 500, true );

    add_action( ‘genesis_after_header’, ‘me_hero_image’ );
    function me_hero_image() {
    // if this is the front page, abort.
    if ( is_front_page() ) {
    return;
    }

    // if we are not on a single Post or a static Page, abort.
    if ( ! is_singular( array( ‘post’, ‘page’ ) ) {
    return;
    }
    // set $image to URL of featured image. If featured image is not present, set it to post-image.jpg in child theme’s images directory.
    if ( has_post_thumbnail() && is_page() ) {
    $image = genesis_get_image( ‘format=url&size=post-image’ );
    } else {
    $image = get_stylesheet_directory_uri() . ‘/images/post-image.jpg’;
    } ?>

    ')">

    </div>

    <?php
    // Remove entry title
    remove_action( 'genesis_entry_header', 'genesis_do_widget' );

    }
    [/code]

    Reply

      • This works amazing! Love the simplicity and thanks for the tutorial!
        However, now I’ve lost my class for a video background for one of my pages. Using just a container class + video background plugin was so simple, now i need to find a way to register a new div under the header for the video page. Using a video bg inside is not really a thing, right?
        And there is stilll that lingering 73 px bttom margin, I figure it’s somehow .site-header related (though i changed it’s height to accomodate a different format logo)…
        Hard at work…
        Thank you again!

        Reply

          • http://desinessame.wpengine.com/about/
            user: demo
            ps: jensus
            sorry for the password thing, just moved it out of local

            As far as I can see it’s somehow related to the .site-header height (since i was trying to add padding there – and the bottom white “expanded” accordingly to height+padding-top+padding-bottom)

            Do you have any tutorial as to how to deal with the Image Logo in Infinity Pro?
            I really needed that scrolling background changing effect – that apparently is not working with a custom (not textual) logo, especially one a more square format needing much more height…

            Thank you!!!

  • One other comment, Srid:
    //set $image to URL of featured image. If featured image is not present, set it to post-image.jpg in child theme’s images directory.
    this only works if I have the image uploaded both to the media library, AND the /images folder.
    Is this as intended?

    Reply

    • No, it should not behave that way.

      The code is set to first look for featured image of the Post. Only if it is not present will it fetch the image from child theme’s images directory.

      Reply

  • Hi bro thanks for this great tutorial ! Can you make a tutorial on making CATEGORY overlay on featured image for the blog display page

    Reply

  • Hi, and thanks for this tutorial.

    I’m using Parallax Pro and was wondering if it’s possible to move the .entry-header (entry-meta) to below the post title in the hero image?

    Many thanks
    Dave

    Reply

  • Hi Sridar – me again!

    So I’ve just added a search to my site, and the results page is not displaying the entry title for matched results. See http://143.95.230.103/~k12staging. (search icon at top right).

    I suspect this is related to this part of the functions.php modification:
    // Remove entry title
    remove_action( ‘genesis_entry_header’, ‘genesis_do_post_title’ );

    Can you give me any guidance on how I can get them to show?

    Many thanks!

    Reply
    • >