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
Nice work!
This is awesome! Is 9.7 lowest version you require?
Yes, 9.7 is the lowest version that has the IContentCacheKeyCreator interface that we use to generate cache keys off of ContentReferences.
Hi Stephan...
First of all thanks for your blog post. We were looking for a solution to our image cropping problem and the plugin looks like a big step towards what we are trying to achieve... the problem is that the plugin has been installed, the editor UI works, the point data is saved against the content it but the focal point does not seem to work with ImageResizer.
We have verfified the config, even checked the src code for conflicting settings with our image resizer but found nothing... the magic is not happening ;-)
"When the image is requested, the ```crop``` parameter is added "under the hood", and then ImageResizing does its thing." --- this does not seem to happen and it doesn't do its thing...it feels like the request is not interupted and applying the focal settings.
Do you have any working examples/samples of the plug in being used? Or any config tips? Is the plugin working with EpiServer 10? Do other plugins caused conflicts?
Many thanks,
Cevin
Great job mate ..