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 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.
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.
See also: