Control the cropping of your images with a focal point

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.
man
man_fistBut 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.
ImagePoint

 

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

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

6 thoughts on “Control the cropping of your images with a focal point

  1. Hi Erik

    A pretty old post and functionality, but do you know if this is still supported in Picturehelpler out of the box? I have added the setting in appconfig but cant see that any focalpoint is generated out of the box with the picturehelper.
    Any code examples by any chance?

    Anyway, a very nice plugin, well done!

Leave a Reply to Erik Henningson Cancel reply