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}.png
Could be coded as:
/crsdocroot/content/mobile/images/homepage/web/mobileStoreSiteUS/moreheadLTD_text_en.png