Umbraco - If it bleeds we can crop it
The beauty of Umbraco is the flexibility it offers users. The downside of this flexibility however is it allows the user to put those square pegs into round holes. Images are a major offender for this. If the user uploads a massive, strange ratioed image it’s not only going to potentially ruin your great looking Umbraco site but also increase your page load speed.
Fortunately the Umbraco Image Cropper offers the perfect solution to this problem. The image cropper offers the user the ability to crop and resize images as well as set what the image focal point is. Most importantly for us developers though, is it allows us to define predefined heights and widths for our images, meaning no more 5000 pixel wide images.
Setting this up is super simple and can be done in two swift stages:
The first thing you’re going to want to do is set up what sizes you want your images to be. This can be done through the CMS by editing the “Image Cropper” Data Type and hitting that “Add new Crop” button. Once you’ve defined your alias and crop sizes hit save and you’re done.
Once you’ve got your crop set up you’ll need to pull it through onto the frontend. Umbraco has you covered with its handy GetCropURL function.
Url.GetCropUrl(Model.Content.Image, "yourCropAlias", false)
If those loading times are still getting you down don't forget you can just add the “quality” parameter to end of your URL to help compress the image further.
Url.GetCropUrl(Model.Content.Image, "yourCropAlias", false) + "&quality=80"
Drop us a line if you need any further info, advice or support from our expert Umbraco certified developers
