Javascript is not enabled.

Javascript must be enabled to use this site. Please enable Javascript in your browser and try again.

Design System - IN BETA

Getting Started            Components            Presets             Templates

Article Image

The Article Image or Image component is a variation of the AEM Core component.

Editor to Copy/Paste
Training
Figma Design

1140x655 (228:131)

This is the standard rectangular image size used all over the site, especially for editorial content.

Placeholder Image 1140x655

1080x1080 (1:1)

This is just a square aspect ratio. Technically you can put any image, such as a transparent PNG of any shape.

Placeholder Image 1080x1080
Placeholder Image of Circle

Training

The Image Component offers adaptive image selection and responsive behavior, along with lazy loading for the page visitor and easy image placement for the content author.

The content author can use the edit dialog to edit the image asset, such as applying a crop or rotating the image.

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

Training Video

Authoring Capability

  • Pick - Browse the AEM DAM for the appropriate Image.

  • Path of Widen Image - Image link from the DAH is provided here.

  • Alternative Text from Widen Image - Alt Attribute that is automatically loaded into the field from the DAH.

  • Link - If you wish for the image to link to a page, internal or external.
  • Open link in new tab checkmark - When checked off, the link will open in a new tab
  • Title - This is where the title for the image should go.  If it is present in the DAM or DAH, it will prefill with that data. 
  • Display title as pop-up - This is not yet used.
  • Caption - This is where the author can enter a Caption for the image.
  • Link - This will prepopulated with the same path that you enter within the above link.
  • ID - HTML ID
  • Series Hero Image Credit - This is currently not used
  • Display Series Photo Credit - This is currently not used.

  • Analytics ID - This is the field where the data-element-id will go for click tracking purposes.

  • Padding dropdown - Defaults to none.

  • Article Image With MOA Badge - When using Value Library Foundry powered content, you can label an image to display the MOA badge or hide it.

  • AI Config dropdown - This is where, when you are setting up value library content, you can indicate if an AI image or Icon should display.