- This topic has 11 replies, 3 voices, and was last updated 1 year ago by
David.
-
AuthorPosts
-
January 3, 2020 at 4:53 am #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 youJanuary 3, 2020 at 5:21 am #1120766David
StaffCustomer SupportHi 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/January 3, 2020 at 6:32 am #1120820Bernhard
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?January 3, 2020 at 9:56 am #1121102David
StaffCustomer Support1. 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/January 3, 2020 at 11:43 am #1121200Bernhard
Hi David,
(1), ok, here it is with page hero (background + overlay), here it is without.
(2) ok, thank you πJanuary 3, 2020 at 1:12 pm #1121253David
StaffCustomer SupportTry 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/January 3, 2020 at 2:27 pm #1121283Bernhard
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 youJanuary 3, 2020 at 4:01 pm #1121334Leo
StaffCustomer SupportYou 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-contentDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 4, 2020 at 12:46 am #1121493Bernhard
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?
January 4, 2020 at 4:40 am #1121635David
StaffCustomer SupportI made a correction to the CSS here
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 4, 2020 at 5:07 am #1121651Bernhard
Very good, thank you π
January 4, 2020 at 5:16 am #1121658David
StaffCustomer SupportGlad we could be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.