Ghost update stretch all the images on my website

Just updated Ghost and now all images that I have on my website are stretched like this for every single article. How this can be solved?

Or is there a way to roll back to the previous version?

What theme are you using? It is most likely the source of the issue.

I use Maido. I didn’t have any issues before the update. Is there an option to roll back? The issue just crashed my entire project in very unsuitable time.

Before upgrading to major version of the theme it’s important to check if the theme is fully compatible with the new version.

As a temporary solution you can switch to another theme that supports Ghost 4.0 (like default Casper or Lyra)

@fueko can you help here, this seems to be one of your themes? :wink:

Actually I did not plan any updates. The user interface how the update was delivered - it just blocked the option to publish an article I was working on and there was no straightforward option to skip the update for later. I had to update to publish something urgent. I also didn’t see any banners that it could affect my current theme.

Hello @Special_K, the images were fixed in Maido v1.5.1 over a year ago. I am currently working on adapting the theme to Ghost 4.0, I will try to do this as soon as I can.

The developer helped, the issue is sorted for now. But please reconsider how you deliver updates in the future.

Once again thanks to @fueko great support as always.

2 Likes

The same thing happened on my blog with the 4.0 update.

The root of the issue seems to be that the Ghost editor is assigning manual style tags to the images for width and height.

I was able to work around this in my theme by simply adding height: auto; to the .post-content-full img style.

Still, it is a little weird that the default height/width set by the editor style results in a badly-stretched image in the first place.

It’s down to theme’s CSS. Some themes were using a max-width style on images to limit their width but weren’t including a corresponding height: auto style. In 4.0 we added height attributes to images for faster page layout and no layout jumping with lazy-loaded images, the problem there is the max-width style is reducing the images width but without height: auto there’s no style telling the browser how to deal with the height so that is picked up from the height attribute resulting in squashed/stretched images.

If anyone runs into this problem and wants a quick fix before upgrading or fixing their theme then it’s possible to add this via code injection:

<style>.kg-image-card img { height: auto; }</style>
5 Likes

I am having the same problem - all my images embedded in posts are stretched. I tried the code injection but the images still appear huge on the page - nothing like they look when I’m composing in the editor. When I attempt to use a smaller sized photo, it still comes out huge, only then blurry. I’m using the Valkyrie theme and have reached out to the developer as well. In the meantime I’d appreciate some help!

Are they stretched (distorted) or just larger than you’d like? If they are just larger then it’s not likely to be the same issue and may just be how the theme handles images, hopefully the theme author can help you out.

They’re larger than I’d like in the sense that they’re so large they don’t even fit the frame of my screen and you’d have to scroll to see the photo - never seeing the entire image at once.
I tried adding width to the code injection:

.kg-image-card img { height: auto; width: auto; }

And that at least got the image to stay the size it appears in the editor, but it appears on the page waaay off to one side. I don’t know enough about coding to fix this.

thank you!! this worked