Device-specific images are uniquely implemented in mobile for the hero images displayed on the top two-thirds of the homepage.
Tables and properties
Mobile provides two tables for images to the catalog schema:
crs_mobile_img
crs_mobile_desc
Each table stores a key/value pair where the key is a mobile site ID and the value is a URL to a specific image. The promotionalContent repository item in the catalog repository is extended with these properties:
Property | Description |
|---|---|
| Map of mobile site ID to image URL using the |
| Map of mobile site ID to image URL using the |
| Derived property that references the current site context and uses the site ID as the key to lookup up an image URL from the |
| Derived property that looks at the current site context and uses the site ID as the key to lookup up an image URL from the |
| Derived property that takes the value retrieved from the |
| Property used to fetch the promotional text overlay image. |
| Property used to fetch the promotional background image. |
These properties are used by the homePagePromotionalCell.jsp page to render the promotional content which is called from the ScrollablePromotionalContent-ATGSlot.jsp cartridge renderer.
In the following example, data that populates the properties needed for a hero image is described as key/value pairs.
<set-property name="mobileDescriptions"> <![CDATA[iOSMobile=/crsdocroot/content/mobile/images/homepage/web/moreheadLTD_art.jpg,iPhone=/crsdocroot/content/mobile/images/homepage/iPhone/moreheadLTD_art.jpg,iPhoneRetina=/crsdocroot/content/mobile/images/homepage/iPhone/moreheadLTD_art@2x.jpg,iPad=/crsdocroot/content/mobile/images/homepage/iPad/moreheadLTD_art.jpg,iPadRetina=/crsdocroot/content/mobile/images/homepage/iPad/moreheadLTD_art@2x.jpg]]> </set-property>
The mobileImages have placeholders for site and language since they are intended to be the overlay text, for example “15% off!”:
<set-property name="mobileImages">
<![CDATA[iOSMobile=/crsdocroot/content/mobile/images/homepage/web/{site}/moreheadLTD_text_{language}.png,iPhone=/crsdocroot/content/mobile/images/homepage/iPhone/{site}/moreheadLTD_text_{language}.png,iPhoneRetina=/crsdocroot/content/mobile/images/homepage/iPhone/{site}/moreheadLTD_text_{language}@2x.png,iPad=/crsdocroot/content/mobile/images/homepage/iPad/{site}/moreheadLTD_text_{language}.png,iPadRetina=/crsdocroot/content/mobile/images/home page/iPad/{site}/moreheadLTD_text_{language}@2x.png]]></set-property>
The valid key device type values are defined on /atg/dynamo/servlet/dafpipeline/MobileDetectionInterceptor and by default are:
iPad
iPadRetina
iPhone
iPhoneRetina
iOSMobile (CRS-M)
When the mobileImages values are retrieved via the derivedDeviceImage property, the current siteId (mobileStoreSiteUS for example) is substituted for site and the current two character language code is substituted for language. For example:
/crsdocroot/content/mobile/images/homepage/web/{site}/moreheadLTD_text_{language}.pngCould be coded as:
/crsdocroot/content/mobile/images/homepage/web/mobileStoreSiteUS/moreheadLTD_text_en.png
