[Support request] How does Page Header handle Featured Images?

[Jenness]

All my Featured Images are 1200×500 on all my Pages full size. My site is set to 1200px wide. All my Pages without a Page Header assigned are fine, the full image showing, which is what I want.

I have a Page Header created and chosen on one Page of my site. Add Background Image ticked so the Featured Image is showing. My Featured Image is showing, but I have tried a long horizontal image (1200×500), a square image (1200×1200), and a portrait (714×1000) image. None of the shapes show the full image. I’ve been patiently ticking and unticking boxes (container, inner container, parallax, fullscreen), then refreshing the Page just to see what happens. I can’t figure out what makes the full image appear.

My Content Box has two lines of text in it.

Can you explain or do you have a user guide that explains how the Page Header handles what’s showing of the Featured Image?

[David]

try increasing the padding to expand the container

[Tom]

Can you link me to an example page possibly?

[Stephen]

Hi,

My settings for a full page/width image:

Set the image to 2000px x 500px
Top & Bottom Padding to 20%
Container to Full Width, leave the Inner Container at default
Turn on Add Background Image.

Cheers
Steve

[Jenness]

Mostly, I don’t want to only address this particular page. I want to understand how it works. That said, here goes.

http://www.thegreencheetah.com/portfolio/weber-sanford/

Here’s the settings in Page Header: (forgive me if this doesn’t work; first time using imgur)

Here’s the three images I’ve tried: (yeah, the vertical one is an ugly crop but at that point I was just trying things when I couldn’t get the horizontal one to show the whole image)

Currently, Featured Image is square but I can tell it’s cutting off the top and the bottom because the top of her head is missing and the copyright in the lower left is missing. When fullscreen is unticked, it cuts off the majority of the image. I have fullscreen ticked now because that looks the best currently and I have the client checking in.

I’d rather use my 1200×500 image and have it show the entire image without cutting anything off, and I’d rather not tick fullscreen. I want to match to the rest of my site.

It’s even uglier when I use the horizontal image (the one I want to use). The vertical one cuts off most of the image, too. If you want me to change Featured Image, just LMK. I have to give a heads up to the groom’s mom as she’s checking in today.

I have Top Bar and Primary Navigation ticked in Disable Elements. Maybe that doesn’t factor in but I thought I’d mention in case it does.

[Leo]

Hi there,

Can you try the horizontal image, then turn on Add padding and add some top and bottom padding?

It adds padding to your content and expand your container so it shows more background image.

[Stephen]

Leo, with regards to the Inner Container setting, as best practise would you set that to Full width or Contained?

I ask because if I set the Inner Container to Full Width, which seems logical, the image heightens downwards and becomes taller. If I set the Inner Container to Contained the image stays the true height, I think?

Whats going on here, why does the image expand, seems odd?

Thanks
Steve

[Leo]

What is your (outer) container setting?

Can you maybe start a new topic and link me to the page? Thanks!

[Stephen]

Started new thread – Page Header revisited

Thanks
Steve

[Jenness]

I tried adding padding in 5px increments, and it cuts more off each side the higher the px count added. Also, because I have a background image in Content, it uses that and covers up part of the image.

I had to put it back to square because I have clients looking today and it can’t be jacked up.

[Tom]

As the image is a background image, it will keep its aspect ratio depending on the size of the container it’s trying to fill.

You can tell it to show the entire image, but you’ll see it won’t fill the entire container:

.generate-content-header {
    background-size: auto;
}

If you want the entire image to show, you’ll need to adjust the aspect ratio of the image to work with the size of the container. Of course, that won’t even be perfect as people have different sized screens etc..

[Author]

Posts