Image Focal Point handling in Gentics Mesh headless CMS

We've come a long way from the time of web development when the main target was the desktop computer screen. With mobile devices nowaday holding the majority share of web usage, content delivery needs to be optimised for a number of different scenarios. This is not trivial on large scale.

One tricky thing is optimising the cropping of images for different aspect ratios. Gentics Mesh is a contemporary CMS riding the headless CMS wave. Written in Java and a rich feature set, it is a valid Open Source alternative to Contentful with GraphQL APIs, flexible permissions, media management and a host of other features - making it a good contender for building decoupled sites with Next.js.

One area where Gentics Mesh is a well positioned compared to competition, Open Source or Proprietary, is image generation for various screen sizes and formats. In it's latest Beta version, Gentics Mesh gets a feature known as Focal Point Handling.

This allows attaching focus point metadata to images stored in the media library of content repository. This allows automatic cropping to suit to different scenarios from desktop, vertical mobile to horizontal mobile - similar to the Drupal module Focal Point.

By using the focal point parameter in calls to the content feed REST API provided by the CMS, you can influence where the most interesting part in a larger image is. Coupled with a suitable User Interface it allows content editors to optimise content for delivery across channels automatically.

For a set of quick examples, consider the following URLs provided by the project documentation:

Visual debugging of focal point with the fbdebug parameter: https://demo.getmesh.io/api/v1/demo/webroot/images/ford-gt.jpg?fpx=0.5&fpy=0.4&w=800&h=600&crop=fp&fpdebug=true

parameter: https://demo.getmesh.io/api/v1/demo/webroot/images/ford-gt.jpg?fpx=0.5&fpy=0.4&w=800&h=600&crop=fp&fpdebug=true Zooming to focal point area with the fpz parameter: https://demo.getmesh.io/api/v1/demo/webroot/images/ford-gt.jpg?fpx=0.5&fpy=0.35&fpz=3.0&w=800&h=600&crop=fp&fpdebug=true

Previously similar features have been available in select products, like the Microsoft Sway presentation tool, whose image editing feature allows multiple focal points - making for a very flexible editing experience. An example of how Sway image focusing works is shown in the video below:

The Focal Point handing is definitely an interesting feature. I hope this will become more common soon as it makes the creation of automatically cropped images feasible. Perhaps in the future automatic image analysis APIs like Azure Computer Vision will be used to automatically define the focus point - freeing content creators from this manual task and allowing automatic metadata to existing media collections.

-- Jani Tarvainen, 18/01/2018