More powerful image uploader/editor

[espenak]

We should create an image uploader that can crop and apply simple filters to images in the image archive. I propose to upload images just like we do today (we may want to enhance the UI a bit), and then apply cropping and filtering after the image has been uploaded. The result of the cropping and filters should be stored as an ArchiveImageVariant. An ArchiveImageVariant should not actually store the changed image, it should just store the attributes required to re-make the variant from the original image.

I think the widget could look something like this when no image is selected:

And something like this when an image is uploaded/selected:

[apparator]

Jørgen (Bulthuis) thinks that providing something like this will mean a lot for the users of lokalt.net.

[espenak]

@vegarang, can you start working on an AngularJS UI for this?

Things to consider:

• Use the cloudinary branch for this work.
• Add the JS to the AngularJS library in django_cradmin/static/.
• We should wait with filters (retro, black&white, ...) because those would require some form of serverside API to generate the previews, and that is not a priority at this time.
• Should be designed as a Django widget (just like the current select from image archive widget we have today).
• Should interract with the image archive just like we do today, but instead of a preview, we should get an editor where we can apply extra settings for the image. For now those settings are the ones defined in the ArchiveImageVariant model.
• This widget should use ArchiveImageVariant, not ArchiveImage.
• We should keep the existing widget (for ArchiveImage) for cases when we do not want users to be able to modify their uploaded images, so this is a new widget.
• You should assume that we have a server API that handles the cropping. I think the best solution would be to store the settings defined by the image editor as JSON encoded properties in a hidden field. This way we can just mirror exactly what to set the ArchiveImageVariant to. The existing widget stores the foreignkey as a hidden field, so it should be easy to just use the same "workflow", but with JSON in the hidden field instead of an int.

[espenak]

Libraries

@vegarang, you should take a look at:

• https://github.com/alexk111/ngImgCrop
• https://github.com/andyshora/angular-image-crop

Altso remember that we will already depend on jQuery, so we do not care if a cropping directive uses that.

[espenak]

One more thing! Do not bother with the 3 buttons when no image is selected - use the same method as we use in the current image archive widget (open the image archive browser).