Umbraco 7 Image Cropper
This week I've started my first project in Umbraco 7 (7.2.1 to be precise) which I've been looking forward to. The first and most obvious difference is the new UI which has been long overdue for a face lift. The second thing I noticed is there's no more uComponents! At first I was somewhat alarmed but then discovered that the most popular uComponents have been moved into the Umbraco core and rebuilt for the new AngularJS platform.
One component which I stumbled across while looking at through the available types was the Image Cropper component. It turns out, as of version 7.1, Umbraco ships with inbuilt image cropping system and what's more impressive is that it seems to actually do the job! I've found with CMS's in general that usually you can't expect too much from built in components but in the case of the image cropper and in fact all the Umbraco 7 built in components that I've tried so far is that they all seem to be up to scratch. It seems that with Umbraco 7 the approach was to provide a higher quality set of core component's and rely on packages for any special requirements. I'm used to seeing the massive list of uComponents datatypes but in reality only find myself using a handful of them, I think they've made the right decision here.
Key features of the Umbraco 7 Image Cropper
- Allows you to pre-define crop sizes
- Allows requesting of images by pre-defined sizes or by an arbitrary dimension
- Focal point of image can be set on every image, this is absolutely critical to have when automating crops
- Individual crops can be edited (when using pre-defined sizes)
- Can be (optionally) be integrated into the existing Umbraco Media system
- It's powered by ImageProcessor which is a well established open source image processing library.
- Designed to integrate with responsive javascript libraries such as Slimmage.
Note the focal point indicator and the two crop previews
