Content-aware automation for Episerver's EPiFocalPoint plugin using Azure Cognitive Services

Basic installation:

1. Configure your Web.config file - add following keys:

  <appSettings>
    ...
    <add key="CognitiveServicesApiKey" value="0123456789abcdef"/>
    <add key="CognitiveServicesServer" value="https://westcentralus.api.cognitive.microsoft.com"/>
  </appSettings>

2.1. Make your ImageFile model inherit from FocalImageData

public class ImageFile : FocalImageData

OR

2.2. Inherit from IFocalImageData

public class ImageFile : IFocalImageData

In this case you need to decorate FocalPoint property with following attribute

[BackingType(typeof(PropertyFocalPoint))]
public virtual FocalPoint FocalPoint { get; set; }

Also optionally decorate SmartCropEnabled flag to be more descriptive for editors

[Display(Name = "Use FocalPoint for cropping")]
public virtual bool SmartFocalPointEnabled { get; set; }

Basic usage:

Use HtmlHelper extension FocusedImage

Parameters:

• image - ContentReference to ImageFile property
• width - Desired width of cropped image
• height - Desired height of cropped image
• objectFitMode - Possible values: fill, contain, crop (default). Fill will fill cropped image to specified width/height rect if result crop would be smaller adding pad if necessary. Contain will contain original image within specified bounds without cropping. Crop will only crop image.
• noZoomout - Normally ImageResizer zooms out huge images to preserve as much content as possible. Use this flag to stop this behaviour

Example:

@Html.FocusedImage(Model.Image, 300, 300, forceSize: true, noZoomout: true)