- This topic has 11 replies, 3 voices, and was last updated 4 years, 3 months ago by David.
-
AuthorPosts
-
January 3, 2020 at 4:53 am #1120742Bernhard
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 #1120766DavidStaffCustomer 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.
January 3, 2020 at 6:32 am #1120820BernhardHi 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 #1121102DavidStaffCustomer 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.
January 3, 2020 at 11:43 am #1121200BernhardHi 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 #1121253DavidStaffCustomer 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.
January 3, 2020 at 2:27 pm #1121283BernhardHi 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 #1121334LeoStaffCustomer 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-contentJanuary 4, 2020 at 12:46 am #1121493BernhardPerfect. 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 #1121635DavidStaffCustomer SupportI made a correction to the CSS here
January 4, 2020 at 5:07 am #1121651BernhardVery good, thank you ๐
January 4, 2020 at 5:16 am #1121658DavidStaffCustomer SupportGlad we could be of help
-
AuthorPosts
- You must be logged in to reply to this topic.