The Core Component Image Component is an adaptive image component that features in-place editing.
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 Imaage 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.
Version and Compatibility
The current version of the Image Component is v2, which was introduced with release 2.0.0 of the Core Components in January 2018, and is described in this document.
The following table details all supported versions of the component, the AEM versions with which the versions of the component is compatible, and links to documentation for previous versions.
For more information about Core Component versions and releases, see the document Core Components Versions .
Scalable Vector Graphics (SVG) are supported by the Image Component.
- Drag-and-drop of an SVG asset from DAM and upload of an SVG file upload from a local file system are both supported.
- The Adaptive Image Servlet streams the original SVG file is streamed (transformations are skipped).
- For an SVG image, the "smart images” and the "smart sizes” are set to an empty array in the image model.
For security reasons, the original SVG is never called directly by the Image Editor. It is called through
<img src=“path-to-component”>. This prevents the browser from executing any scripts embedded in the SVG file.
Sample Component Output
To experience the Image Component as well as see examples of its configuration options as well as HTML and JSON output, visit the Component Library .
- Image is decorativeCheck if the image should be ignored by assistive technology and therefore does not require an alternative text. This applies to decorative images only.
- Alternative textTextual 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 thedc:descriptionmetadata in DAM.
- CaptionAdditional information about the image, displayed below the image by default.
- Get caption from DAMWhen checked the image's caption text will be populated with the value of thedc:titlemetadata in DAM.
- Display caption as pop-upWhen 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 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.
The edit dialog allows the content author to crop, modify the launch map, and zoom the image.
- Start CropSelecting this option opens a drop-down for pre-defined crop proportions.
Once a crop option is selected, use the blue handles to size the crop on the image.
- Choose the optionFree Handto define your own crop.
- Choose the optionRemove Cropto display the original asset.
- Rotate RightUse this option to rotate the image 90° to the right (clockwise).
- Flip HorizontallyUse this option to to flip the image horizontally or pivot the image 180° along the y-axis.
- Flip VerticallyUse this option to to flip the image vertically or pivot the image 180° along the x-axis.
- Launch MapUse 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:
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.
- 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.
Tap or click the blue checkmark to save, the black x to cancel, and the red trash can to delete the map.
- 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 textAlternative description of the path destination
- Same tab
- New tab
- Parent Frame
- Top Frame
- Reset ZoomIf the image has already been zoomed, use this option to reset the zoom level.
- Open Zoom SliderUse 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.
Image edit operations (crop, flip, rotate) are not supported for GIF images. Any such changes made in edit mode to GIFs will not be persisted.
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.
Maintab 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 loadingDefine if the lazy loading option is automatically enabled when adding the image component to a page.
- Image is decorativeDefine if the decorative image option is automatically enabled when adding the image component to a page.
- Get alternative text from DAMDefine 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 DAMDefine 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-upDefine 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 TrackingCheck to disable the tracking of the image asset's UUID.
- WidthsDefines a list of widths in pixels for the image and the component automatically loads the most appropriate width based on browser size.
- Tap or click theAddbutton to add another size.
- Use the grab handles to re-arrange the order of the sizes.
- Use theDeleteicon to remove a width.
- By default images loading is ddeferreduntil they become visible.
- Select the optionDisable lazy loadingto load the images upon page load.
- JPEG QualityThe quality factor (in percentage from 0 and 100) for transformed (e.g. scaled or cropped) JPEG images.
The JPEG Quality option is available as of release 2.2.0 of the Core Components.
As of release 2.2.0 of the Core Components, the Image Component adds the unique UUID attribute
data-asset-idto the image asset to allow tracking and analysis of the number of views that individual assets receive.
Featurestab you can define which options are available to the content authors when using the component including upload options, orientation, and cropping options.
- SourceSelect the optionAllow asset upload from file systemto 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.
- RotateUse this option to allow the content author to use theRotate Rightoption.
- FlipUse this option to allow the content author to use theFlip HorizontallyandFlip Verticallyoptions.TheFlipoption is disabled by default. Enabling it will display theFlip VerticallyandFlip Horizontallybuttons 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.
- CroppingSelect the optionAllow cropto allow the content author to crop the image in the component in the edit dialog.
Note that in AEM, crop aspect ratios are defined asheight/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.
- ClickAddto add a pre-defined crop aspect ratio.
- Enter a descriptive name, which will be shown in theStart Cropdropdown.
- 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.