Package: plone.app.imagecropping
ContentsWhy do I need this?How it worksAutomatic cropping behaviorLoad editor as overlayConfigurationFurther InformationHistoryDesign decisionsInformation about changes from version 1.x to 2.0Information about changes from version 0.1 to 1.0Possible extensions / changes for the futureCreditsSource CodeChangelog3.0.3 (2023-10-25)3.0.2 (2023-10-09)3.0.1 (2023-07-07)3.0.0 (2022-10-25)3.0.0a1 (2022-10-05)2.2.2 (2020-03-11)2.2.1 (2019-07-17)2.2.0 (2019-04-24)2.1.0 (2018-07-03)2.0.1 (2017-02-27)2.0 (2016-11-24)2.0b6 (2016-11-18)2.0b5 (2016-11-06)2.0b4 (2016-07-13)2.0b3 (2016-04-29)2.0b2 (2016-04-01)2.0b1 (2016-03-29)1.3 (2015-12-10)1.2 (2014-10-15)1.1 (2014-09-13)1.0 (2014-09-05)0.1rc2 (2013-05-03)0.1rc1 (2013-03-11)0.1b1 (2013-03-03)0.1a2 (2012-11-10)0.1a1 (2012-11-05)Why do I need this?Automatic cropping is already possible,plone.namedfiledoes already handle this via themodeparameter:<img tal:define="scales context/@@images"
     tal:replace="structure python: scales.tag('image',
                  width=1200, height=800, mode='contain')"
     />However it only crops from the top/center of the image,
so in some occasions this is not what you want.plone.app.imagecroppingallows you to select the cropping area manually for each available image scale using thecropperJavascript libraryHow it worksThere is a view @@croppingeditor available for every content type implementingIImageCroppingMarkervia an object action. There are specific markers for Archetypes and Dexterity based types:plone.app.imagecropping.dx.IImageCroppingDXplone.app.imagecropping.at.IImageCroppingATThe interfaces are implemented by default for Dexterity basedplone.app.contenttypes(Plone 5 or Plone 4.x as addon)Image.Products.ATContentTypes(Plone 4.x) implements it on``ATImage`` andATNewsItem.There is also a Dexterity behavior calledEnable Image Croppingwhich can be applied on custom content types containing at least one image.The editor view has a tabbed navigation on the top and two columns:Image fields on tabbed navigation.Image scales column on leftCropping editor column on right.The aspect ratio for the cropping area in the editor is automatically set to the image scale selected by the user.The image stored for this scale gets replaced with the cropped and scaled version.
This way you can access them as you’re used to. For example:<img tal:replace="structure context/@@images/image/mini" />This also enables support for richtext editors such as TinyMCE to insert cropped scales into a textfield.Automatic cropping behaviorYou can usemode='contain'for autocropped scales as usual.
This package overrides themodeand delivers the cropped scale if it is available.Load editor as overlayThe editor can also be loaded as an overlay anywhere.
Just place a link to the@@croppingeditorurl of an image (<image_base_url>/@@croppingeditor) and add some javascript. For example:(function($) {
    $(function() {
        $("a[href$='@@croppingeditor']").prepOverlay({
            subtype:'ajax',
            formselector:'#coords',
            closeselector:"input[name='form.button.Cancel']"
        })

        $(document).bind("formOverlayLoadSuccess", function() {
            imagecropping = new ImageCropping();
            imagecropping.init_editor();
        })
    })
})(jQuery);TODO: Show how to use with mockup/patterns.ConfigurationAtPlone Site SetupunderContentthere is a new settingImage Cropping.
There you can limit the scales to be shown in the cropping editor.
By default all scales are shown.You can also set those values in the profile of your (policy)product usingplone.app.registrymechanism (fileregistry.xml).Further InformationHistoryThere has been a need for cropping for a long time and there are lots of addons around that have different ways to achieve this.There isplip #10174asking for adding image cropping to plone core which recently got rejected by the FWT.
The cropping functionality should go into an addon first that also work for dexterity and can be pliped into core.This package aims to be THE cropping solution for plone that ‘just works TM’.Design decisionsmake this package as minimally invasive as possibletherefore we store the cropped image immediately, soplone.namedfiletraverser doesn’t need to care about croppingusers can access cropped images the same way as the access scales
(so it works in richtext editors too)support archetypes and dexterity contenta cropped image gets stored instead of the scaled image.
if you want back the uncropped image scale you’ll need to remove the cropped version
in the editorInformation about changes from version 1.x to 2.0Plone 5.1 only.New js librarycropper.Complete Javascript rewrite using patterns.New editor layout.Save/Remove using Ajax.Information about changes from version 0.1 to 1.0The marker interface for archetypes changed fromplone.app.imagecropping.interfaces.IImageCroppingtoplone.app.imagecropping.at.IImageCroppingAT.The marker interface for dexterity based types changed fromplone.app.imagecropping.browser.scaling.interfaces.IImageCroppingScaletoplone.app.imagecropping.dx.IImageCroppingDX.The generic base interface is nowplone.app.imagecropping.interfaces.IImageCroppingMarker.
Do not use it directly on your, but use the marker to bind view or other adapters to image-cropping enabled types.Possible extensions / changes for the futureallow to mark scales asauto-croppablein the imaging controlpanel.
this enables cropped scales w/o manually defining the cropping area but would require some changes in Plone
(extend traverser, change controlpanel)see also theissue trackerPeter Mathis (petschki)Joscha Krutzki (joka)Harald Frießnegger (fRiSi)Martijn Zweistra (themask96)Daniel Widerin (saily)Wolfgang Thomas (pysailor)Héctor Velarde (hvelarde)Tom Gross (tom_gross)Jens W. Klein (jensens)Benjamin Stefaner (benniboy)Peter Holzer (agitator)CreditsThe basic concept ofplone.app.imagecroppinghas already been implemented inYiorgis’s branch of plone.app.imagingThe librarycropperby Fengyuan Chen was published under MIT License and is used since plone.app.imagecropping Version 2.0 for the JS part to select a croppig area.Source CodeIf you want to help with the development (improvement, update, bug-fixing, …)
ofplone.app.imagecroppingthis is a great idea!The code is located in thegithub collective.You can clone it and send a pull request orget access to the github-collectiveand work directly on a branch of the project.Changelog3.0.3 (2023-10-25)Bug fixes:Fix misleading message for non-administrators when no scales are available
[laulaz] (#141)Fix minimal crop size implementation, to support current cropperjs version.
[maethu] (#150)Reset to last saved state when hitting the reset button.
[petschki] (#153)3.0.2 (2023-10-09)Bug fixes:Packaging updates: fix old imports and update resources.
[petschki] (#143)Fix recreation ofimage_scalecatalog metadata and update hashkey after
changing cropping information.
[petschki, mrTango] (#144)Fixplone.imagecroppingbehavior registration with a GenericSetup profile
and removezcmlInterface/Class registration.
[petschki] (#145)Update catalog metadata when removing cropping info.
[petschki] (#146)Upgrade dependencies.
[petschki] (#148)3.0.1 (2023-07-07)Bug fixes:Update resources.
[petschki] (#0)Make sure the hash key changes after cropping an image.
[mathias.leimgruber]Internal:Update configuration files.
[plone devs] (c1677eef)3.0.0 (2022-10-25)Fix bug in croppingarea visibility.
[petschki]3.0.0a1 (2022-10-05)BREAKING CHANGES:Plone 6 only.Removed Archetypes support.ES6 resources with Module Federation integrationmoved fromcroppertocropperjslibrary
[petschki]2.2.2 (2020-03-11)Avoid error when scale is not defined : #101
[laulaz]Hide upgrade profiles from Plone add-on control panel.
[rpatterson]2.2.1 (2019-07-17)Add missing french translations
[mpeeters]2.2.0 (2019-04-24)Fix bug when there is an ‘images’ folder inside context : #96
[laulaz]Fix Python 3 and Plone 5.2 compatibility
[cillianderoiste]2.1.0 (2018-07-03)FixZeroDivisionErrorwhen calculating theaspect_ratiofor image sizes with one dimension set to0.
[thet]Add Italian translations.
[cekk]Fix i18n domain for cropping action button
[cekk]Fix Archetypes compatibility.
[davisagli, thet]2.0.1 (2017-02-27)Register resources according to Plone best practices.
[thet]2.0 (2016-11-24)Load plone_app_imagecropping bundle only for logged in users.
[agitator]Updated styles
Removed unused settings
[agitator]Depend on Products.CMFPlone instead of Plone (no Archetypes by default).
Fix conditional zcml.
[jensens]2.0b6 (2016-11-18)Add Spanish translation
[erral]2.0b5 (2016-11-06)Align editor template layout to Plone standards and place it withincontent-coremacros.
[thet]Restrict image in navigation tab to not exceed the tabs size.
[thet]2.0b4 (2016-07-13)Fix: Scales got lost after content with image was modified.
This is solved by using the new scale factories fromplone.scale/plone.namedfile.
Needs plone.namedfile 4.0+ and plone.scale 1.5+.
[jensens]2.0b3 (2016-04-29)Fix: Enable accidentally disabled JS bundle in resource registry.
[jensens]2.0b2 (2016-04-01)Give IImageCroppingBehavior a shortname.
[jensens]Fix: Make croppingeditor play nice with pat-modal.
[jensens]2.0b1 (2016-03-29)Run i18ndude and translated new/missing strings to German.
[jensens]Use more modern cropper Javascript library, kick out JCrop and rewrite all JS.
It uses patterns now to initialize the cropper and image selections.
[jensens]Code refactoring and big overhaul to make it work with Plone 5 (only) and the new JS.
[jensens]Housekeeping: upgrades at one place, zca decorators, travis caching
[jensens]Added more Dutch translations.
[maurits]Added French translations.
[laulaz]1.3 (2015-12-10)introduce Changed/Removed events after editing cropping information
[petschki]remove initial content scrolling (aka location.hash)
[petschki]Use “application/javascript” media type instead of the obsolete “text/javascript”.
[hvelarde]fix direction=’down’ handling. Deliver cropped scale if we have one.
[petschki]Purge proxy caches if needed on crop.
[alecm]Fix issue with crops disappearing for non-blob images (e.g. ATNewsItem images)
[alecm]Refactor upgrade step to reduce memory consumption and avoid restarts on instances running with supervisor’s memmon.
[hvelarde]1.2 (2014-10-15)Add Finnish localization
[datakurre]Fix Chameleon compatibility
[datakurre]Remove hard dependency on plone.app.contenttypes to avoid compatibility
issues with Plone 4.2 (fixes#57).
[hvelarde]Update package dependencies.
[hvelarde]fix error with copy & paste for dx image types #52
[pysailor]do not include testing.zcml automatically and use the behavior for the
testing-dx-type.ATTENTION: we no longer provide the cropping maker interface forplone.dexterity.content.DexterityContentautomatically, please useplone.app.imagecropping.behaviors.IImageCroppingBehaviorto enable
cropping for your dexterity types.
[fRiSi]1.1 (2014-09-13)scroll to selected scale in middle column after save.
[jensens]use field names (not ids) in editor view. Slightly better style now.
[jensens]add upgrade step for sane migration from 0.1 to 1.0
[fRiSi]1.0 (2014-09-05)fixed jcrop image to not scale wrong (!).
[jensens]better initial selection for cropping, also mark scales in left column
cropped/ uncropped and show uncropped in its default appearance.
[jensens]Fix: Removed registration of Traverse for dexterity types since its
base class does not support dexterity either.
[jensens]Added subscriber to recreate all scales on copied objects.
[saily, jensens]fixed some glitches in JCrop init process.
[jensens]added dexterity behavior for image cropping.
[benniboy]Major cleanup and split up code and interfaces into Dexterity and Archetypes.
Also renamed/ moved Interfaces to be used as markers! Attention, in custom
code minor changes are needed in order to point to the correct interfaces.
see README for details.
Also removed some superfluous/unusedinterface=passes to methods ofIImageCroppingUtils.
[jensens]Update Jcrop to version 0.9.12.
[hvelarde]Useplone.app.robotframeworkinstead of writing all keywords from
scratch. This brings us autologin support for faster robot tests. Rewrite
tests to test scenarios.
[saily]Drop Plone 4.1 support and tests.
[saily]Cleanup code, align to all coding conventions for Plone.
Pep8, Flake8, pep3101, sort imports, remove grouped imports, …
[saily]Cleanup/refactor javascript code, don’t define global variables.
[saily]Add coveralls, code-analysis and update travis configuration.
[saily]Check for plone.namedfile not Dexterity. It can be used separately.If plone.namedfile is used it needs to be at least version 2.0.1[tomgross]@@croppingeditornow displays a message to add croppable scales
in the controlpanel if there are no croppable scales to show.
(previously this caused aSiteError)
[fRiSi]Renameimagecropping_keywords.txttokeywords.robotto allow simple
reusage inplone.app.robotframework.
[saily]pin zc.buildout=2.1.1 for travis-ci bootstrap
[petschki]Added Russian translations
[bogdangi]Prevent fieldname losing for for current field
[bogdangi]Fixed #21 (cropping was reset on modifying image)
[tomgross, fRiSi]Only test Plone 4.2 and 4.3 with Python 2.7 on Travis-CI
[tomgross]0.1rc2 (2013-05-03)Include styles for authenticated users only.
[saily]Make tests work in Plone 4.1
[saily]Renameacceptancetorobotto align newplone.app.robotframeworkguidelines.
[saily]Pinplone.app.testingto make Plone 4.1 tests work.
[saily]Use correct dependency for plone.app.testing with extra[robot].
[saily]Add cropping ui-tests using robotframework
[saily]Updatebootstrap.pyto work withzc.buildout2.0
[saily]Implemented #11 - Mark image scales as “croppable”
[jensens]Added tests for control panel and registryAdded Spanish and Brazilian Portuguese translations
[hvelarde]Small documentation update
[saily]0.1rc1 (2013-03-11)add support for multiple image fieldsrefactored javascript includes so the editor can be loaded as overlayfixed JS error when editor is invisible (ie editor is loaded in an overlay)fixed edit/remove actions when editor is loaded as overlaymake editor view more convenient (disable columns)update documentation
[petschki]0.1b1 (2013-03-03)Made cropping work in dexterity-only sites
[pysailor]Add travis integration
[saily]0.1a2 (2012-11-10)fix testsadd test setups for Plone 4.1-4.3Products.CMFPlone dependency. Right now we only support Plone >= 4.1make dexterity support optional
[petschki]0.1a1 (2012-11-05)public alpha release
[petschki]Package created using templer
[fRiSi]