Image

The Core Component Image allows a single image asset to be displayed on the page. Images are adaptive and feature in-place editing; the relevant image width is selected for the screen size and lazy loading is available.

The Image Component features adaptive image selection and responsive behavior with lazy loading for the page visitor as well as easy image placement and cropping for the content author.

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

The Image Component comes with robust responsive features ready right out of the box. At the page template level, the design dialog can be used to define the default widths of the image asset. The Image Component will then automatically load the correct width to display depending on the size of the browser window. As the window is resized, the Image Component dynamically loads the correct image size on the fly. There is no need for component developers to worry about defining custom media queries since the Image Component is already optimized to load your content.

In addition, the Image Component supports lazy loading to defer loading of the actual image asset until it is visible in the browser, increasing the responsiveness of your pages.

Examples:

• Standard: Simple image with an asset referenced from DAM and no other configuration. By default, metadata for the asset (alternative text and caption) is read from DAM but can also be provided by an author.
• Caption: Captions are displayed by default in a pop-up on hover but the image can also be configured so that the caption is displayed directly on the page.
• Linked: Images can be linked to internal relative AEM resources or to external absolute URLs.
• SVG and GIF Images: SVG and GIF image MIME types are supported.

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.
• Metadata Tab
  • 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.
    • Get alternative text from DAM - When checked the image's alternative text will be populated with the value of the dc:description metadata in DAM.
  • Caption Additional information about the image, displayed below the image by default.
    • Get caption from DAM When checked the image's caption text will be populated with the value of the dc:title metadata in DAM.
    • 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.
  • 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.
    • ID - This option allows to control the unique identifier of the component in the HTML and in the Data Layer .
    • If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.
    • If an ID is specified, it is the responsibility of the author to make sure that it is unique.
    • Changing the ID can have an impact on CSS, JS and Data Layer tracking.

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)
• Flip Horizontally: Use this option to to flip the image horizontally or pivot the image 180° along the y-axis.
• Flip Vertically: Use this option to to flip the image vertically or pivot the image 180° along the x-axis.
• 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 and upload options that the content author has when using this component.
• Main Tab: On the Main tab you can define a list of widths in pixels for the image and the component will automatically load the most appropriate width based on browser size. This is an important part of the responsive features of the Image Component. In addition, you can define which general component options are automatically or disabled when the author adds the component to a page.
  • Enable lazy loading Define if the lazy loading option is automatically enabled when adding the image component to a page.
  • Image is decorative Define if the decorative image option is automatically enabled when adding the image component to a page.
  • Get alternative text from DAM Define if the option to retrieve the alternate text from the DAM is automatically enabled when adding the image component to a page.
  • Get caption from DAM Define if the option to retrieve the caption from the DAM is automatically enabled when adding the image component to a page.
  • Display caption as pop-up Define if the option to display the image caption as a pop-up is automatically enabled when adding the image component to a page.
  • Disable UUID Tracking Check to disable the tracking of the image asset's UUID. 
  • Widths Defines a list of widths in pixels for the image and the component automatically loads the most appropriate width based on browser size.
  • JPEG Quality The quality factor (in percentage from 0 and 100) for transformed (e.g. scaled or cropped) JPEG images.