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. For more information, see Image Format. | 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 |
Example 1: Listing Image Sizes by Display Name
1 2 3 4 5 6 | ImageSize imageSize = ImageSize.builder()
.internalName("landscape-large-50x50")
.displayName("Landscape large 150x100")
.width(150)
.height(100)
.build();
|
In the previous snippet—
- Line 3 sets the image size’s display name to
Landscape large 150x100
. - Lines 4–5 set 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.

Example 2: Listing Image Sizes by Group Name
1 2 3 4 5 | ImageSize imageSize = ImageSize.builder()
.group("Rectangles")
.width(200)
.height(100)
.build();
|
In the previous snippet, line 2 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.

See also: