Last chance to get discounted tickets to Codegarden... Price goes up on Today at 20:00 CEST!

3 votes

Zoom Area Cropper

A custom property editor for Umbraco that allows the editor to select multiple cropping areas with different zooms for an image.

After installing the package, create a new DataType and select "Zoom Area Cropper" from the property editor dropdown. Set the width and height you want your crops to output to in the DataType, and then add it to a DocType of your choice.

Once installed, in the editor for a page with the cropper you can select an image, and then add one or more crop points for it. Each crop point has its focus determined by the focus handle, has a name you can change, and then has a zoom level that you can adjust independent of other crops after selecting "preview crop". (See gif above for example of what this looks like).

Here's a simple example of making use of Zoom Area Cropper in your view:

You can view the source code at:

Note: When using with super large images, they do work with the cropper but it can take sometimes several seconds in those instances for the preview crops to update as ImageProcessor works through the bigger images. With more typical media sizes it's much more speedy on previews.


Project owner



Offroadcode has 351 karma points

Project Compatibility

This project is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco Cloud
7.10.x (untested)
7.9.x (untested)
7.8.x (untested)
7.7.x (100%)
7.6.x (100%)
7.5.x (100%)
7.4.x (untested)
7.3.x (untested)
7.2.x (untested)
7.1.x (untested)
7.0.x (untested)
6.1.x (untested)
6.0.x (untested)

You must login before you can report on package compatibility.

Project Information

  • Project owner: Offroadcode
  • Contributors: Janae Cram , Kyle Weems
  • Created: 26/05/2017
  • Current version v1.0.4
  • .net Version 4.5
  • License MIT
  • Downloads: 260

External resources