[Resolved] GPP Navigatior – Page hero container width & galleries

Home Forums Support GPP Navigatior – Page hero container width & galleries

  • This topic has 11 replies, 3 voices, and was last updated 1 year ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1120742
    Bernhard

    Hello,
    (1) I have loaded the GPP Navigator template and configured page hero following sample 4 in the page hero examples.
    My problem is, that the backgorund (=featured) image is scaled to full width and the full height is cut – the size of all images on the site is 900×600 px. Images for no reason shall be scaled bigger than the original, only scaled down for smaller screens.
    In the sample, I have set Offset Site Header Height to 400 px but then image height seems to be more or less doubled and the image is cut on the sides.
    The background image shall be shown with a predefined height (eg. 400 px) and with max width 900 px aligned with the slider below.
    Container and inner container are set to contained, but this seems not to apply.
    (2) In the GPP Navigator sample pages are galleries defined but I don’t see how and where they may be configured.
    Thank you

    #1120766
    David
    Staff
    Customer Support

    Hi there,

    1. Header Elements ( Page Heros ) add the Featured images as backgrounds and are designed so the image fills the container provided. Are you looking to overlay text over the image?

    2. The Galleries were created using the built in WP Gallery – if you’re using the Block editor then you can simply replace them with the Gallery Block.

    #1120820
    Bernhard

    Hi David,
    (1) yes. And possibly parallax. I disabled now the page hero element and the featured image is aligned as you explained in my support request about featured image size.
    Now I would like to overlay something like

    <h1>{{post_title}}</h1>
    {{custom_field.sub-heading}}

    an possibly add a parallax effect.
    (2) I use the Classic editor. Is there a direct way to access WP Gallery or shall I use the text editor?

    #1121102
    David
    Staff
    Customer Support

    1. Hmmm – i am not sure what the best way to do this with your current site layout.
    Can you link me to a post where you have the featured image background and the overlay content ? I can then look at what CSS would be required.

    2. In the Classic Editor – when you select Add Media – you are provided the choice to Add a Gallery instead of a single image.

    #1121200
    Bernhard

    Hi David,
    (1), ok, here it is with page hero (background + overlay), here it is without.
    (2) ok, thank you πŸ™‚

    #1121253
    David
    Staff
    Customer Support

    Try this CSS to restrict the hero image to 900px max width and with the same white space around it as the content:

    .page-hero.grid-container {
        max-width: 900px;
        margin-left: 60px;
        margin-right: 60px;
    }
    @media (max-width: 768px) {
        .page-hero.grid-container {
            margin-left: 30px;
            margin-right: 30px;
        } 
    }

    You will need to adjust the top / bottom % padding for the header element to keep the aspect ratio.

    #1121283
    Bernhard

    Hi David,
    you are really great. I want to thank you so much for your support. I know, I have a lot of questions but everytime you give me the perfect solution.

    Just one question: Is it possible to define the initial vertical position of the title (I would like to have it below or above the face of our “Jesus”)?
    Thank you

    #1121334
    Leo
    Staff
    Customer Support

    You can move that title by adjusting the top and bottom padding options in the page hero settings.

    See the illustration here:
    https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content

    #1121493
    Bernhard

    Perfect. Thank you.

    I found now the featured image does not resize on mobile as expected. It is bigger than the images in the slider and cut on the sides. Is there something I can do?

    #1121635
    David
    Staff
    Customer Support

    I made a correction to the CSS here

    #1121651
    Bernhard

    Very good, thank you πŸ™‚

    #1121658
    David
    Staff
    Customer Support

    Glad we could be of help

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