Page Header Image Crop Position

[David]

It would be awesome if users could choose position of the Page Header Image with some options like these:

Top Left
Top Center
Top Right
Center Left
Center Center
Center Right
Bottom Left
Bottom Center
Bottom Right

[Tom]

Currently we use the core WordPress methods to resize images, and WordPress doesn’t allow for crop positioning.

It’s something I’ve looked at, but usually requires going with a more robust cropping solution which is usually super buggy and unreliable.

Hoping WordPress introduces these options in the near future 🙂

[David]

How about the position of the Page Header image using background-position property?

[Tom]

That could be do-able.

The Page Header metabox needs some serious design/organization love – it’s high on my list.

I’ll see if I can cook something like this in there when I re-do it.

[David]

Very cool. You rock!

[Wayne]

Was this ever resolved?

[Tom]

WordPress still doesn’t offer these options, but if you resize/crop your image inside the Media Library you can choose your crop position.

The rebuild for Page Header has started but won’t be ready for a few versions 🙂

[Mizanur]

Opps, David already suggested this. I have similar request. Cheers.

[Jessica]

I’m having this issue as well – I have a full sized image (using the page header add-on) which looks fine on a full desktop/laptop screen, but the responsiveness is non-existent. Even if I set it to ‘background-position: center center;’ once it’s gets down to a smaller screen, it’s the same original height which is essentially 3 full mobile phone screens worth of image and you can’t see it. The image itself is the crucial part of the content.

In my child theme, I created in my stylesheet:

background-size: contain;
background-repeat: no-repeat;

but then I have about 900px on top and bottom of the image once it’s starts to size down for mobile/responsive.

“Contain” seems to be the way to get the image to respond flexibly to the viewport width but how do I get rid of the 2000px above/below?

[Jessica]

I got it. I removed the “header addon” and created a section, using this image as the background image.

I added the following styles:
`width: 100vw;
height: 60vw;
background-position: center center;`

and it’s working perfectly as desired.

However: When I do the same using the header addon (same style attributes), there is no resizing (as above) and there’s still a massive amount of padding underneath.

Am I missing something?

[Tom]

What’s the background-size set to in the page header?

Interested that using viewport width units makes the background images responsive.

[Jessica]

Tom:
Here’s what I did (using vh / vw) to get the responsive background image:

1. In my 1st created section, I added my hero image to the background (regardless of what I put on top of it – for now, I needed it to respond).
(Positioning the styled feature headline on top of it will be a whole other activity.)

2. I gave the section a custom class of (in this case) “elephant”.

3. In my child theme stylesheet, I created a class:
.elephant {
height: 80vh;
background-position: center center;
}
(I started by using “100vw” but I was getting about 20px added on the right. So I swapped to “vh” and VIOLA!)

It was a little trickier with the header addon. I added “!important” tags to the “.vertical-center-enabled” class – but I’m not sure what else that would affect so this seemed more isolated and controlled. Perhaps that would create all header images to take on the 80vh attribute, but that’s what I ‘m going for. I just wanted the hero image on the homepage to take it on.

For now, my homepage hero image is 100% responsive and flex – No additional media queries necessary.

I’m almost done with the site so when it’s done I’ll send you a link to show you what I’ve done.

[Tom]

That’s awesome, thanks for sharing your method 🙂

[Jessica]

Sure thing! I’m making a lot of progress and almost done so I’m excited to show you what I’ve done! Stay tuned!

[Jessica]

Wanted to give you an updated solution to my full-width resizing header issue:

Since I have created custom post types, I am not able to use the post types/meta boxes if I use the “sections” add-on. So, I switched back and used the “headers” add-on and dug deeper.

I got the same effect by adding a few extra classes to my child theme stylesheet:

.generate-inside-page-header-content {
text-align: center;
height: 60vh;
}
.separate-containers .generate-content-header {
background-position: center bottom;
}

The effect is the same and works perfectly. Image is full-width, and resizes according the screen/device.
The only difference is that there isn’t an area to indicate what custom classes (like you can in the sections area), however this reduces the need for adding a custom class so anytime I want to create a header images like this, it will automatically kick in. (hope that makes sense).

Thus: the “featured image” is no longer needed. A little frustrating since featured images are standard for WP.

[Author]

Posts