Skip to content
richardhand [Library] Core Components Documentation GO URLs (#520)
- uses Go URL for Component Library Home
- uses Go URLs for Component Library component pages
- uses Go URLs for component technical documentation
- fixes tabs edit dialog help Go URL
Latest commit d5fcaf4 Mar 28, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
_cq_design_dialog [Review][Teaser] Promote Teaser component from sandbox #190 (#220) Jun 26, 2018
_cq_dialog Add trackingFeature property to component dialog definitions (#482) Mar 1, 2019
clientlibs Issue #296 [UI Tests] Tests fail for Form Options and Teaser (#295) Oct 12, 2018
.content.xml [Docs] Update component icons based on XD review Dec 13, 2018
README.md
_cq_editConfig.xml [Review][Teaser] Promote Teaser component from sandbox #190 (#220) Jun 26, 2018
action.html @releng - sanitize teaser component for release (#242) Jul 9, 2018
actions.html @releng - sanitize teaser component for release (#242) Jul 9, 2018
description.html @releng - sanitize teaser component for release (#242) Jul 9, 2018
image.html @releng - sanitize teaser component for release (#242) Jul 9, 2018
teaser.html
title.html @releng - sanitize teaser component for release (#242) Jul 9, 2018

README.md

Teaser (v1)

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.

Features

  • 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.

Use Object

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:

  1. ./actionsDisabled - defines whether or not Call-to-Actions are disabled
  2. ./titleHidden - defines whether or not the title is hidden
  3. ./descriptionHidden - defines whether or not the description is hidden
  4. ./imageLinkHidden - defines whether or not the image link is hidden
  5. ./titleLinkHidden - defines whether or not the title link is hidden
  6. ./titleType - stores the value for this title's HTML element type

The following configuration properties are inherited from the image component:

  1. ./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
  2. ./disableLazyLoading - if 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 Resource properties:

  1. ./actionsEnabled - property that defines whether or not the teaser has Call-to-Action elements
  2. ./actions - child node where the Call-to-Action elements are stored as a list of item nodes with the following properties
    1. link - property that stores the Call-to-Action link
    2. text - property that stores the Call-to-Action text
  3. ./fileReference - property or file child node - will store either a reference to the image file, or the image file
  4. ./linkURL - link applied to teaser elements. URL or path to a content page
  5. ./jcr:title - defines the value of the teaser title and HTML title attribute of the teaser image
  6. ./titleFromPage - defines whether or not the title value is taken from the linked page
  7. ./jcr:description - defines the value of the teaser description
  8. ./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.

For example:

imageDelegate="core/wcm/components/image/v2/image"

BEM Description

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

Information

You can’t perform that action at this time.