The Image component is used to place images on a page.

It affords image editing as well as the configuration of certain properties and styles. Images can be sourced from Ensemble's asset library or from the user's computer directly.

The Image configuration dialog contains the following options:

Image asset - drop zone for drag and drop of images from the Assets sidebar

NOTE: Do not use the browse function to upload assets directly to the component.

Component Title - text input field that does not display for this component but useful for giving the component a title for keeping track of what it is used for on the page

CSS Class - text input field for custom CSS and/or utility classes

Link to - text input field to link a page to the image; link can be a /content or https:// link type

Description - textare input field for a description of the image; this field does not display in a page

Caption - textare input field for an image caption

Image Component Title and Options configuration dialog

Image Component Title and Options configuration dialog

The Accessibility configuration dialog contains the following options:

 

Alternative text - text input field for accessible alternative text descriptions of the image

NOTE: Alternative text is required for non-decorative images and must be a brief description of the image contents. Avoid using text in images or images that are complex diagrams as they will require long descriptions if their content is not explained by other text on the page.

Image is decorative - checkbox for images that do not contain information relative to the page and are purely decorative, e.g., a decorative stencil image being used to separate sections of a page

Fill Alternative Text from Assets - button used to fill the alternative text field from the image properties

Image Component Accessibility configuration dialog

Image Component Accessibility configuration dialog

The Formatting configuration dialog contains the following options:

 

Image Size - select pulldown to set the image size is used; Adaptive, Thumbnail, Small, Medium 240, Medium, Large (original size)

NOTE: Using a size other than Adaptive will break page responsiveness. If an image needs to appear at a specific size, you can select a pre-determined size from the pull-down menu. The sizes are:

Thumbnail: 52x52

Small: 185 pixels wide

Medium 240: An image that's 240 pixels wide

Medium: 490 pixels wide

Large (original size): The image at the size it was uploaded.

Alignment - select pulldown to set the image alignment relative to the page; Center, Left, or Right