SaaS CMS has officially launched! Learn more now.

Stephan Lonntorp
Sep 13, 2016
  7601
(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
Integration Bynder (DAM) with Optimizely

Bynder is a comprehensive digital asset management (DAM) platform that enables businesses to efficiently manage, store, organize, and share their...

Sanjay Kumar | Jul 22, 2024

Frontend Hosting for SaaS CMS Solutions

Introduction Now that CMS SaaS Core has gone into general availability, it is a good time to start discussing where to host the head. SaaS Core is...

Minesh Shah (Netcel) | Jul 20, 2024

Optimizely London Dev Meetup 11th July 2024

On 11th July 2024 in London Niteco and Netcel along with Optimizely ran the London Developer meetup. There was an great agenda of talks that we put...

Scott Reed | Jul 19, 2024

Optimizely release SaaS CMS

Discover the future of content management with Optimizely SaaS CMS. Enjoy seamless updates, reduced costs, and enhanced flexibility for developers...

Andy Blyth | Jul 17, 2024 | Syndicated blog