User Guide

Image Component

The Image component allows a single image asset to be displayed on the page. Images are adaptive; the relevant image width is selected for the screen size.

 

Images must be uploaded to an Assets folder in advance – they cannot be uploaded through the Image component. Check out the Navigating AEM guide for more info.

Overview

Component name: Image

Authors who can use: all

Templates/page types that can use component: all

Required or optional: optional

Authoring Fields

Adding the Image component to the page

Once on the desired page in Edit mode, add the Image by doing the following:

Option 1: Double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Image” in the search bar, or scroll to the Image in the list. Double click to add to page.

Option 2: On the left hand rail, navigate to the Components tab. Type “Image” in the search bar, or scroll to the Image in the list. Double click to add to page.

Editing the Image component

1. With the edit wrench, open the component.

Image toolbar, featuring the edit wrench.

2.       Asset tab

a.       Inherit featured image from page checkbox: Use the featured image, either from page’s Page Properties, or from the properties of a linked page, if one is defined.

i.      The checkbox is default checked off. Uncheck to add a different image to the page.

b.       Drop an asset here field: Drag and drop an image from the left hand rail.

i.      Once a photo has been added:

1.       Edit button: From the image’s toolbar, click “Edit” to crop, rotate, and flip the photo.

2.       Clear button: Delete the selected image.

3.       Pick button: Replace the selected image with a new one from the DAM (Digital Asset Management, where images and other assets are stored).

c.       Decorative image – no alternative text checkbox: Meaningful images, which contribute new information to the page, must have alternative text provided for visually impaired residents. Decorative images which don’t convey additional meaning do not require alternative text for accessibility. Default unchecked. If checked, skip to step 2.d.

i.      Alternative text for accessibility field: Add alternative text.

ii.      Inherit from description of asset checkbox: If selected image already has alternative text defined in Assets, use this text. If unchecked, the “Alternative text for accessibility” field will be enabled. Default unchecked.

d. If Decorative Image checkbox is checked, disable the accessibility alt text fields.

e. Preset Type radio buttons: Select if the image should appear as-is, or appear cropped. If the image is inherited from Page Properties, this field will not appear. It is unlikely that the default options need to be changed.

i.      Select either Image Preset or Smart Crop radio button

1.        Image Preset radio button

a.       Image Preset dropdown: None selected by default; no other options.

b.       Image Modifiers

2.       Smart Crop radio button

a.       Rendition dropdown: None selected by default. Select Auto to let the system determine the best cropping; otherwise select Small, Medium, or Large.

b.       Image Modifiers

f.       Disable lazy loading checkbox: When checked, Image will load regardless of if it is currently visible by resident. When unchecked, Image will only load when visible on the page. Default unchecked.

The Asset tab in the Image authoring dialog.

3. Metadata tab

a.       Caption field: Add a caption to display under the Image. This field is disabled if the checkbox below is checked.

i.      Get caption from DAM checkbox: When checked, use the image’s caption text as defined in the DAM. Default checked.

The Metadata tab in the Image authoring dialog.

4.       Styles tab

a.       Image Border dropdown: When Border 1 Pixel is selected, a gray border appears around the image. This can help separate the image from a background with the same color. Default None.

b.       Border Radius: When Radius 32 Pixel is selected, the image will have rounded corners. Default None.

c.       Image Alignment: This selection determines where the component appears on the page. Select between None (left aligned), Center, and Right. The alignment also applies to the caption. Default None.

The Styles tab in the Image authoring dialog.
A left-aligned Image with a border, border radius, and caption. Figure A: Above is an example of a left-aligned Image with a border, border radius, and caption.

Sizing

Guidelines detailing the minimum recommended sizing specs across our various available aspect ratios. Within our components, the most commonly applied ratios are 16:9, 4:3, and 1:1. 

  • Card Group 16:9 , 1200x675px
  • Hero Section 4:3, 1200x900px
  • List Items 1:1, 600x600px
  • CTA Teaser 1:1, 600x600px
  • Featured Teaser 4:3, 1200x900px
selection of images for image sizing

Accessibility

  1. When adding an Image to the page, make sure to add alternative text that describes the information or function represented by the photo, unless it is decorative. This will be read out by a screen reader for users who cannot view the image.

a. Check out the Image Description Best Practices guide for editorial guidance on writing useful alternative text.

Other tips

  1. Use the Emulator widget to test Image size on different devices.
  2. The recommended character limit for captions is 40 characters.