Focal point based image cropping for EPiServer using ImageResizing.NET

There are a lot of solutions out there to ensure that the important information in an image is always visible, regardless of how you crop it. Now, we can do it in EPiServer, too.

For a long time, me and my team mates have been discussing image optimizations and how to make it as effortless as possible for editors to work with image content. We've been using ImageResizer to do it for quite a while, but we haven't had a solution for how to modify the cropping area based on width and height. This could sometimes lead to the unwanted effect of cropping faces, and/or other parts of images that were important.

We procrastinated a lot, and kept hoping for someone else to solve the problem for us, but finally we gave in and sat down together to get our hands dirty.

After discussing a lot of different use cases, we settled on having one crop point, and store that, instead of saving a lot of different settings based on different usages. The main reason for this was that a single crop point gives us the flexibility to use the image in many different scenarios. It gives us the freedom to change the UI of our website, without having to involve the editor again if we choose to change or add usage scenarios.

Ok, so how does it work?

First, the editor sets a focal point in the image. It is done in EPiServer by clicking on the image in the Focal Point Editor.

When the image is loaded by the website visitor, the focal point is used to determine what part of the image should be included in the crop.

If the focal point is instead placed in the center of the pizza, the crop using the same parameter is altered. (The focal point is red, but it is there, in the center of the pie, trust me)

The plugin has support for both querystring parameters, and presets. We've been using presets together with IIS UrlRewrite Module to make for really pretty image URLs, but that's another blog post :)

The NuGet package is available from the EPiServer NuGet Feed, or you can download the source code from GitHub.

This blog post was originally published on creuna.se