Manage Product Images

Learning Objectives

After completing this unit, you’ll be able to:

• List the Salesforce B2C Commerce Image Management System features.
• Explain how to specify the image location with the Image Management System.
• List some view type considerations.
• Describe how the Image Management System handles main products versus variation products.
• Describe the benefits of the Dynamic Imaging Service.

What’s in an Image?

Brandon Willson, Cloud Kicks merchandiser, wants to give his shoppers an incredible shopping experience. He knows that shoppers want to see products before deciding to buy, and in multiple views. Images don’t just enhance the shopper buying experience, they are an essential ingredient. But images take a lot of memory, and can slow system response time. Product details often include videos, which use even more system resources. Many merchants use third-party hosting sites for fast display.

Brandon starts by exploring the image services that come with Salesforce B2C Commerce.

• Image Management System: Matrix-based image assignment for internal or external images
• Dynamic Imaging Service (DIS): Service that transforms a single image into other images for product and catalog pages, recommendations, and more

The Image Management System

The Image Management System supports internal images and images from an external site.

It supports:

• Multiple images per product.
• Multidimensional access to images and image subsets for variation products and variation product attributes.
• Image annotation with alt text and image titles.
• Images located both within B2C Commerce and externally.

Brandon configures the catalog image setting first and then configures images by product within a matrix structure.

Image Locations

You address images by their URL references, whether the images are located within the system or not. Specify an image location relative to a catalog, which specifies the location. The default location (if you don’t specify one) points to the internal catalog’s base directory. Here’s how you reference URLs by system type.

The image location and the relative image path are stored separately.

• The image location is stored with the catalog.
• The relative image path is stored with the product (for example, imagestructure/shorts-abc-red_image.gif).

View Types

View types help you group images by things like image size and storefront usage. A new catalog automatically contains these view types.

This image shows a search results page. For each product, B2C Commerce shows a medium image and one or more swatches (as circles).

Here are some details to consider.

• View types must be unique per catalog.
• You must have at least one view type to be able to assign images.
• You don't need to use all view types for every product.
• You can assign multiple view types to an image.

When you assign multiple view types to an image, it acts like a stack. The first view type in the stack is assigned the virtual index number 0; the second is assigned 1, and so on. You can't explicitly set an index number, and you can't place an unassigned index number between assigned index numbers.

This lets you create a relationship between different view types by ordering their stacks. Make sure related images are in the same position (index number) within the stack. For example, small (index 0) for hover help and large (index 1) for the product detail page, represent the same picture but sized differently.

Swatches

Swatch images are special. Typically, there is only one swatch per view type and variant combination. Stacked swatch images are not allowed. Swatches don’t always represent color. Merchandisers often use them for highly zoomed images of fabric, such as for leather versus linen.

Annotation

You can annotate each image assignment with a combination of relative image path, view type or variant, and a localizable alt description and image title.

Configure the Catalog

You configure images in the catalog settings so that a hierarchical matrix appears automatically when you configure new products. For example, once Brandon specifies image types and the color variation attribute at the catalog level, he sees a main node, and subnodes for colors, when he creates a new product and wants to add images.

You can only assign images to the main product and not to its variations. The Image Management System retrieves images for a variation product based on its attribute value. For example, a main product uses the attribute color. The Image Management System maps the red attribute value to identify images of the red variation product.

Here’s how to configure image settings in the catalog.

1. Open Business Manager.
2. Select site > Merchant Tools > Products and Catalogs > Catalogs.
3. Select a product catalog: cloud-kicks-usa-prod
4. Click Edit.
5. In the USA Product Catalog section, click Edit.
6. Click the Image Settings tab.
7. Select the image location: Internal
8. Leave the view types as they are, though you can add one.
   • Enter the variation attribute ID: color
   • Enter the default image alt text: ${productname}, ${variationvalue}, ${viewtype}
     This pulls the alt text from storefront data.
   • Enter the default image title: ${productname}, ${variationvalue}
     This pulls the title from storefront data.
     
9. Click Apply.

Create a Matrix

Brandon creates a matrix of images for each product using the color, size, and length variation attributes. The combination of attributes creates the structure. There’s no limit to the number of attributes, but the structure must be consistent. For example, if he specifies by color + fabric + size on one branch, he can’t specify by color + size + fabric on another.

Here’s how to create a matrix.

1. Select site > Merchant Tools > Products and Catalogs > Products.
2. Search for and open a main product: healthfit-sweatshirt
3. Click Lock to lock the product for editing.
4. Click the Edit button in the Images section.
   
   
5. Specify how you want your images structured: color and size.
   • In the Image Manager pane, click Edit.
   • Select the color attribute and Add.
   • Select the size attribute and click Add.
   • Click OK.
     
6. On the File Browser pane, locate an image.
   • You can also click the open icon (>>) to open the File Browser pane.
   • Drag an image from this window into the appropriate view type in the Images pane.
7. In the Images pane, specify the language to be used with the Alt and Title fields.
   • Enter the (mandatory) path.
   • Enter the localizable alternative text.
   • Enter the localizable title.
8. Click Save.

Dynamic Imaging Service

Dynamic Imaging Service (DIS) is an on-the-fly image transformation service that dynamically scales, resizes, crops, overlays, and changes the format of images presented on the storefront. It eliminates a big part of the image creation process, saving time and cost. You don’t have to wait for the graphics person to create multiple images ahead of time. Instead, DIS transforms a single, high-resolution source image as a source image per your specifications and serves them to your storefront.

You configure settings such as image size, crop, overlay, format, background color, and quality. Then DIS serves the correct sizes for each image application, such as the product detail page, catalog page, recommended products, search results, and more.

Say you have a catalog of 100,000 items and your search results display as four images of up to 150x150 pixels per row. There's a change of plans. Your web designer creates a new layout that shows three images, sized 250x250 pixels per row. Instead of uploading a catalog with these different-sized images, DIS uses the high-resolution images already stored in B2C Commerce to serve up the new images.

Transformations

Access to DIS is programmatic, so Brandon asks Vijay Lahihiri, the Cloud Kicks developer, to help him use this capability.

Vijay configures and generates an image URL using the URLUtils and MediaFile classes within the storefront application. The API validates the transformation parameters, and protects the code from future changes. If the basic URL pattern changes, the API calls still work, regardless of the changes.

DIS performs multiple operations when creating images from high-resolution sources. Here’s the order of processing. 

Review the documentation for image guidelines.

Next Steps

In this unit, you learned how to manage storefront images via the Image Management System and the Dynamic Imaging Service. Next, explore how to manage storefront content in Business Manager.

Resources

• Salesforce Help: Image Management
• Salesforce Help: Image Variants
• Salesforce Help: Dynamic Imaging Service
• Salesforce Help: Create Image Transformation URLs