Brightspot CMS Developer Guide

Retrieving image information

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.

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.

Retrieving an image editing URL
Map<String,String> imageSizeMap = imageSize.toAttributes(image); 
String imageEditingUrl = imageSizeMap.get(SRC_ATTRIBUTE); 
  • Instantiates a map of image attributes to be applied to a specific StorageItem image.
  • 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 group 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 .

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

Retrieving an image’s 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:

  • Image editor configuration
  • File storage
  • StorageItem

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.

Retrieving image attributes
public interface ImageView extends PreviewPageViewMainField {

    default Map<String, ?> getImage() { 
        return null;
    }
}
  • Retrieves 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 view model implementing the interface ImageView .

Retrieving image attributes
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());
    }
}
  • Generates 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:

  • _image