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.
|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|
|Supported AEM Versions||6.5|
|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.|
The following attributes can be added to the same element to provide options:
To allow lazy loading it is expected that the data-cmp-lazy and data-cmp-src options are supplied.
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 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 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.
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.
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.
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:
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.
The images are loaded through the com.adobe.cq.wcm.core.components.internal.servlets.AdaptiveImageServlet, therefore their URLs have the following patterns:
The following configuration properties are used:
Note: The author should NOT be able to upload an image from their device. The assets MUST come from the DAM
The following properties are written to JCR for this Image component and are expected to be available as Resource properties:
- jcr:primaryType: nt:unstructured
- photoCaption: <p>This is the caption text</p>
- jcr:createdBy: E524Z2
- fileReference: /content/dam/entegral/png-transparent-images/for-msos.png
- jcr:lastModifiedBy: E524Z2
- photoCreditValueFromDAM: false
- displayPopupTitle: false
- photoCredit: <p>Photo Credit: anonymous</p>
- titleValueFromDAM: false
- sling:resourceType: ehi-core/aem65/components/content/image/v1/image
- isDecorative: true
- textIsRich: true,true