Brightspot CMS Developer Guide

Creating image sizes


After a user uploads an image, Brightspot crops out various regions depending on the context. For example, in the context of an author’s bio page, the crop region is typically large; in the context of a byline, the crop region is typically small.

The easiest way to instantiate image sizes is in a theme’s configuration file _config.json; for details, see Image sizes. You can also instantiate image sizes using the classes ImageSize and ImageSizeBuilder.

Property
Description
Type
displayName
Customized label for an image size in the image editor. In the absence of the property group, Brightspot lists image sizes first by aspect ratio, then in order of display name.
String
format
Specifies the format in which an image is delivered to the client.
String
group
Heading under which an image size appears in the image editor.
String
height
Height of rendered image in web page.
int
maximumHeight
Maximum height of image size. Aspect ratio will be preserved by the resize at run time.
int
maximumWidth
Maximum width of image size. Aspect ratio will be preserved by the resize at run time.
int
quality
Specifies an image’s visual quality and compression level at run time.
int
srcsetDescriptors
A list of image density or width descriptors to support different device screen resolutions. For more information, see srcSetDescriptors.
List<String>
watermark
Text appearing on top of image, often a copyright notice or attribution.
Watermark
width
Width of rendered image in web page.
int


Type: Watermark

Property
Description
Type
url
The public URL of the image to use as a watermark. Required.
String
opacity
The opacity (0.0 - 1.0) of the watermark image overlay. Defaults to 1.0.
Float
size
The percentage coverage of the watermark (0.0 - 1.0) over the original image. Defaults to 0.25. Double
position

The position of the watermark relative to the original image. Possible values are:

nw - Top Left
n - Top
ne - Top Right
w - Left
c - Center
e - Right
sw - Bottom Left
s - Bottom
se - Bottom Right

Defaults to "se".

String


Example 1: Listing image sizes by display name

ImageSize imageSize = ImageSize.builder()
    .internalName("landscape-large-50x50")
    .displayName("Landscape large 150x100") 
    .width(150) 
    .height(100)
    .build();
  • Sets the image size’s display name to Landscape large 150x100.
  • Sets the image’s aspect ratio to 1.5:1 (= 150 ÷ 100). At run time, Brightspot lists all image sizes by aspect ratio in the image editor. If you have another image size with the same aspect ratio, such as 300 × 200, Brightspot lists it with all other image sizes having aspect ratio 1.5:1.

Image sizes grouped by aspect ratio Image sizes grouped by aspect ratio

Example 2: Listing image sizes by group name

ImageSize imageSize = ImageSize.builder()
    .group("Rectangles") 
    .width(200)
    .height(100)
    .build();
  • Assigns this image size to a group Rectangles. At run time, Brightspot displays in the image editor only one thumbnail for all image sizes with the same group name.

Image sizes grouped by group name Image sizes grouped by group name

See also:

Previous Topic
Focus points
Next Topic
Registering 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