Skip to content


Subversion checkout URL

You can clone with
Download ZIP


User Interface: how to get to the cropping editor #12

petschki opened this Issue · 3 comments

3 participants


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 way of url generation

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.


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


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.


  • 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
@petschki petschki referenced this issue from a commit
@petschki petschki shop cropping editor icon.
fix modify permission check on image context see #12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.