Focal points

Modified on Mon, 4 Sep, 2023 at 8:11 AM

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

Method

Endpoint

Parameters

Description

POST

/Document/SetFocalPoint

focalPoint (DocumentId, SubDocumentId, X, Y)

Set a focal point. 
Return values:

  • 0 = Success

  • 1 = Out of range

  • 2 = Not updated

  • 3 = Unknown error

  • 4 = Unauthorized

GET

/Document/GetFocalPoint

documentId (integer)

Get focal point for document with the given id.

Return values:

  • Null or focal point

GET

/Document/GetFocalPoints

documentIds (array[integer])

Get focal points for documents with the given ids

Return values:

  • Null or list of focal points

DELETE

/Document/DeleteFocalPoint

documentId (integer)

Delete focal point for document with given id.

Return values:

  • 0 = Not deleted

  • 1 = Deleted


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

Method

Endpoint

Parameters

Description

GET

/Permalink/CreatePermaLinkFromDocumentId

documentid (integer)
width
height
subdocumentid
pageUrl

Creates a permalink based on the given width and height.

Return values:

  • Permalink and width and height.

GET

/Permalink/CreatePermaLinkFromDocumentIdAndProfileId

documentId
profileId
subDocumentId
pageUrl

Creates a permalink based on the given profileId

Return values:

  • Permalink


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article