Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support How does Page Header handle Featured Images?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #384918
    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?

    GP Premium 1.4.3
    #384973
    David
    Staff
    Customer Support

    try increasing the padding to expand the container

    #385041
    Tom
    Lead Developer
    Lead Developer

    Can you link me to an example page possibly?

    #385197
    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

    #385499
    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.

    #385654
    Leo
    Staff
    Customer Support

    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.

    #385792
    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

    #385975
    Leo
    Staff
    Customer Support

    What is your (outer) container setting?

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

    #386356
    Stephen

    Started new thread – Page Header revisited

    Thanks
    Steve

    #386578
    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.

    #386700
    Tom
    Lead Developer
    Lead Developer

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.