[WP] Provide a UI for editing images (rotate, flip, crop, etc)

[quicksketch]

Description of the need

Many end-users today do not expect to have to "prepare" images before uploading them. They should be able to crop, rotate, flip, etc. images after they have been uploaded into a system. The "art" of even manipulating an image prior to posting is unheard of to younger audiences, when the primary feature of many photo sharing tools is last minute manipulation on an image through an app or website.

Proposed solution

After uploading an image, you should have basic manipulation tools available to modify that image. I think a tool like https://fengyuanchen.github.io/cropperjs/ provides a good basic set of functionality for crop, rotate, and flip.

An additional library (or a more comprehensive one) that also provides filters may also be desirable, such as http://camanjs.com/examples/ but that one in particular is no longer supported, nor is it a GPL-compatible license.

Alternatives that have been considered

We could always leave this in contrib. Both of these modules exist for Drupal

https://www.drupal.org/project/imageeditor - provides integration with arbitrary image editing software. https://www.drupal.org/project/image_edit - Specific integration with CamanJS

Additional information

Ideally you'd be able to edit an image both immediately after uploading (such as in a dialog) and after uploading from the File management listing (admin/content/files). Perhaps initially we should just worry about one or the other, with the file listing option being the easier one because it would probably just get its own page.

[klonos]

I agree that some basic image editing could be provided with core OOTB ...or at least provide an API for contrib to use. This is something that is expected out of the box nowadays (similar to things like being able to capture photos from the device camera in file fields etc.).

We have done a great job with finding and using a 3rd party library for accessible drop-down menus; we could do the same here.

I would add "focal point" functionality to the list of things that should be possible (https://www.drupal.org/project/focal_point).

PS: related: #1774

[jlfranklin]

If there was one (de-facto) standard for image editing in a web application, then it would make sense to put it into core. Leaving it in contrib allows for multiple different libraries to be offered by different contrib modules, each with their own way of doing things.

If there is one in core, a contrib module has to follow the same quirks that the in-core version does, because other contrib modules will depend on that behavior, and it will have a much higher barrier to acceptance as it has to overcome the inertia of "just use the core module."

[stpaultim]

If there was one (de-facto) standard for image editing in a web application, then it would make sense to put it into core. Leaving it in contrib allows for multiple different libraries to be offered by different contrib modules, each with their own way of doing things.

The same argument could be made for any WYSIWYG editor in core (as has been made), but I think we've decided that the expectations of users require that something be available in core - ideally implemented in such a way as to allow as much flexibility and opportunities for improvement in contrib. I think that this kind of feature is comparable and that for the sake of end users there is great value in us having an opinion and offering at least a simple solution in core.

I'm eager to hear what others think.

[olafgrabienski]

Many end-users today do not expect to have to "prepare" images before uploading them. They should be able to crop, rotate, flip, etc. images after they have been uploaded into a system.

I like the idea to provide basic image manipulation tools for Backdrop core. Probably people expect basic features they know from popular web platforms like Facebook. Therefore, I'd suggest to evaluate image editing features of such platforms and to concentrate on direct manipulation after uploading.

[olafgrabienski]

I would add "focal point" functionality to the list of things that should be possible

Btw, not only Focal Point but also Manual Crop is available for Backdrop:

• https://github.com/backdrop-contrib/focal_point
• https://github.com/backdrop-contrib/manualcrop

[jlfranklin]

Probably people expect basic features they know from popular web platforms like Facebook.

Do we have any user interviews or feedback supporting this statement?

[olafgrabienski]

Probably people expect basic features they know from popular web platforms like Facebook.

Do we have any user interviews or feedback supporting this statement?

It was more an assumption, based on what only a few Drupal and Backdrop website owners told me.

[klonos]

@jlfranklin it does seem to be something that customers ask very often, and expect OOTB (the agency I work for manages 500+ gov websites built on the GovCMS distro).

Some modules like the following have very small usage (still, a few 1000s of installations though):

https://www.drupal.org/project/imageeditor https://www.drupal.org/project/image_edit https://www.drupal.org/project/epsacrop https://www.drupal.org/project/smartcrop https://www.drupal.org/project/simplecrop https://www.drupal.org/project/media_crop https://www.drupal.org/project/imagecrop https://www.drupal.org/project/imagefield_focus https://www.drupal.org/project/image_focus

Other modules though do have some considerable usage:

https://www.drupal.org/project/focal_point 52k+ installations https://www.drupal.org/project/manualcrop 26k+ installations https://www.drupal.org/project/imagefield_crop 19k+ installations https://www.drupal.org/project/crop 61k+ installations https://www.drupal.org/project/image_widget_crop ~32k installations

The mere fact that there are so many solutions trying to deal with basic cropping and focus is an indicator that people do expect that functionality from a CMS. Although you can argue that still not 80%, their combined usage reaches 200k, which is considerable.

[klonos]

...also, WordPress offers this OOTB: https://wordpress.com/support/images/editing-an-image

[klonos]

...they seem to be using a custom solution: https://github.com/WordPress/WordPress/blob/master/wp-admin/js/image-edit.js