Change sizes in responsive post images

Developer help
1

If you’re looking for help, please provide information about your environment. If you delete this template and don’t provide any information, your topic will be closed.

If you aren’t running the latest version of Ghost, the first thing we will ask you to do is update to the latest version of Ghost.

And

  • How was Ghost installed and configured? Installed manually on a Digital Ocean server
  • What Node version, database, OS & browser are you using? Irrelevant, since this is related to the way srcsets are generated =]
  • What errors or information do you see in the console? Nothing! All’s good!
  • What steps could someone else take to reproduce the issue you’re having?

So my question is related to the way responsive images are generated in Ghost. If you view 2 weeks in - KL Judo you’ll see that the image doesn’t stretch the text length on wide screens. I notice that the post image html it generates is

<img src="https://kljudo.com/content/images/2020/07/Back.PNG" class="kg-image" alt="" srcset="https://kljudo.com/content/images/size/w600/2020/07/Back.PNG 600w, https://kljudo.com/content/images/2020/07/Back.PNG 927w" sizes="(min-width: 720px) 720px">

The problem is with the sizes attribute. I want to customize it to reflect my theme, because otherwise the image doesn’t stretch the full width. Is this possible?

2

Just upgraded to the latest version (3.27.0), and can confirm the issue still persists. I’ll probably dive into the Ghost source code at some point, if there aren’t any updates to the documentation. (I’ve been googling like mad, but I think this is a new feature … so there’s not much written about it?)

3

Responsive images assumes a post content column of no larger than 720px, because typically that tends to be the best-practice for line length and readability.

If this doesn’t fit exactly the way you’re expecting in your theme, there are a couple of different customisation options available:

If it’s a small difference in size, you can force the size with CSS and the browser will scale it automatically.

If it’s a big difference and you’d prefer full control to work with images based on your preferences, you can disable the automatic image sizes in the content completely by adding this to your Ghost config file:

"imageOptimization": {
   "srcsets": false
},
1 Like
4

Thanks for your response <3