[Resolved] Display “Banner Image” Below Header on home page

Home Forums Support Display “Banner Image” Below Header on home page

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1480390
    Shayne

    Hey, I have searched for this and found a page that explained how to do this with the Page Hero elements.

    I set it up as shown in the screenshots below, but it is not showing. What am I missing?

    I have the default GeneratePress theme. The website is currently “staging”

    CURRENT WEBSITE:
    Current website, OLD THEME

    STAGING:
    Staging version with default GeneratePress theme

    PAGE HERO SETTINGS:

    Any help would be greatly appreciated. Thank you

    #1480834
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try adding some top and bottom padding in the page hero?

    Let me know πŸ™‚

    #1480850
    Shayne

    That seemed to have done the trick. I had to add 400px padding at the top.

    #1480877
    Shayne

    Thank you!

    #1480921
    Leo
    Staff
    Customer Support
    #1481305
    Shayne

    Any tips to make it look decent on mobile?

    Staging

    Old Theme

    #1481370
    Leo
    Staff
    Customer Support

    I’m guessing your old site is using static image (response) as opposed to the background image (not responsive) in page hero.

    If you are not adding any content on top of the image, then you can just use the featured image option:
    https://docs.generatepress.com/article/adding-featured-images/

    If this doesn’t help, can you link me to the page in question?

    #1481421
    Shayne

    Would this work to only display it on the home page? If so, I am not sure how to do so as the only “pages” I have are contact & privacy policy.

    #1481844
    David
    Staff
    Customer Support

    Hi there,

    you can use % top and bottom padding.
    First calclulate the original image aspect ratio ie.

    Height(px) / Width(px) * 100 = %

    Now add that as you combined top and bottom padding.
    Ef. if the aspect ration is 56% then set top and bottom to 28% each.

    This will keep the header image responsive.

    #1482533
    Shayne

    Ok, so I tried this and got it to look decent on mobile, but it’s weird on desktop. This is the math I did:

    image is 422 x 1200

    (422/1200)*100 = 35.17

    On mobile I set this:

    Looks like this:

    on desktop when I choose these settings:

    I get this:

    Thanks

    #1482706
    Leo
    Staff
    Customer Support

    Can you link us to the page in question?

    #1482785
    Shayne

    Yes, thank you:

    https://staging.adventureblog.net/

    You will get an SSL error as this in on staging and I don’t have an SSL cert installed for the staging sub domain.

    #1483109
    David
    Staff
    Customer Support

    For Desktop you will need to use Pixel Padding to size the image. As the % method i provided only applies when the Featured Image spans full width.

    #1484768
    Shayne

    Is there a calculation for how much padding (pixels) I should use for desktop too? I can get it to look good on my laptop, but on other resolutions, it cuts off pretty badly.

    #1484858
    David
    Staff
    Customer Support

    As there is no content for your image it may be easier to remove the background image and all the padding and add this to the content:

    <img class="hero-image" src="full_url_to_your_image/image.jpg" />

    just update the URL and make sure the original image is the width of the hero element.
    This will then display the full image regardless of screen size.

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