Featured Image size

Hi there,

ideally you want to ensure that all images you upload are the same size. However in Customuizer > Layout > Blog --> Featured Images you can 'force' the images to a specific size using the Width and Height fields:

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

The featured image size on my category page is correctly adjusted. But my home page does not change, please advise

Hi Aaron,

Your home page is using WPSP so the adjustment for it should be done with the WPSP settings of the WPSP list you've added on it.

I'd consider installing WPSP's beta version - https://wpshowposts.com/wp-show-posts-1-2-0/ - to use its image sizing feature.

I download the beta version just now. It says "In 1.2.0, we simply allow you to choose from the existing sizes generated by WordPress. Of course, you can add your own sizes using the add_image_size() function."

Under "Images"'s Image size section, it says
Available image sizes: thumbnail, medium, medium_large, large, full

If this what you're referring to? If so, I'm looking for dimension adjustment instead of big/small sizes

Unless you have the Pro version ( which is no longer available ) you will need to add some CSS:

.wp-show-posts-single .wp-show-posts-image img {
    width: 100%;
    max-height: 250px;
    object-fit: cover !important;
}

I add it on Customizing>Additional CSS, but it didn't change
Is it because my homepage is a page instead of a post? If so how do I change it?

Where did you add the CSS? I can't see it on the site ?

Hi I removed it because it didn't seem to work.

I've added the code back, can you check

I've tested David's CSS to be sure and it works as shown in this testing -
https://share.getcloudapp.com/xQuzPAEk

I've checked how you've added it and it seems to be included in a @media rule.

Can you try moving it out of the @media rule?

It worked, but this code looks like it's making the higher height shorter (to balance the height of all thumbnail)
Instead, how do I make the width cropped in? (to balance the width)

Also, for some reason the top header bar is showing blank now. can you help me?

You would use this CSS:

.wp-show-posts-single .wp-show-posts-image img {
    width: 100%;
    height: 500px;
    object-fit: cover !important;
}

BUT this will make ALL WPSPS Images 500px tall.
So now you got to select the Container Block that list is in, and give it an Advanced > Additional CSS Class eg. your-custom class ( name it what you like ) and use that in your CSS:

.your-custom class .wp-show-posts-single .wp-show-posts-image img {
    width: 100%;
    height: 500px;
    object-fit: cover !important;
}

Personally i would crop that one image to the same aspect ratio as the other images.... it will save you a lot of headaches :)