Image

A basic building block of any digital experience, the cheer.IOs Image Component enables the author to add an image from the DAM with added options for including a caption or photo credit. 

Component Information

Component Title Image  
Description Allows easy placement of image assets and offers in-place editing such as cropping. Alt-text, attribution links and captions can be added as well  
Features
  • Smart loading of optimal rendition
  • In-place editing, cropping, rotating, resizing and image map definition
  • Responsive image map resizing
  • Image title, description, accessibility text and link
  • SVG support
  • Styles
  
Location /apps/ehi-core/aem65/components/content/image/v1/image  
sling:resourceSuperType

core/wcm/components/image/v2/image

  
Supported AEM Versions 6.5  
Editing Mode inPlaceEdit  
Component Group Cheerios Experience  
Use Object The Image component uses the com.adobe.cq.wcm.core.components.models.Image Sling Model as its Use-object.  

 

Client Libraries

The component provides a core.wcm.components.image.v2 client library category that contains a recommended base CSS styling and JavaScript component. It should be added to a relevant site client library using the embed property.

It also provides a core.wcm.components.image.v2.editor editor client library category that includes JavaScript handling for dialog interaction. It is already included by its edit dialog.

BEM Description

BLOCK cmp-image
ELEMENT cmp-image__link
ELEMENT cmp-image__image
ELEMENT cmp-image__title

JavaScript Data Attribute Bindings

Apply a data-cmp-is="image" attribute to the wrapper block to enable initialization of the JavaScript component.

The following attributes can be added to the same element to provide options:

  1. data-cmp-lazy - if not false, indicates that the image should be rendered lazily.
  2. data-cmp-src - the image source. Can be a simple image source, or a URI template representation that can be variable expanded - useful for building an image configuration with an alternative width. Should contain a {.width} variable. e.g. '/path/to/image.coreimg{.width}.jpeg'
  3. data-cmp-widths - a comma-separated string of alternative image widths (in pixels). Populated with allowedRenditionWidths from the component's edit dialog.

A hook attribute from the following should be added to the corresponding element so that the JavaScript is able to target it:

data-cmp-hook-image="image"
data-cmp-hook-image="link"
data-cmp-hook-image="noscript"
data-cmp-hook-image="map"
data-cmp-hook-image="area"

The img and an optional image map should be placed inside a noscript element with the data-cmp-hook-image="noscript" attribute. They will be inserted into the DOM by the JavaScript component.

To allow lazy loading it is expected that the data-cmp-lazy and data-cmp-src options are supplied.

It is possible to configure the JavaScript component such that the most appropriate image url is built and applied to the img. The most appropriate width being the one which is at least as wide as the image's container. The data-cmp-widths option must be provided with more than one width, as well as the data-cmp-src option, with a URI template representation of the source.

To allow responsive recalculation of image map areas, a data-cmp-relcoords attribute should be added to each map area. The coordinates are represented as comma-separated decimal percentages:

<area shape="rect" coords="0,0,10,10" data-cmp-relcoords="0,0,0.5,0.5" href="http://www.adobe.com">

SVG

SVG MIME-types are supported, but have some specific handling. Alternative smart image widths defined at the component policy dialog are ignored for SVG images, with Image#getWidths returning an empty array. In addition, SVG image types have a more limited set of editing options available in the AEM inline image editor. The lazy loading feature is still supported for SVG images.

Extending the Components

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.

Important Notes:

  1. In case you overwrite the image's HTL script, make sure the necessary attributes for the JavaScript loading script are contained in the markup at the right position (see section below).
  2. In case your own component does not only render an image but does also renders something else, use the following approach:
    • ResourceSuperType should be set to core/wcm/components/image/v1/image (to make sure the image rendering servlet is being used)
    • Your HTL script should include the image markup via <div class="cmp-image" data-sly-include="image.html"></div>
    • You derived component should reset cq:htmlTags
    • Your component's dialog should overwrite the dialog fully from the image component via sling:hideResource="true" on the node cq:dialog/content/items/image

URL Formats

The images are loaded through the com.adobe.cq.wcm.core.components.internal.servlets.AdaptiveImageServlet, therefore their URLs have the following patterns:

Author:
/content/<project_path>/<page_path>/<component_path>/<component_name>.coreimg.<quality>.<width>.<extension>/<timestamp>/<filename>.<extension>

Publish:
/content/<project_path>/<page_path>/<component_path>/<component_name>.coreimg.<quality>.<width>.<extension>/<timestamp>/<filename>.<extension>

Configuration Properties

Component Policy Configuration Properties

The following configuration properties are used:

  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. ./jpegQuality - defines the image quality for JPEGs (0 lowest quality / size to 100 highest quality / size). Default value is 82.
  3. ./disableLazyLoading - if true, the lazy loading of images (loading only when the image is visible on the client device) is disabled.

Note: The author should NOT be able to upload an image from their device.  The assets MUST come from the DAM

Policy Configuration Visual

Edit Dialog Properties

The following properties are written to JCR for this Image component and are expected to be available as Resource properties:

  1. ./fileReference property or file child node - will store either a reference to the image file, or the image file
  2. ./decorative - if set to true, then the image will be ignored by assistive technology
  3. ./alt - defines the value of the HTML alt attribute (not needed if ./decorative is set to true)
  4. ./altValueFromDAM - if set to true, .image attribute with the value of the dc:description metadata in DAM (not needed if ./decorative is set to true)
  5. ./photoCaption - Photo Caption
  6. ./titleValueFromDAM - If set to true, populate the image's caption with the value of the dc:title metadata in DAM
  7. ./displayPopupTitle - if set to true it will render the value of the ./jcr:title property through the HTML title attribute, otherwise a caption will be rendered
  8. ./PhotoCredit - Used to display the photographer, illustrator, or copyright holder's information
  9. ./photoCreditValueFromDAM - if set to true, populate the image's photo credit value from metadata from DAM

 

Edit Dialog Visual

Component Visual - Cropping

Component Demo

This is the caption text

Photo Credit:  anonymous

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        photoCaption:
        <p>This is the caption text</p>

    
    3. 

  3. 
        jcr:createdBy:
        E524Z2
    
    4. 

  4. 
        fileReference:
        /content/dam/entegral/png-transparent-images/for-msos.png
    
    5. 

  5. 
        jcr:lastModifiedBy:
        E524Z2
    
    6. 

  6. 
        jcr:created:
        
    
    7. 

  7. 
        photoCreditValueFromDAM:
        false
    
    8. 

  8. 
        displayPopupTitle:
        false
    
    9. 

  9. 
        photoCredit:
        <p>Photo Credit:&nbsp; anonymous</p>

    
    10. 

  10. 
        jcr:lastModified:
        
    
    11. 

  11. 
        titleValueFromDAM:
        false
    
    12. 

  12. 
        sling:resourceType:
        ehi-core/aem65/components/content/image/v1/image
    
    13. 

  13. 
        isDecorative:
        true
    
    14. 

  14. 
        textIsRich:
        true,true
    
    15. 




    
        

    


  


  
      
  
  
  

  

    
This is the caption text


  


  

    
Photo Credit:  anonymous


  








    


    

    


    JSON


    JSON


    JSON


    JSON


    JSON


    JSON


    JSON


    JSON


    JSON

Built with Core Components 2.7.0.