Cockpit: [Proposal] Support for image styles on the collections response

[pauloamgomes]

Hey Cockpit Team!

Right now and as per my understanding the way to retrieve images with a specific size/quality/etc.. involves a call to the /api/cockpit/image endpoint, requiring some attributes like width or height. That approach seems to work well, but requires that the frontend app implements logic for each particular image perform another request and therefore get the required image style.

My suggestion is to provide a new addon that permits the configuration of different image styles (e.g. Thumbnail, Large, Small, Square, etc..) and provides there the width/height or other effects that are supported by the image library (e.g. gd or imagemagik).

Having those styles in place it means that when we define an image field we can specify a list of styles, and when requesting the collection, the JSON response will contain an array of styles with the image paths, e.g.:

{
  "image": {
    "meta": {
      "title": "my image title",
      "description": "my image description",
      "asset": "5a710f6d13c32doc1282589722"
    },
    "path": "/storage/uploads/2018/03/15/5a710f6d0237981.jpg",
    "styles": [
      {
        "style": "thumbnail",
        "path": "/storage/styles/thumbnail/5a710f6d0237981.jpg"
      },
      {
        "style": "square",
        "path": "/storage/styles/square/5a710f6d0237981.jpg"
      },
      {
        "style": "large",
        "path": "/storage/styles/large/5a710f6d0237981.jpg"
      }
    ]
  }
}

Assuming that we can get above response, the FE app just needs to include the path of the style that is required, same can be used if we want responsive images.

What do you think?

[pauloamgomes]

On the way to enhance current cockpit functionality created a new addon (https://github.com/pauloamgomes/ImageStyles) that implements what is mentioned in the proposal.

Initially was thinking about a different approach (using Intervention PHP library) but since Cockpit core already provides the generation of the image and some advanced filters (based on the SimpleImage library) I decided to keep it simple and use core methods.

@aheinze please let me know what you think

[aheinze]

Congrats @pauloamgomes . Looks great!

Just a question, why don't you use the following api entry point:

/api/imagestyles/style/Banner?token=XX&src=storage/uploads/image.jpg ?

[pauloamgomes]

Hey @aheinze , thanks for the feedback.
Yeah you are right, it would make more sense as per API standards, I'll change that.

[pauloamgomes]

Think I'm not supporting that particular case repeater > set, its working for repeater > image and set > image as you can see in the examples, but it's something I will look into when I have few free time.

[popovfreewind]

Thanks for quick response. Sorry, i deleted previos message, becouse i have found issue in plugin repository.