Agencies
Services
Image
Image is a component that allows a single image asset to be displayed on the page. The Image component is adaptive and features in-place editing.
The Image component features adaptive image selection and responsive behavior as well as easy image placement and cropping for the content authors.
Configure the Image Component in three tabs:
Asset tab
- Drop in an image of your choice.
Metadata tab
- Image is decorative: When checked, this tells AEM that the image should be ignored by assistive technology as the image is decorative only.
- Alternative Text: Set alternative text for the image as needed. This field is required when Image is decorative is unchecked.
- Get alternative text from DAM: When checked, this will populate the Alternative Text field with the description set for the Asset in the DAM.
- Caption: Caption the image as needed. By default, captions appear directly underneath the displayed image.
- Get caption from DAM: When checked, this will populate the Caption field with the description set for the Asset in the DAM.
- Display caption as pop-up: When checked, captions will display as a pop-up when the mouse hovers the image instead of inline underneath the image.
- Link: Add a URL or file path where you would like the image to link to.
- Open In New Tab: When checked, links will open in a new tab.
- ID & Class: Set a unique ID and/or Class to the component for CSS targeting.
If you are linking to an image, ALT TEXT is REQUIRED (i.e. the image CANNOT be decorative). The proper thing to do with the ALT TEXT is to DESELECT the "Get Alt Text From DAM" and to manually supply the Alt Text, which should be descriptive of WHERE the link is taking the visitor to. (IE: https://www.google.com, then the manual alt text should be something like "Browse Google").
Dynamic Media Settings tab
- Disable Dynamic Media: disables dynamic media
- Select "Image Component" in the Image presets. (default)
- Image modifier options:
- for PNG images that require transparency, you will need to set "fmt=png-alpha"
- should have "fit=fit, 1" by default, which scales the composite image so that it fits into the space allocated with wid= and hei= , with minimal whitespace and no cropping.
- Enter "fit=constrain", which scales the composite image like fit so that it fits into the space allocated with wid= and hei= , but the actual response image may be smaller than specified with wid= and hei= to avoid whitespace.
Styles
Components may have a Style system applied to them to alter the final render or display.
- Rounding
- Rounded Corner: When selected, images will have their corners rounded to 15px.
- Rounded Image: When selected, images will be centered and then perfectly-rounded.
Examples
Images
Image with manual alt tag and caption (not linked)
hands on laptop with blue background
Image set to Decorative Only with Rounded Corners
No Title and no Caption
Rounded Image with Alt tag from the DAM (not linked)
Alt tag from DAM, Caption from DAM (linked to google.com [new window])
Troubleshooting
- The Image Component is sensitive and may display layout issues when inserting and/or editing the component in Author. If an issue occurs, simply refresh the page to correct any component-editing issues.