The Image point editor for Optimizely/Episerver CMS can be used together with the Picture helpers in PictureRenderer.Optimizely or  ImageProcessor.Web.Episerver  to control the cropping of images. 

If showing the same image in different height and width on your site, you might want to control how the image is cropped. Let’s say you are showing super cool, wide image on a page.

But when listing pages, a square version of the same image is used as a thumbnail. You get a fist flying in the sky. Not cool.

One way of dealing with this scenario is to use a focal point. The focal point tells the cropping functionality what part of the image to keep.

The Image point property editor

The Image point editor is a very simple, generic editor. The values for the point’s position is saved as a single string. That makes it very easy for other libraries to use those values (the downside is of course that the values are not typed).

Use ImagePointEditor together with a Picture helper

Add a string property named “ImageFocalPoint” to your ImageData model. Decorate the property with the ImagePoint UI hint.

using ImagePointEditor;

[UIHint(ImagePoint.UIHint)]
[Display(Name = "Focal point")]
public virtual string ImageFocalPoint { get; set; }

When you edit the image in “All properties view” you can click on the image to set the focal point.

Testing it on the Alloy demo site. You can see the difference on the teaser to the right.

Additional config, needed for Episerver CMS 11 only.

Let the Picture helper know that it can fetch the focal point from the image by adding this appsetting in Web.config:

<add key="IPE_FocalPointFromImage" value="true" />

Post updated with PictureRenderer info in Oct 2021