Help! Ghost is cropping my posts!

Most Ghost themes assume that images can be cropped to fit the layout the designer provided. That's mostly OK if you have landscapes or city scenes, but not so great for portrait photography or images with text overlay, where cropping means somebody loses their head, or your title is half gone!

The solution to this problem is a little bit of code injection. Here's the code injection that makes Casper not crop your featured images on the homepage:

<style>
img.post-card-image {
    object-fit: contain;
    background: transparent;
    height: unset!important; /*if you omit this, you'll have whitespace */
}
</style>

The key setting here is object-fit. Setting it to contain means that the image won't get cropped. Most themes use 'cover' instead. Setting the background to transparent prevents any remaining whitespace from being a grey box, and setting the height to unset prevents Ghost from trying to force the image to be a particular height, thus allowing the height to expand to avoid horizontal whitespace. If you're ok with whitespace, you can skip that line.

This code injection is going to hit all the post-cards on Casper's front page. But maybe you only want some of your images uncropped. In that case, internal tags are awesome. For example, on my own blog, I have a tag called #contain. So then the selectors would look like this:

.tag-hash-contain img.post-card-image {
    object-fit: contain;
    background: transparent;
    height: unset!important; /*if you omit this, you'll have whitespace */
}

Now my objects are only set to 'contain' when the #contain tag is present.

What, you're using Source, not Casper? Try this instead:

<style>
.gh-card-image img {
  object-fit: contain;
  background: transparent;
  }
</style>

Because of the way Source does images, un setting height will result in layout problems, so whitespace is the way to go here.

Every theme is a little different, but that basic idea should let you fix any theme.

Need to brush up on your code injection? The link below will walk you through it!

Code Injection 101

How can I make the title of my Ghost blog bigger/smaller? How can I change the color of that text? How can I make the width a little bigger? For these and many other questions, the answer is: “Code injection!”

Spectral Web ServicesCathy Sarisky

Hey, before you go... If your finances allow you to keep this tea-drinking ghost and the freelancer behind her supplied with our hot beverage of choice, we'd both appreciate it!

Buy me a tea ☕️