[4.0] Question: how to implement support of responsive images

[mahnunchik]

I'd like to implement some kind of 'responsive image' field.

What I mean: I upload original image while keystone produces images at different sizes to use in the layout, as shown below:

<img
  sizes="(min-width: 40em) 80vw, 100vw"
  srcset="examples/images/image-medium.jpg 375w,
          examples/images/image-large.jpg 480w,
          examples/images/image-extralarge.jpg 768w"
  alt="…">

I will use sharp library to image processing.

Question: how to implement this feature?

1. Custom storage adapter
2. Custom field/type
3. Or maybe some kind of upload plugin

[sktt]

I would like this too! An Image Type would be great! With some image editor component in the admin ui would be cool... For storing it could probably use any storage adapter to upload multiple files, e.g. unmodified, edited?, x1, x2, x3 sizes...

For me it would be just as fine to have image processing on the client side. There are a bunch of image editors built in react too, https://github.com/mosch/react-avatar-editor is one I am trying out which allows for both client and server processing.

[mahnunchik]

@JedWatson @wmertens any news?

[mahnunchik]

Naive solution is:

class ImageFSAdapter extends keystone.Storage.Adapters.FS {
  uploadFile(file, callback) {
    // Some logic and manipulation on image
    super.uploadFile(file, callback);
  }
}

[wmertens]

I'd do this by putting an endpoint on your server that creates the manipulations on-the-fly, using query strings. It should also cache the results of course.

e.g. you request /image/foo.jpg?w=400 and it automatically gives you the image resized to fit within 400px width, or something close enough that it has in cache.

[mahnunchik]

@wmertens it is suitable when we need many manipulations on one image.

But when we need only one manipulation then I prefer approach to make manipulation on upload and save result to serve it as is.

[wmertens]

Even if you only do one manipulation, doing it on-the-fly with a clearable cache means that you don't have to worry about management of the manipulated items, and you never have to store results that you never use. The manipulation is so fast that it doesn't really matter for the first user.

You can even store the results as the entire GET query (e.g. "image.jpg?thumbnail") in a cache dir that you give to express.static or the webserver with a fallthrough to the API.

To manage the cache, you could touch the files every time they are read, and you can clear files that are older than a week.

On Thu, Apr 20, 2017 at 10:04 AM Evgeny notifications@github.com wrote:

@wmertens https://github.com/wmertens it is suitable when we need many manipulations on one image.

But when we need only one manipulation then I prefer approach to make manipulation on upload and save result to serve it as is.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/keystonejs/keystone/issues/3961#issuecomment-295621765, or mute the thread https://github.com/notifications/unsubscribe-auth/AADWloFxm_6BJmyYJBmmIyJOrYqDMklNks5rxxGYgaJpZM4LxOwj .