Using Image Sizes

After you create image size objects as described in Creating Image Sizes, you can use the ImageSize class to retrieve URLs for delivering the images to clients.

Retrieving an Image Editing URL

The snippet Listing Image Sizes by Display Name instantiates an image size with dimensions 150 × 100. You can use the method get to retrieve the image-editing URL.

1
2
Map<String,String> imageSizeMap = imageSize.toAttributes(image);
String imageEditingUrl = imageSizeMap.get(SRC_ATTRIBUTE);

In the previous snippet—

  • Line 1 instantiates a map of image attributes to be applied to a specific StorageItem image.
  • Line 2 retrieves a string that includes the location of the image editor, various image editing commands, and the encoded URL for the image on your Brightspot server. The resulting image-editing URL is similar to the following.
http://domain.com/dims/default/381dfbc/2147483647/strip/true/crop/474x316+22+0/resize/150x100!/?url=http%3A%2F%2Fdomain.com%3A9480%2Fstorage%2F5b%2Fde%2Fdd643556494ea88c10a74b2c2f02%2Fbreakfast-517.jpeg

In the previous URL, the dimensions for the resize are the same as those specified in the snippet Listing Image Sizes by Display Name.

At run time, Brightspot checks if a cached version of the edited image is available; if not, it sends the image along with the editing commands to the DIMS server, caches the result, and sends the resulting image to the client.

For an explanation of an image-editing URL, see Image URLs.

Retrieving an Image’s URL

Brightspot saves images (and other types of files) as StorageItems, automatically associating a publicly facing URL to the image. You can use the static convenience method ImageSize.getUrl to retrieve the URL.

String myUrl = ImageSize.getUrl(image);

The previous snippet retrieves the publicly facing URL for the image stored on your Brightspot server, similar to the following.

http://domain.com/storage/5b/de/dd643556494ea88c10a74b2c2f02/pancakes-with-syrup.jpeg

See also:

Retrieving Image Attributes from Styleguide

At build time, Brightspot creates View interfaces from all data files in the directory /express/styleguide/. The interface has a method for each element in the data file. For example, referring to the listing Data File with _image Key, the corresponding View is as follows.

1
2
3
4
5
6
7
8
package com.psddev.styleguide.core.image;

public interface ImageView extends PreviewPageViewMainField {

    default Map<String, ?> getImage() {
        return null;
    }
}

In the previous snippet, lines 5–7 represent a method for retrieving attributes from the data file, including any attributes imported from _config.json by using the element "_image": true.

The following snippet is an example of a ViewModel implementing the interface ImageView.

Retrieving Image Attributes
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
package content.article;

import com.psddev.styleguide.core.image.ImageView;
import java.util.Map;

public class ImageViewModel extends ViewModel<Image> implements ImageView {

    @Override
    public Map<String, ?> getImage() {
        return ImageSize.getAttributes(model.getImage());
    }
}

In the previous snippet—

  • Line 8–11 generate a map of image attributes based on the current template context. For example, referring to the listings Data File with _image Key and Context-Sensitive Image Attributes, the map’s keys and associated values are are as follows:
  • src="/path/to/image.png"
  • width="100"
  • height="50"

You can use this map to build a standard HTML <img> tag.

See also: