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 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.
The Image Component (as of release 2.13.0) supports Dynamic Media assets. When enabled, these features offer the ability to add Dynamic Media image assets with a simple drag-and-drop or via the assets browser just as you would any other image. In addition, image modifiers, image presets, and smart crops are also supported.
Your web experiences built with Core Components can no feature rich, Sensei-powered, robust, high-performance, cross-platform Dynamic Media Image capabilities.
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.
|Component Version||AEM 6.4||AEM 6.5||AEM as a Cloud Service|
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.
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.
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.
The latest technical documentation about the Image Component can be found on GitHub.
Further details about developing Core Components can be found in the Core Components developer documentation.
The Image Component supports schema.org microdata.
&, regardless of which Preset Type is selected.
dc:descriptionmetadata in DAM.
dc:titlemetadata in DAM.
Smart Crop and Image Preset are mutually exclusive options. If an author needs to use an image preset along with a Smart Crop rendition, the author will have to use the Image Modifiers to manually add presets.
The edit dialog allows the content author to crop, modify the launch map, and zoom the image.
Selecting 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.
Use this option to rotate the image 90° to the right (clockwise).
Use this option to to flip the image horizontally or pivot the image 180° along the y-axis.
Use this option to to flip the image vertically or pivot the image 180° along the x-axis.
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.
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.
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.
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.
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.
Use this option to allow the content author to use the Rotate Right option.
Use this option to allow the content author to use the Flip Horizontally and Flip Vertically options.
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.
Select the option Allow crop to allow the content author to crop the image in the component in the edit dialog.
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.
The Image Component supports the AEM Style System.
The Image Component uses the Core Component’s Adaptive Image Servlet. The Adaptive Image Servlet is responsible for image processing and streaming and can be leveraged by developers in their customizations of the Core Components.