Brightspot CMS Developer Guide

Focus points


A focus point is an image’s ideal vertical and horizontal center after cropping. You can specify focus points using the following techniques:


If you know that an image’s subject is always centered in the middle (as in time-lapse photography), you can return that coordinate in a Focus object. This technique ensures Brightspot generates crops around the image’s native center.

import com.psddev.cms.image.Focus;
import com.psddev.cms.image.FocusCalculator;
import com.psddev.dari.util.ObjectUtils;
import com.psddev.dari.util.StorageItem;

public class CenterFocusCalculator implements FocusCalculator { 

    @Override
    public Focus getFocus(StorageItem storageItem) {
        Map<String, Object> metaData = storageItem.getMetadata();
        
        double imageWidth = ObjectUtils.to(double.class, metaData.get("width")); 
        double imageHeight = ObjectUtils.to(double.class, metaData.get("height"));
        Focus centerFocus = new Focus(imageWidth / 2, imageHeight / 2);

        System.out.println("Focus, x-coordinate " + centerFocus.getX()); 
        System.out.println("Focus, y-coordinate " + centerFocus.getY());
        return centerFocus;
    }

}
  • Declares this view model implements the FocusCalculator interface.
  • Retrieves the image’s width and height from the metadata, divides each in half, and returns both values in a Focus object.
  • Prints the focus point to the console.
Focus, x-coordinate 200.0
Focus, y-coordinate 131.0

Previous Topic
Images
Next Topic
Creating image sizes
Was this topic helpful?
Thanks for your feedback.
Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Modules
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Dashboards
Publishing
Workflows
Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
Images
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Shopify
Apple News