Stephan Lonntorp
Sep 13, 2016
  8207
(9 votes)

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.

Setting the focal point to the far left in the image

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.

The image is cropped using the focal point

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 focal point is moved to the center of the pizza

The crop is altered based on the focal point

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

Sep 13, 2016

Comments

Sep 14, 2016 09:06 AM

Nice work! 

valdis
valdis Sep 18, 2016 08:00 PM

This is awesome! Is 9.7 lowest version you require?

Stephan Lonntorp
Stephan Lonntorp Sep 21, 2016 10:53 PM

Yes, 9.7 is the lowest version that has the IContentCacheKeyCreator interface that we use to generate cache keys off of ContentReferences.

Cevin
Cevin Dec 1, 2017 07:03 PM

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

Aria Zanganeh
Aria Zanganeh Apr 27, 2018 01:29 AM

Great job mate .. 

Please login to comment.
Latest blogs
Create a multi-site aware custom search provider using Search & Navigation

In a multisite setup using Optimizely CMS, searching for pages can be confusing. The default CMS search regardless of search provider does not...

dada | Jun 12, 2025

Tunning Application Insights telemetry filtering in Optimizely

Application Insights is a cloud-based service designed to monitor web applications, providing insights into performance, errors, and user behavior,...

Stanisław Szołkowski | Jun 12, 2025 |

JavaScript SDK v6: Lightest, Most Efficient SDK Yet

Need a faster site and less frontend bloat? JavaScript SDK v6 is here —and it’s the lightest, smartest SDK we’ve ever released for Optimizely Featu...

Sarah Ager | Jun 11, 2025

Boosting Indexing Efficiency: Reindex Pages Directly from Optimizely’s Navigation Pane

There can be various reasons why you might want to trigger indexing or reindexing of a page/node directly from the navigation pane. In my case, we...

Praful Jangid | Jun 11, 2025