[Resolved] Overlay post title on featured image

Home Forums Support [Resolved] Overlay post title on featured image

Home Forums Support Overlay post title on featured image

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #547243
    Lewis

    Hi

    I’m trying to work out how to overlay the post title over the blog posts featured image, like this;

    https://theculturetrip.com/asia/indonesia/articles/saving-the-planets-lungs-in-borneo/

    I’ve tried using the header function in GP, but that makes the featured image much larger.

    I currently have a similar layout to the above, where I’d like to keep the sidebar to the side of the featured image.

    Is this possible easily using GP?

    #547269
    Jamal

    Hi

    Have you tried page header template tags ? You can paste this into your page header content

    <h1> {{post_title}} </h1>

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #547392
    Lewis

    Thanks for the reply

    Yes using that tag outputs the post title, but if you use Page Header, it makes the featured image much larger

    #547403
    Jamal

    In that case what you want to do is remove top and bottom margins on H1. This should work for you

    <h1 class="h1-no-margin" > {{post_title}} </h1>

    And the below css

    .h1-no-margin {
        margin-top: 0;
        margin-bottom: 0;
    }

    Adding css: https://docs.generatepress.com/article/adding-css/

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #548078
    Lewis

    Thanks again for the reply.

    The above code & css is still making the featured image the full width of the page

    #548130
    Jamal

    Sorry my bad. Can you go “Customize > Layout > Page Header” and set the page header location to inside content area.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #548134
    Lewis

    Thanks again, that’s almost done the trick, this is so close.

    Is it possible to set the image dimensions too? As now my featured image is just showing a small, thin section of the image (and not the full image).

    I really appreciate the help on this, thanks again for your time.

    #548140
    Jamal

    No problem it’s a pleasure to have been of help. Regarding image dimensions, will you mind first removing the css i gave you in this post and lets see if that works alright.

    Otherwise can you set a size for the image https://docs.generatepress.com/article/page-header-image/

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #548151
    Lewis

    I’ve removed the CSS, but the image still remains small.

    Even if I select an image in Page Headers and manually set the dimensions it remains the small (narrow height) size.

    The featured image basically becomes the same height as the H1 text

    #548197
    Jamal

    Might be because you have not selected to add padding to the page header content? https://docs.generatepress.com/article/page-header-content/

    Activating the “add padding” option will add padding equivalent to your site content padding, usualy 40px. You can as well chose to add a bigger top and bottom padding to make the displayed image larger.

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #548214
    Lewis

    Thanks, that’s sorted it

    Once again, really appreciate you helping with this

    #548490
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.