[Resolved] Overlay post title on featured image

[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?

[Jamal]

Hi

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

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

[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

[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/

[Lewis]

Thanks again for the reply.

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

[Jamal]

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

[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.

[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/

[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

[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.

[Lewis]

Thanks, that’s sorted it

Once again, really appreciate you helping with this

[Leo]

Thanks Jamal 🙂

[Author]

Posts