Responsive images are not generated [Resolved]

Developer help
1

My package.json configuration:

"image_sizes": {
  "s": {
    "width": 300
  },
  "m": {
    "width": 750
  },
  "l": {
    "width": 1140
  },
  "xl": {
    "width": 1600
  }
},

However, there are only 2 versions of image generated (image.jpg and image_o.jpg).

17

I tried to restart Ghost and tried with several images, but same result as always. Even tried to load the custom image size like below, but it loads the full size image.

src="{{img_url @site.cover_image size="m"}}"

Ghost-CLI version: 1.9.9
Ghost version: 2.14.3
OS: macOS 10.14.3
Node.js version: 10.15.0
npm version: 6.4.1

2

Two things to check:

  • have you made a request for an image? The resized images are generated on request, not on theme upload etc.
  • is sharp actually installed? Check your logs - it’s an optional dependency, and will fail quietly if anything goes wrong with the install.
3

Hey, thanks for your reply.

  1. Yes, I’ve made a request for the image. Also the image is not remote.

07

  1. sharp is installed in ghost-site/current/node_modules and the version is 0.21.3.

And the code is:

<img class="post-image u-object-fit" src="{{img_url feature_image size="m"}}" alt="{{title}}">
4

The optimised images are stored in images/size.

What is the output of {{img_url feature_image size="m"}}?
Have you wrapped the “image_sizes” into “config” e.g. see?

(Sorry I hit enter too early. Edited)

5

Hey Kate,

That was my bad. “image_sizes” wasn’t inside “config”, but outside. Thank you so much.

1 Like
6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.