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 | 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 |
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();
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
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.
