Docs

[Chris L]

Hello,

I’ve added some recent posts to my homepage (under the RECENT WORKS section):

首頁

The arrangement looks better than the system default homepage, but is it possible to prevent cropping of the thumbnail image?

I just took a look at the most recent topic related to this question and implemented the codes to x-child/functions.php and customized CSS styles accordingly:
https://community.theme.co/forums/topic/prevent-cropping-of-recent-post-thumbnails-on-homepage/page/2/

But as you can see on my homepage, It doesn’t thoroughly fix the issue though. I guess maybe that is because of aspect ratio variation between the feature images of my recent posts.

If there isn’t a solution to this, I will try to resize feature images for all my recent posts with an aspect ratio that could avoid thumbnail cropping on my homepage. But hopefully there is a solution.

Thanks again^^

Chris

[Rue Nel]

Hello Chris,

Thank you for posting in and the very detailed information. By default, the images in the recent post element were made as a background image of the box. To display the whole picture, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-recent-posts .has-post-thumbnail .x-recent-posts-img {
    background-size: contain;
}

I also noticed that you are using Jetpack plugin and you have enabled Photon module. I would recommend that you disable Photon first before testing your site. To fully understand how Photon works and what are the limitations of Photon which may result further issues in your site, please check this out: https://jetpack.com/support/photon/

Hope this helps. Kindly let us know.

[Chris L]

Hi, the solution works like a charm. Thanks so much!
I also took your advice and disabled Photon though I haven’t seen any obvious changes~
Thanks again^^

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts