Agencies
Services
Image
Description
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.
Authoring
*Note: 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.
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
- Select the "Image is Decorative" option if the image should be ignored by assistive technology. This applies to decorative images only.
- Caption the image as needed.
- You can elect to pull the caption from the Image Description in the DAM if you prefer.
- Choose if you want the caption to display as a pop-up. If 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: Add a URL or file path where you would like the image to link
- Select whether you would like the link to open in a new tab. It is recommended to do this only for 3rd party links.
- If you are linking an image, ALT TEXT is REQUIRED (i.e. the image CANNOT be decorative) and 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. as an example if the link is 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.
Examples
Image
Image with manual alt tag and caption (not linked)
hands on laptop with blue background
Image set to decorative only
Alt tag from DAM (not linked)
Alt tag from DAM, Caption from DAM (linked to google.com [new window])
