Posted by April Sadowski and filed under Blog, CMS

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.
    Image Folder
  2. Make a new media type for the image.
    Image media type
  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:
    Image Cropper Settings
  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.
    Upload image

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).
    Defintion Property Editor
  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).

About April Sadowski

Part designer and part developer, April has been working full-time for over a decade. She has a long line of ADDY Awards and published design and is the go-to person for HTML/CSS/LESS needs and front-end development. On her off-hours she can be found writing novels (she's published several), doing voice acting or audio production, or gaming. Find April at Stack Overflow

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>