User Interface: how to get to the cropping editor

[petschki]

The Plone UITeam suggested different ways to get to the cropping functionality, like implementing it in the imagewidget on the edit view. This can be useful, but needs a few more clicks and isn't very obvious to the user in my opinion.

We ( @frisi and @petschki ) were thinking about different approaches and came up with the following idea:

• check the page with javascript if there are editable and croppable images
• show a cropping overlying cropping icon which opens the @@croppingeditor with the correct imagefield and scale preselected in an overlay

This needs some investigations on

• how to get editable (and croppable) images on the content with javascript.
• determine their scale to preselect it in the editor view. this is kind of tricky if the image scale uses the plone.app.imaging way of url generation

[Kosi81]

We have now solved that for us, like suggested in #19, with an overlay.

Therefore we have only given an extra pararmeter to the image (if the user is alowed to edit the image). In this pararmeter we are giving the information for the scale.

On the other hand we have an JS File witch is only loaded if the user is logged in. It checks all Images after loading if this parameter is set and makes an small Icon on the left top corner of the image. There the user can start the overlay.

[frisi]

Thanks for your feedback @Kosi81! Would you mind sharing your code (or snippets) (js / pagetemplate) so we can take it as a basis and provide macros or documentation in plone.app.imagecropping?

[petschki]

Hi, maybe someone wants to give some feedback to the latest commit 4b20e6e in the branch outputfilter. the basic idea is to add a link to the images in the document view which are placed within the richtexteditor and open the cropping editor in an overlay. the imagefield and the scale are preselected. the permission is checked on the "Modify portal content" of the image. the link is rendered into the document view using portal_transforms and outputfilters.

checklist:

• place croppingeditor link in document view
• check for permission to edit image
• preselect imagefield and scale of the places image
• open cropping editor in overlay
• upgrade step for javascript registry
• cropping icon when hovering croppable images
• tests