Image Component (v1)

The Core Component Image Component is an adaptive image component features in-place editing.

Usage

The Image Component allows easy placement of image assets and offers in-place editing. It features adaptive image selection with lazy loading as well as cropping for the content author.

The allowed image widths as well as cropping and additional settings can be defined by the template author in the design dialog. The content editor can upload or select assets in the configure dialog and crop the image in the edit dialog. For added convenience, simple in-place modification of the image is also available.

Version and Compatibility

This document describes v1 of the Image Component, originally introduced with release 1.0.0 of the Core Components with AEM 6.3.

The following table lists the compatibility of v1 of the Image Component.

Sample Component Output

The following is sample taken from We.Retail.

Screenshot

HTML

<div class="cmp cmp-image aem-GridColumn aem-GridColumn--default--12">

        <noscript data-cmp-image="{&#34;smartImages&#34;:[],&#34;smartSizes&#34;:[],&#34;lazyEnabled&#34;:true}">
            <img src="/content/we-retail/us/en/equipment/_jcr_content/root/responsivegrid/image.img.jpg" alt="Surfboard"/>
        </noscript>

</div>

JSON

"image": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              "smartSizes": [],
              "smartImages": [],
              "lazyEnabled": true,
              "src": "/content/we-retail/us/en/equipment/equipment/jcr%3acontent/root/responsivegrid/image.img.jpeg",
              ":type": "weretail/components/content/image"
            }

Configure Dialog

In addition to the standard edit dialog and design dialog, the image component offers a configure dialog where the image itself is defined along with its description and basic properties.

• Image asset

  • Drop an asset from the asset browser or tap the browse option to upload from a local file system.
  • Tap or click Clear to de-select the currently selected image.
  • Tap or click Edit to mange the renditions of the asset in the asset editor.

• Image is decorative - Check if the image should be ignored by assistive technology and therefore does not require an alternative text. This applies to decorative images only.

• Alternative text - Textual alternative of the meaning or function of the image, for visually impaired readers.

• Link

  • Link the image to another resource.
  • Use the selection dialog to link to another AEM resource.
  • If not linking to an AEM resource, enter the absolute URL. Non-solute URLs will be interpreted as relative to AEM.

• Caption - Additional information about the image, displayed below the image be default.

• Display caption as pop-up - When checked, the caption won’t be displayed below the image, but as a pop-up displayed by some browsers when hovering over the image.

Edit Dialog

The edit dialog allows the content author to crop, modify the launch map, and zoom the image.

• Start Crop

  

  Selecting this option opens a drop-down for pre-defined crop proportions.

  • Choose the option Free Hand to define your own crop.
  • Choose the option Remove Crop to display the original asset.

  Once a crop option is selected, use the blue handles to size the crop on the image.

  

• Rotate Right

  

  Use this option to rotate the image 90° to the right (clockwise).

• Launch Map

  

  Use this option to apply a launch map to the image. Selecting this option opens a new window allowing the user select the shape of the map:

  • Add Rectangular Map

  • Add Circular Map

  • Add Polygon Map

    • By default adds a triangle map. Double-click on a line of the shape to add a new blue resize handle on a new side.

  Once a map shape is selected, it is superimposed on the image allowing for resizing. Drag and drop the blue resize handles to adjust the shape.

  

  After sizing the launch map, click on it to open a floating toolbar to define the path of the link.

  • Path

    • Use the Path Picker option to select a path in AEM

    • If the path is not in AEM, use the absolute URL. Non-absolute paths will be interpreted relative to AEM.

    • Alt text
      Alternative description of the path destination

    • Target

      • Same tab
      • New tab
      • Parent Frame
      • Top Frame

  Tap or click the blue check mark to save, the black x to cancel, and the red trash can to delete the map.

  

• Reset Zoom

  

  If the image has already been zoomed, use this option to reset the zoom level.

• Open Zoom Slider

  

  Use this option to display a slider to control the zoom level of the image.

  

The in-place editor can also be used to modify the image. Due to space limitations, only basic options are available in-line. For full edit options, use the full-screen mode.

Design Dialog

The design dialog allows the template author to define the cropping, upload, and rotation uploads the content author has when using this component.

Main

On the Main tab you can define a list of allowed widths in pixels for the image to automatically load the most appropriate width from the list.

Tap or click the Add button to add another size.

• Use the grab handles to re-arrange the order of the sizes.
• Use the delete icon to remove a width.

By default images loading is deferred until they become visible. Select the option Disable lazy loading to load the images upon page load.

• Enable Web Optimized Images - When checked, the web-optimized image delivery service will deliver images in the WebP format, reducing image sizes on average by 25%.
  • This option is only available in AEMaaCS.
  • When unchecked or the web-optimized image delivery service is unavailable the Adaptive Image Servlet is used.

Features

On the Features tab you can define which options are available to the content authors when using the component including upload options, orientation, and cropping options.

• Enable Web Optimized Images - when checked, the web-optimized image delivery service will deliver images in the WebP format, reducing image sizes on average by 25%.

  • This option is only available in AEMaaCS.
  • When unchecked or the web-optimized image delivery service is unavailable the Adaptive Image Servlet is used.

• Source

  

  Select the option Allow asset upload from file system to allow content authors to upload images from his or her local computer. To force content authors to only select assets from AEM, de-select this option.

• Orientation

  

  • Rotate - Use this option to allow the content author to use the Rotate Right option.
  • Flip
    Use this option to allow the content author to use the Flip Horizontally and Flip Vertically options.
  CAUTION

  The Flip option is disabled by default. Enabling it will display the Flip Vertically and Flip Horizontally buttons in the edit dialog of the image component, however the feature is not currently supported by AEM and any changes made using these options will not be persisted.

• Cropping

  

  Select the option Allow crop to allow the content author to crop the image in the component in the edit dialog.

  • Click Add to add a pre-defined crop aspect ratio.
  • Enter a descriptive name, which will be shown in the Start Crop dropdown.
  • Enter the numerical ratio of the aspect.
  • Use the drag handles to re-arrange the order of the aspect ratios
  • Use the trash can icon to delete an aspect ratio.
  CAUTION

  Note that in AEM, crop aspect ratios are defined as height/width. This differs from the conventional definition of width/height and is done for legacy compatibility reasons. The content authors will not be aware of any difference as long as you provide a clear name of the ratio since the name is shown in the UI and not the ratio itself.

Technical Details

The latest technical documentation about the Image Component can be found on GitHub.

The entire core components project can be downloaded from GitHub.

Further details about developing Core Components can be found in the Core Components developer documentation.

Business.Adobe.com resources