Support editing images after they have been inserted into the page

[jnnkB]

I think it would be useful if you could edit an image after you inserted it. For example to crop or rotate it later on.

[anthonyjb]

@jnnkB this will definitely be in the new release.

We allow image fixtures to be edited already but I agree this functionality needs to be added to images within the page. We also use a custom image editor I wrote for CT on our projects which you can see in action here https://www.youtube.com/watch?v=2Qms3ViqF9k&t=1m43s and this editor (which performs the crop and rotate client side initially so you only need to create the variation of the image on saving the page) is what I'd like to use as the basis for the image editor in CT 2.0 as it's much nicer than the bare bones version in the current release of CT.

[jnnkB]

Sounds great.

[jnnkB]

How would you handle scaling the images? Because I think different clients (e. g. a mobile phone vs. an 4K display) will need differently sized images so it wouldn't be that great if the edit-client already scales the images down.

[anthonyjb]

@jnnkB the way we do it currently is we always keep a copy of the originally image server-side along with the variation the user generates to insert the page, so when they reedit the image the user is applying the changes to the original full size image.

This is a server-side implementation detail for the most part, client side we just store max size against the inserted images to ensure people can't increase the size of the image beyond the size of the original image.

[anthonyjb]

@jnnkB just to continue on the different sizes for devices, we support (again server-side) generating multiple variations of the image on save, so for example an image twice the size for retina or different formats.

This is all implemented server-side currently, however, you're right we will need a way to allow people to potentially manually specify different versions of an image for different devices / resolutions. Typically we would do this using a content negotiation approach, e.g hey server I want this image to be displayed on this device <- ok here's the image as a webp 400 pixels wide.

As we'll be moving to the picture element #1 this is probably more relevant to that issue, as it comes down to how best to allow users to specify the various versions of their image. In most cases I think it will only be practical to automatically generate the various image variations required, but I'd like to add support for manually overriding a given variation too for cases where an automatic variation would be sub-optimal (for example when apply an automatic crop).