Person's head has been chopped off!

Hi Folks,

We’ve got a slight issue where on our Blog page, the most recent blog image we’ve posted has been cropped by Ghost, which has led to the illustrations head being chopped off - how could we fix this?


Casper version 3.0.12

Thanks so much.
Charles

Hey @Charles_Kerr :wave:
This little snippet of CSS will solve that issue, add it to your site head code injection area:

<style>
.post-card-large .post-card-image {
    object-fit: contain;
}
</style>

The best way to fix this though is to make sure your post images have plenty of white space around them so they can crop to different ratios :+1:

Hope this helps!

1 Like

I’ve got to say, that header is one way to get attention :joy:

4 Likes

Hi David,

This worked very well, thanks! Although some images now have a greyed out background area because of their dimensions - can I make this white perhaps?

It also didn’t seem to work for this post but not sure why…

This is what I meant by the following:

Images in your theme are styled in such a way that they fill the space, aka cover the available image space. You can change this application by setting them to contain (like in the CSS I provided) however it’ll cause letterboxing to happen with images that don’t fit the aspect ratio.

Best thing to do is to create graphics with a decent amount of white space around them, or use feature images that aren’t hampered when they are cropped around the edges.

Hope this clears things up! :blush:

1 Like

Try this, which will adjust and add on to what David gave you:

<style>
.post-card-image {
    object-fit: contain;
    background: #fff no-repeat 50%;
}
@media (prefers-color-scheme: dark) {
    .post-card-image {
        background: #191b1f no-repeat 50%;
    }
}
</style>

Edit: If it doesn’t work, and having not looked at Casper’s coding, changing the second line to the following should fix things: object-fit: contain !important;

3 Likes

This worked like an absolute charm - thank you so so much!

3 Likes