Cropping images in Caspar

Themes
1

I’m confused about the way that Caspar crops images in the classic feed layout.

Before uploading the featured or hero image for a post, I always crop in a 16:9 ratio. On the post it looks great. On the homepage the top three posts display the cropped image perfectly.

But once those features move down into the grid (3 features wide), Ghost seems to crop a smaller 16:9 image of the original cropped image. It looks terrible, I don’t understand why this would be the case when the ratio is the same. It feels like the same cropped image should work in the same way all over the site. Now we have images where text is cropped weirdly or someone’s head is cut off. I’ve included a screenshot for reference. You can see the image of Kenn Kotara has cropped strangely when its displayed in a small version.

Screen Shot 2024-07-01 at 12.45.34 PM
Screen Shot 2024-07-01 at 12.45.34 PM1920×1001 125 KB

Visit homepage and Kenn Kotara post to see the large (correct version):

How do I fix this? Is there an update I can make or some bit of code I can inject?

Thank you!!

2

You have some code injection that is changing the image height to a fixed value:

.post-card-image {
  height: 324px;
}

Maybe you added that for another theme, or with another purpose, but that’s causing the weird cropping. You should remove that from your code injection and it that should solve this.

3

Thank you!

The site was set up by someone else. I’m not a coder – can you give me more explicit instructions on how to do this? I don’t want to mess anything up, as this is a client’s website.

Thanks again.