Umbraco 7 and uCommerce 7 – Using the image cropper tool

There is a bit of disparity between Umbraco and uCommerce and the way they share (or don’t) assets. The image cropper is by far one of the coolest features of Umbraco and makes responsive image output amazing (especially using Foundation’s Interchange). Natively, of course, uCommerce just uses a media picker. It’s not elegant, and you just don’t have the same control over images.

Luckily there is a solution. It’s a bit tedious and will require manual labor, but the pay off is worth it.

Setting up Umbraco’s Media Type

First, if you already have media being universally accepting of the image cropper with a bunch of defined crops, you can disregard this step.

1. In your Umbraco installation, you are going to want to go to Settings > Media Types and then create a folder to house your cropper images (it’s for better organization). Make sure it has a folder browser with “contents” as the alias.
   
2. Make a new media type for the image.
   
3. Instead of using the upload file data type for umbracoFile, you will want to use your cropper and set the crops for it. Here’s an example of mine:
   
4. Now you can go to media and upload a new image. The kicker here is you have to use Create > Image (or whatever you named your image media type with the cropper). Umbraco will default the file to a regular image if you do bulk uploading.
   

Setting up uCommerce

1. Create a new data type in uCommerce that utilized the Image Picker Multi Select (it might work with just Media, but it’s untested).
2. Go to your product definition and add that data type (I called mine ImageCropper).
   
3. If you want this to render on variants, you just need to assign it to a variant.

Code Output

Media uses the product definition alias. When you’re outputting the image, you use umbracoFile to pull from that field in the media and then append the right crop (store-product-medium in this case).