The Umbraco Image Cropper has always been a favourite of mine, having the ability to let the customer change how the image looks per device/screen width breakpoint is a must have nowadays. Although, as good as it was, it did have some drawbacks.

My main issue with it was that you had to upload an image whenever you used the data type a document type. An alternative to minimise this would have been to have all of your crops on the image upload itself, however, this is just a mess and is unmanageable. Especially with big projects where you could have 100's of crops. And most importantly you cannot use the image cropper in nested content/block lists, well Responsive Image Picker resolves all of those issues!

How did I resolve this?
Well I essentially stripped out the Umbraco Image Cropper and extend it so that it relies on the media library instead. Pretty simple eh?

How does it work?
Because it's just the Umbraco Image Cropper but extended it works exactly the same as it did before. However, there's some nice features that have been added. To start off with, the settings have been updated to include a breakpoint per crop, default image and picture classes.

Responsive Image Picker settings

Once you've created the data type and added it to your document type, you should notice the media picker is there. Simply choose your media and crop away!

When it comes to actually retrieving the crops/image I've created a handy extension called GetPictureTag(). The extension accepts a bunch of optional parameters such as:

  • Add additional picture classes
  • Add additional image classes
  • Set alternative text
  • Override image quality