[Resolved] Page Headers that are flush to content box

[Tom]

Hi again!

I’m trying to achieve the look of blog article headers the way you are doing in this video tutorial…

I’m not having much luck, though. Even though I’ve set Page Header Position to Inside Content Area, there is a margin around the image within the content box. Is there a way to make the image appear flush to the edges as shown in the video tutorial?

Another problem I’m having is that when I enable “Hard Crop” on the header image and set a height of 300 (but leave the width at 0), the entire image is being scaled proportionately to 400 pixels tall and isn’t being cropped at all. What I’d like is what you’ve done in the video tutorial, to crop the image at 400 pixels tall but let the width take up the full content space. It appears there’s an option “Image Crop Position” in the video that I don’t see in my install. I just got the GP Premium package yesterday, so, I’m assuming I have the latest versions of everything. Has this changed since that video was made? If so, any way to get the images flush to the edges like that with other settings?

Thanks!

[Tom]

Hi there,

1. This might help: https://generatepress.com/forums/topic/page-and-post-headers/#post-125452

2. Adding 0 as a height or width will enable proportional resizing. You need to set a width to enable a hard crop.

Image Crop Position was removed as the script wasn’t using core WordPress functions, which I’m not a fan of. It may make a come back with some recent WP developments 🙂

[Tom]

Hi Tom,

Thanks a lot! Got that script installed and now all the images are flush to the container edges.

[Tom]

Awesome 🙂

[Tom]

Hi Tom,

Is there any way to make Page Headers also flush to the edges of the content box like featured images? I’d like to do that on this page of a blog I’m working on: http://blog.kultureshock.net/about/

Thanks!
Tom

[Tom]

You could do something like this:

.page.post-image-above-header .page-header-content {
    margin: -40px -40px 40px;
}

[Tom]

Thank you, Tom, that worked!

[Tom]

You’re welcome 🙂

[Author]

Posts