[Support request] How Do I Make Pictures Look Better?

[Ludwig]

Hello i am new to building websites and i have encountered a problem with images on the header.

I have GP-Premium if that helps

https://fishingadvisories.com/2022/10/08/fishing-for-adults/

As you can see on the website the image look way to zoomed in.

Is there a way to fix this?

[David]

Hi there,

So the Hero Image is displayed as a CSS Background Image, by default the image size is set to Cover which means the image will fill the available space.

But if the Page Heros aspect ratio does not match the Original Image then you will have zooming in or cropping.

To fix this we can use some CSS to make sure the Page Hero has the same aspect ratio as the image.

1. We calculate the Aspect Ratio of the Image. Using Height / Width * 100 = Aspect Ratio %
For your image that is: 1441 / 2560 * 100 = 56%

2. Go to Customizer > Additonal CSS, at the very top enter a new line and add this CSS:

.page-hero {
    min-height: 56vw;
}

What this is doing is to say the minimum height of the page hero must be 56% of the viewport width.
This will show 100% of the image on all screen sizes.

I assume All your images are the same size.

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

[Ludwig]

Is it possible to have the same header size but still see the whole image? When i use that css the image fills up way to much

[David]

OK, if you only want to show the image, then:

1. In Appearance > Elements -> Quick Edit the Global Page Headers element and change its Status to Draft.
This will disable the Hero element.

2. Go to Customizer > Layout > Blog –> Featured Images. Note there are 3 tabs for Archives, Posts and Pages:

https://docs.generatepress.com/article/adjusting-the-featured-images/

On the Posts and Pages tab set the Location to Above the Content.

This should show the featured image at its full size but NOT full width of the viewport so it won’t take up as much vertical space.

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

[Author]

Posts