Introduction

This document provides an overview of the Focal Points feature and its implementation in Imageshop. The Focal Points feature makes it possible for the user to specify a specific part of the image to be the central focus. This feature aims to ensure that automatic cropping or resizing maintains the desired content of an image. 

The user can set the focal point in various ways, such as interacting directly with the image on the detail page, accessing a specific focal points page, using the image picker, or through the Web API.

Focal points are also made available through the Web API, allowing the end user to make use of the focal points to fit their needs.    

Admin

Focal point page

The Admin application includes a focal point page in order to set focal points on several images efficiently. The page has support for searching and filtering to help find desired images, and also has an option to display images with missing focal points. The focal point changes will be stored in the browser session until they are saved by pressing the “Save all” button, or the session expires. 

Imageshop - Focal point page

Detailpage

The detail page in the Admin application is extended with an option to edit the focal point of an individual image. When clicking the “Edit focal point” button, an editor is displayed with a focus point marker. The user can then edit the focal point and save it by pressing “Save focal point”, or cancel the operation. 

Imageshop - Detail page

Imageshop - Detail page with focal point editor

Image picker

In the image picker, users are able to edit the focal point for individual images, in a similar fashion as in the detail page in the Admin application. The chosen focal point will be taken into account when automatically cropping an image based on certain dimensions in the image picker. 

Imageshop - Editor in image picker

Imageshop - Editing focal point in image picker

Web API

The Imageshop Web API supports setting, getting and deleting the focal point for a document, as well as retrieving focal points for several documents. The corresponding endpoints are shown in the table below. 

API methods for Focal Point

Imageshop - Focal point endpoints

Permalinks

All permalinks where CropMode is set to ZOOM and where the whole image is selected in the cropped area, will use focal point to fit the given width and height, with a fallback to the center point. In addition there are two simplified methods designed to give and easy way to create permalinks for a given DocumentId and a desired width and height or profileId. Permalinks created with these methods will result in images which uses the given focal point or center of the image as focal point if focal point is not provided.

Imageshop - Focal point endpoints