Teaser

Component Information

Component Title Teaser
Description Teaser allows the grouping of an image, title and description for promoting and linking to site content sections. One or more actions can also be defined.
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.
Location /apps/ehi-core/aem65/components/content/teaser/v1/teaser
sling:resourceSuperType core/wcm/components/teaser/v1/teaser
Supported AEM Versions 6.5
Editing Mode inPlaceEdit
Component Group Cheerios Experience
Use Object The Teaser component uses the com.adobe.cq.wcm.core.components.models.Teaser Sling model as its Use-object.
   

 

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

Extending the Components

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"

Extending the components can be done in multiple ways depending on the needs of the brand component.

 

Use this approach if you do not have any required html markup changes or backend java changes. This will only update the title of the component, componentGroup and point to the resourceSuperType. Optionally can extend the description.

  1. Change .content.xml file properties 
  2. sling:resourceSuperType to point to the Cheer.IOs component [required]
  3. jcr:title - new Component title
  4. componentGroup - Brand specific Group [required]
  5. jcr:description - Helpful description

 

 

Use this approach if you need to update css classes or add data attributes and do not need to change the backend model, or potentially want to use a different model by retain all of the markup in the component-tmpl.html (Component Template) markup.

  1. Follow steps in Extend the Component - Basic
  2. Extend the file i.e. extend-example-option2.html
  3. Update file with new properties
  4. Update the html file with desired changes

 

 

The component template is usually named component-tmpl.html this file contains the html markup. Update this file if you need to change the html structure of the component.

  1. Follow Steps in Extend Component Basic
  2. Extend the file component.html to point to the new component-tmpl.html file
  3. Extend the file i.e. component-tmpl.html
  4. Update file with new markup

 

 

Use this approach if you need to change the Sling Model to update the backend logic.

Files that will need to be added when extending:

  1. Follow Steps in Extend Component - Basic
  2. Java Interface - this will implement the model with the new methods (if needed)
  3. Sling Model - this will implement the Java Interface from step 1 and leverage the sling delegation pattern to override the original methods
  4. The component.html file to match the new component name

It is possible to extend more than just the component.html file, if necessary any file that is resourceSupertyped can be extend for example if something needs added to the dialog.

This gives us the flexibility to change our classes or add attributes easily.  Say I want to add new javascript I can easily target a different data attribute to trigger my javascript.

Configuration Properties

Policy 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

Policy Configuration Visual

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

Component Demo

Fully Configured

Description of component being demoed.

Title of Teaser

Description of Teaser

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        E524Z2
    
    3. 

  3. 
        jcr:title:
        Title of Teaser
    
    4. 

  4. 
        fileReference:
        /content/dam/entegral/New-Auto-Safety-Technology-Leaves-Insurers-in-the-Dark-min.jpg
    
    5. 

  5. 
        actionsEnabled:
        false
    
    6. 

  6. 
        jcr:lastModifiedBy:
        E524Z2
    
    7. 

  7. 
        jcr:created:
        
    
    8. 

  8. 
        titleFromPage:
        false
    
    9. 

  9. 
        imageFromPage:
        true
    
    10. 

  10. 
        linkURL:
        /content/martech/component-library/teaser
    
    11. 

  11. 
        jcr:description:
        <p>Description of Teaser</p>

    
    12. 

  12. 
        jcr:lastModified:
        
    
    13. 

  13. 
        descriptionFromPage:
        false
    
    14. 

  14. 
        sling:resourceType:
        ehi-core/aem65/components/content/teaser/v1/teaser
    
    15. 

  15. 
        textIsRich:
        true
    
    16. 




    
        

    

    


        
        

        
        
            
        
        

        
        

        

            
            
                
    

                
    

        Title of Teaser
    


            
            
    
Description of Teaser




            
    

            
    

        


        
    



    


    

    


    JSON


    JSON


    JSON

Built with Core Components 2.7.0.