Sridhar Katakam

Genesis and WordPress Tutorials

Hero section in Dynamik with Title overlay on Featured image in Pages and Posts

by 8 Comments

In the members-only support forum, a user wanted to know how the title can be displayed on top of featured image below the header in Dynamik like this:

dynamik-featured-image-background-hero-title

In this tutorial I show how Featured image (if present) for singular entries can be set as background for a hero section with the entry title appearing on a dark overlay near the bottom of image. If an entry does not have featured image set, it will continue to appear in the regular way.

Summary of steps:

  1. Create a new conditional that says "if this is a singular entry having a featured image".
  2. Add a custom hook box to hook a function having the code to check for the above conditional and if true, remove the title from its default location and add a hero section with background-image inline CSS property set to the entry's featured image.
  3. Add the needed CSS so the featured image is fills the hero section.

Step 1

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

Already a member? Log in below or here.

  • Thanks, Sridhar! It worked! Quick question regarding mobile displays. At the moment, the images on my iPhone are not resizing to fit the screen. What CSS should I place in the responsive tab within Dynamik for this to bet fixed according to each media size?

    This is the current test site where I tried it: http://nomadpursuits.com

    Reply

  • HI Sridhar –

    I’m trying to contact you through the Paid Support, but I’m having problems with my subscription, so I can’t reach you there at the moment. Would you be able to verify why the subscription got automatically canceled after 2 days in?

    Regarding the tutorial, I tried adding the CSS you replied with:

    @media only screen and (max-width: 375px) {
    #hero {
    background-size: auto;
    }
    }

    I changed “auto” to absolute, relative, fixed, static, cover, and specific dimensions, but it is still not working properly on mobile.

    Here are two screenshots of how it is looking.

    Vertical on the iPhone, it does not show the image: http://www.globotreks.com/wp-content/uploads/2015/07/IMG_5102.png
    Horizontal on the iPhone, it shows the image but completely blurred since it is not scaled down: http://www.globotreks.com/wp-content/uploads/2015/07/IMG_5103.png

    Reply

      • Thanks, Sridhar! Yes, I’ve been playing with the @media CSS (max 479px) for the past couple hours and managed to make the background look fine according to size. BUT, I’m still having trouble with the alignment of the gradient overlay and the title. In the desktop version, the title, as it gets longer, the additional lines of text are placed above, not below the current placement. On mobile, each additional line of text stacks under, so they overflow the featured image and overlap the white background of the content.

        I’m trying to achieve the same effect as on desktop, but haven’t figured it out yet.

        At the moment, I have this CSS on @media (max 479px)

        #hero {
        padding-top: 0px;
        background-attachment: scroll;
        background-repeat: no-repeat;
        height: 230px;
        background-size: cover;
        -webkit-background-size: cover;
        }

        #hero .entry-title {
        font-size: 30px;
        padding-top: 32%;
        padding-bottom: 0px;
        }

        .overlay {
        padding-top: 0px;
        padding-bottom: 0px;
        height: 100%;
        }

        The only concern I have with this is that while long titles might fit well, short titles float around the middle of the image, so they don’t receive good contrast from the black gradient.

        Reply

  • Nevermind. I got the word Home out. How to exclude the homepage on this? I tried “not frontpage” in the conditionals, but I must have syntax wrong. And can the image come in at 400px height? Thanks.

    Reply
    • >