·¬ÇÑÉçÇø

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.

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.

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:


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.

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.

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:

Previous Topic
Registering image sizes
Next Topic
Image URLs
Was this topic helpful?
Thanks for your feedback.
Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

•
•
•
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

• Content types
• Modules
• Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

• Dashboards
• Publishing
• Workflows
• Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

• Field types
• Content modeling
• Rich-text elements
• Images
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

• Google Analytics
• Shopify
• Apple News