GPP Navigatior – Page hero container width & galleries

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Bernhard]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

I made a correction to the CSS here

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Bernhard]

Very good, thank you 🙂

[David]

Glad we could be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts