Teaser component written in HTL, allowing definition of an image, title, rich text description and actions/links. Teaser variations can include some or all of these elements.
- Combines image, title, rich text description and actions/links.
- Allows disabling of teaser elements through policy configuration.
- Allows control over whether title and description should be inherited from a linked page.
The Teaser component uses the
com.adobe.cq.wcm.core.components.models.Teaser Sling model as its Use-object.
Component Policy Configuration Properties
The following configuration properties are used:
./actionsDisabled- defines whether or not Call-to-Actions are disabled
./titleHidden- defines whether or not the title is hidden
./descriptionHidden- defines whether or not the description is hidden
./imageLinkHidden- defines whether or not the image link is hidden
./titleLinkHidden- defines whether or not the title link is hidden
./titleType- stores the value for this title's HTML element type
The following configuration properties are inherited from the image component:
./allowedRenditionWidths- defines the allowed renditions (as an integer array) that will be generated for the images rendered by this component; the actual size will be requested by the client device
true, the lazy loading of images (loading only when the image is visible on the client device) is disabled
Edit Dialog Properties
The following properties are written to JCR for this Teaser component and are expected to be available as
./actionsEnabled- property that defines whether or not the teaser has Call-to-Action elements
./actions- child node where the Call-to-Action elements are stored as a list of
itemnodes with the following properties
link- property that stores the Call-to-Action link
text- property that stores the Call-to-Action text
./fileReference- property or
filechild node - will store either a reference to the image file, or the image file
./linkURL- link applied to teaser elements. URL or path to a content page
./jcr:title- defines the value of the teaser title and HTML
titleattribute of the teaser image
./titleFromPage- defines whether or not the title value is taken from the linked page
./jcr:description- defines the value of the teaser description
./descriptionFromPage- defines whether or not the description value is taken from the linked page
Extending the Teaser Component
When extending the Teaser component by using
sling:resourceSuperType, developers need to define the
imageDelegate property for
the proxy component and point it to the designated Image component.
BLOCK cmp-teaser ELEMENT cmp-teaser__image ELEMENT cmp-teaser__content ELEMENT cmp-teaser__title ELEMENT cmp-teaser__title-link ELEMENT cmp-teaser__description ELEMENT cmp-teaser__action-container ELEMENT cmp-teaser__action-link