·¬ÇÑÉçÇø

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:

  • Using Brightspot’s image editor.
  • Integrating the  library.
  • Integrating a cloud service such as .


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.

•
•
•
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