loading table of contents...

8.7.2. Replaced Product and Category Images

In addition to the Product Asset Widget you can replace images directly by replacing the URL in the IBM system with a CoreMedia URL. The linking of product or category images from IBM WCS to the CoreMedia CAE is done via Image URLs that you can add to the Display tab of the product or category definition.

Define Product Image URLs in Management Center

Figure 8.31. Define Product Image URLs in Management Center


[Note]Note
Regardless of the usage of the CoreMedia Product Asset Widget, once the image URLs of a product are pointing to the CMS all occurrences of these product images (for example, on catalog overview pages) will be delivered by the CMS. If multiple images are assigned to one product, then the first image is taken (in alphabetical order).

The Image URL has the following format: 

For a product:

    http://[cmsHost]/blueprint/servlet/catalogimage/product/
    <StoreId>/<Locale>/<Mapping>/<PartNumber>.jpg

For a category:

    http://[cmsHost]/blueprint/servlet/catalogimage/category/
    [storeId]/[Locale]/<Mapping>/<CategoryID>.jpg

Where the path segments have the following meaning:

Segment Name Example Description

[cmsHost]

[cmsHost]

The URL prefix of the server that can deliver CMS images. Typically, you will enter here the literal string [cmsHost] so the system can map it to a concrete URL prefix. Since the images are delivered from different servers depending on which side you are (preview or live) the hostname can alter between the systems. The placeholder [cmsHost] will then be replaced by a URL prefix containing the live host, provided the request comes from the live side. See also the IBM WCS documentation "Configuration properties for content management system integration".

storeId

10202

The ID of the IBM WebSphere Commerce store for which the image is requested. An IBM store is configured for a specific site in the CoreMedia system and the mapping is done via the ID.

Locale

en_US

The locale of the store.

Mapping

thumbnail

The mapping between an image in the IBM product and the named image variant that is taken from the CoreMedia system.

PartNumber/CategoryID

GFR033_3301/PC_ToDrink

The product or SKU part number or category ID.

Table 8.14. Path segments in the image URL


Delivery of Images

The URL is resolved from the catalog picture handlers. The handlers map the "Named image format" segment to a cropped variant of a picture (see Section 6.3.14, “Images” for details of crops). CoreMedia Blueprint comes with the following definition: 

<bean id="productCatalogPictureHandler" class="com.coremedia.livecontext.asset.ProductCatalogPictureHandler"
      parent="catalogPictureHandlerBase">
  ...
  <property name="pictureFormats">
    <map>
     <entry value="portrait_ratio20x31/200/310">
       <key>
         <util:constant static-field=
         "com.coremedia.livecontext.asset.CatalogPictureHandlerBase.FORMAT_KEY_THUMBNAIL"/>
       </key>
     </entry>
     <entry value="portrait_ratio20x31/646/1000">
       <key>
         <util:constant static-field=
         "com.coremedia.livecontext.asset.CatalogPictureHandlerBase.FORMAT_KEY_FULL"/>
       </key>
     </entry>
    </map>
  </property>
</bean>

<bean id="categoryCatalogPictureHandler" class="com.coremedia.livecontext.asset.CategoryCatalogPictureHandler"
      parent="catalogPictureHandlerBase">
...
</bean>

That is, a URL with a segment thumbnail maps to an image variant portrait_ratio20x31 with the width "200" and the height "310" and a URL with segment full maps to the same image variant portrait_ratio20x31 but with width "646" and height "1000". These are the values required by the IBM Aurora Starter Store.

You can customize the configuration via a Spring configuration as described in Section 8.7.4.1, “Mapping of Custom Picture Formats”.

Prev Up Next
 Home