As well as the Cropper iteself, this package includes easy to use extension methods for all three image processors and also Slimmage/Slimresponse for easy implementation using any of the processors.
Umbraco v7.1 is planned to include a Image Cropper as standard so this package may become obsolete :)
Alpha release, there will probably be errors.
- Umbraco 7.0.2
- ImageProcessor.Web or ImageResizer by Imageresizing.net or ImageGen
There is a test site for each image processor.
username: admim, password: password
Running in WebMatrix you need to copy the App_Plugins folder from the ImageCropper folder into the TestSite folder before running.
- Install a server side image processor (ImageProcessor, ImageResizer or ImageGen)
- Install the v7 Image Cropper package
- Clear your browser cache (otherwise you will get JS errors)
- Create a new data type of type "Image Cropper" in the "Developer" section in the Umbraco backoffice.
- Add the predefined crops settings.
- Configure the crop coordinates and preview urls for your image processor (see processor documentation links)
- Assign the data type to an image mediatype in the "Settings" section of the Umbraco backoffice.
- Add some media items and set the crops
- Use the extension class to display the crops you have made in the property editor.
Installation video (shows how to resolve below issue also!)
Known issue:
If you add a cropper property (or any additional property) to an existing media type and try to use it you may get a YSOD. Make sure you save all media items which are using the media type you added the property to.
We have added a useful extension method .HasCrop("propertyAlias","cropID") to check if the crop has been created, using this method will handle the exception and log it to your log4net file.
If you crops are still not showing after saving all items you will need to fully resolve the issue. To do this, stop your application and delete all Examine Indexes (all sub folders within \App_Data\TEMP\ExamineIndexes), start up again and it should now be ok, this will fully recreate the media cache.
There is an Umbraco issue logged for this and it should be resolved in v7.0.3 http://issues.umbraco.org/issue/U4-4129
There are extension methods for each processor included in the package for use with the cropper or standalone.
ImageProcessor - documentation here
ImageResizer - documentation here
ImageGen - documentation here
Video showing how to enable Slimmage http://www.screenr.com/2V8N
Joost van den Berg who created the original v7 Angluar JS image cropper upon which this package is based.
Warren Buckley who created the UmbracoExtensionMethods from which the ImageGen extension method is derived.
Nathanael Jones who created both Slimmage and SlimResponse which are included in the package. Both project are MIT/Apache dual licensed by Imazen.