Control the cropping of your images with a focal point

The Image point editor for Episerver CMS can be used together with the Picture helper in 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 the Picture  helper

Add a string property named “ImageFocalPoint” to your ImageData model. Decorate the property with the ImagePoint UI hint. The UIHint tells Episerver to use the Image point editor for this property.

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

Then you need to let the Picture helper know that it can fetch the focal point from the image. That is done by this appsetting in Web.config:

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

 

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

Thats it! 🙂

 

 

Similar solutions that might be worth checking out

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

Leave a Reply