Stephan Lonntorp
Sep 13, 2016
  7038
(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
Caching & Rendering of metadata from the DAM

For the EPiServer.Cms.WelcomeIntegration.UI 1.2.0 release, we have facilitated the ability to cache and render metadata from assets within the DAM....

Matthew Slim | Jun 2, 2023

Conversion Rate Optimization: Maximizing ROI through Data-Driven Decisions

In today's digital landscape, businesses are constantly looking for ways to improve their online presence and drive more conversions. One effective...

JessWade | Jun 1, 2023

Enhance Your Writing with Suggestions

Are you tired of staring at a blank screen, struggling to find the right words? The Epicweb.Optimizely.AIAssistant Addon is here to revolutionize...

Luc Gosso (MVP) | May 31, 2023 | Syndicated blog

Content Graph - Letting GraphQL do all the hard work for you

Background As we have seen before, setting up Content Graph on the CMS side is pretty easy. However, when it comes to the “head” part of the setup,...

Kunal Shetye | May 26, 2023 | Syndicated blog

Improved headless functionality in Customized Commerce

Did you know that with the release of Content Delivery Commerce API 3.7 we have massively improved the out of the box headless capabilities of...

Marcus Hoffmann | May 25, 2023

Boost Your Productivity with the AI Assistant Addon for Optimizely Content Cloud

In today's fast-paced digital world, efficiency and convenience are paramount. That's why we're excited to introduce the Optimizely AI-Assistant...

Luc Gosso (MVP) | May 25, 2023 | Syndicated blog