Project Description
CropUp allows images to be auto cropped for any size based on a gravity point so that the image's main motive stays visible even if its not in the center.

UPDATE: documentation still needs to be updated, but now CropUp does face dectection and automatic detection of gravity point.

v1.0β is ready, but documentation needs to to updated.
A demo is available at

While waiting for the documentation have a look at the source of the demo project.

The new version is made as an plugin for ImageResizer.NET.
To enable it add this to your resizer configuation in web.config

      <add name="CropUpUrls" type="Eksponent.CropUp.Plugins.CleanUrls"></add>
      <add name="Eksponent.CropUp.Plugins.ImageResizerPlugin" ></add>

The new version is backwards compatible, however you need to remove the Eksponent.CropUpModule from your web.config if you added it with the previous version.

Another important feature is that the algorithm is also available entirely client side with a JavaScript implementation. This is especially useful for responsive web designs.

You don't need the "CropUpUrls" module. It only makes your URLS nicer


This project is so far a nicely looking, user-friendly data type for Umbraco, powered by a HttpModule that wraps ImageResizer.NET, covered with CropUp-algorithm awesome sauce.


This is the interface. You can drag the red "focus dot" around and highlight an important area of the image.
If you need something in the size 100x100 it will crop until it meets the highlight area. Then it will start scaling down. If a highlight area is not specified it will scale down but ensure that the "focus dot" is shown proportionally to its location


This is the difference between weighted autocropping and normal autocropping.

When you need a URL for an image you use CropUpModule.GetImageUrl(path, args).
<img src="CropUpModule.GetImageUrl("~/media/322/puppy.jpg", new ImageSizeArguments { Width = 300, Height = 300})" />

If you need a specific named cropping (as defined in web.config) that the user may have overriden you go:

  CropUpModule.GetImageUrl("~/media/322/puppy.jpg", new ImageSizeArguments {CropAlias = "thumb"})

This requires a reference to the Eksponent.CropUp.dll assembly. You have that in your bin directory as it's part of the package.

You can use it in your Umbraco installation by following these steps:

Installation instructions

1) Download binaries and put them in ~/bin.

2) Goto Developer->Data Types, right click and then "Create". Pick "Eksponent CropUp" and hit "save".

3) Leave the pre-filled value of "umbracoFile" and hit "save" again.

4) Goto Settings->Media Types->Image and add an property that uses the data type.

5) Edit your web.config and add this
    (<configSections>) (you've got that already) 
        <section name="cropUp" type="Eksponent.CropUp.Config.CropUpSection, Eksponent.CropUp"/>


     <cropUp referenceWidth="620" referenceHeight="480">
            <add name="media" value="~/media"></add>
            <add name="default" value="~/Content"></add>
            <add alias="thumb" name="Thumbnail" width="100" height="100" />
            <add alias="portrait" name="Portrait" width="320" height="400" />
            <add alias="banner" name="Banner" width="620" height="140" />

6) Keep editing your web.config file and add this HttpModule:

For IIS6 and Cassini (Visual Studio's default F5/run web server for web projects)
     <add name="CropUpModule" type="Eksponent.CropUp.CropUpModule, Eksponent.CropUp"/>

For IIS7 and IIS7 Express
   <add name="CropUpModule" type="Eksponent.CropUp.CropUpModule, Eksponent.CropUp"/>

7) Create an image and start CropUp'ing.

Last edited Jul 19, 2012 at 11:52 PM by nielskuhnel, version 12