Freelance Software Developer

A quick post today on Umbraco image handling.

Image Processor

Umbraco 7 comes with the ability to manipulate images courtesy of Image Processor (http://imageprocessor.org/) and its URL API extension ImageProcessor.Web.

The beauty of ImageProcessor.Web it that it allows you to manipulate images, so you can include image manipulation inside your HTML mark up like

<img src="/image.jpg?mode=crop&width=634&height=634" alt="Image not at original height" />

As you can probably see the image above will be cropped to 634x634. This capability comes in handy when serving different size images for different devices saving on bandwidth and download times.

Image processor comes with a whole range of “processors” you can apply to an image, but by default only autorotate, background colour, crop, quality, format and resize are enabled.

For more information on how to use the URL API see the documentation at http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/ .

If you want to use more processors – like Gaussian Blur or Watermark - you’ll need to modify the Processor.config file under /config/image processor; instructions on how to do this can be found at http://imageprocessor.org/imageprocessor-web/configuration/.

Umbraco Cropper

Image Processor is all very well and good but that's not all there is to image handling in Umbraco, the back-office also provides the capability for you to set predefined image crops, so that when an image is uploaded Umbraco can make it automatically available in those crop sizes, and editors are able to set a preferred focal point on the image.

An example image showing image crops in the back-office from one of my themes is shown below:

The benefit of providing predefined crops like this is that you can reference them in your code and specify which crop to use when and where. Crops definitions can also be amended (provided the name, alias doesn't change) without amending code. Plus editors get to see what they'll looko like when used and specify the focal point for when they're cropped or resized.

This functionality isn’t very well explained in the Umbraco documentation, and is a little too complex to go in to detail here, but essentially you go in to Settings > Media Type > Image, add an Image Cropper property, edit the image cropper property to have a crop (or two), save it to the form and remove the original image upload property. There's some more detail under the Image Cropper property editor documentation at https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/image-cropper

Now, if you click on Media in Umbraco’s back-office, then click on the image (name) you’ll be taken to a screen which shows all the image crops available courtesy of the Image Cropper Property Editor.

I tend to use this functionality in a picture element (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) like so:

<picture>
            <source srcset="@mediaPicker.GetCropUrl( "Page Feature - 1920 x 500 (L)")" media="(min-width: 1024px)">

            <source srcset="@mediaPicker.GetCropUrl( "Page Feature - 1024 x 250 (M)")" media="(min-width: 800px)">

            <source srcset="@mediaPicker.GetCropUrl( "Page Feature - 800 x 150 (S)")" media="(min-width:   0px)">

            <img class="img-responsive" srcset="@mediaPicker.GetCropUrl( "Page Feature - 1920 x 500 (L)")" alt="@altText">
  </picture>

NOTE: MediaPicker here is a refence to IPublishedContent object; see the documentation on the Image Cropper Property Editor for information on how to access this object.

Umbraco Caching

Lastly, if you want to compress your images, for improved performance, ImageProcessor.Web has an extension called ImageProcessor.Web.PostProcessor.

This is an automated feature which will automatically compress images once installed.

Post Processor is available as a Nuget Package as is installed as using Install-Package ImageProcessor.Web.PostProcessor. See http://imageprocessor.org/imageprocessor-web/plugins/postprocessor/. for more information.

Trouble shooting notes:

• You may need to delete the contents of the cache directory to get image compression to work. The files caches there already won’t be compressed but may have been manipulated (cropped, resized, … ) already.

• Umbraco 7.9.3 ships with Image Processor 2.5.4. Make sure the version of PostProcessor you install is compatible, version 1.3.0 wasn’t a the time of writing, I used ImageProcessor.Web 4.8.5 and PostProcessor 1.2.3 with 2.5.4.

• Check your compression. I found PNG images were doubling in size. This was an issue to do with PNG8 images being reformatted as PNG24. You may wish to reformat editor’s images as JPG to reduce download sizes.

Want to Thank Me?

Did you like this article? Was it helpful? Why not buy me a coffee on Paypal? Buy me a coffee?