Blog page header image bigger height?

Shapely
1

hi,

I’m using Shapely theme. The front page looks fine. But on the blog pages the header image size is limited to 1900 × 225 pixels. Is there a way to increase the header image size on the blog page so I can upload a bigger image, for example 1900 × 500 pixels?

Thank you!

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile:
In order to check your question i need to see your live website, please provide url and i will take a look

3

hi,

Here is an example URL of a page with the header image on a blog page. https://fantasticphotosprague.com/group-photo-tour-in-prague/

Attached is a screenshot of the customize settings in Wordpress. You can see it only allows an image size of 1900 × 225 pixels. Can the image height be made bigger, like 1900 × 500 pixels?

Thanks!

4

any ideas how to do this?

Thanks

5

Try this code:

.page-title-section {
height: 269px;
}

Height will be changed but not sure how image will behave in it :slight_smile:

6

hi,

I tried adding the code and it stretches the image out to 269px (I also tried other bigger pixel values too).

I tried squashing an image in Photoshop from 269px to 225px first to see what happens when I add it into Wordpress, but the code stretches the image in 4 directions, not just downwards. So it messes the image up :frowning:

Wordpress always wants to crop the image to 225 px height, even with the code. Is this a part of Wordpress that can’t be changed?

7

HI

please add this code as well:

.header-image-bg {
background-size: contain;
background-repeat: no-repeat;
}

and you will see blank space under the image, this is the space you must fill with your image by resizing it in photoshop

8

thanks! I got it to work OK.

It works better with only this code

.page-title-section {
height: 330px;
}

I discovered that if I upload an image 1940 px wide to Wordpress, it only gave me the option to crop it to 1940 * 225.
But when I upload a smaller image eg. 1500 *539 px it gave two options “Crop” or “Skip Cropping”. So selecting “Skip Cropping” allowed through a photo with a bigger height. The browser stretches the photo out OK, so its working fine. Thanks
Final version at https://fantasticphotosprague.com/group-photo-tour-in-prague/

9

Thak you for sharing solution :slight_smile:

I will close this case now, Feel free to contact us again if you have other questions Thanks!