Image component

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

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

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

Editing an image

Once in place on the page, click the image to see the component toolbar.

Click the pencil icon to crop, rotate, or flip the image.

Note: Any changes made to the image will apply to this page only. Edits made on a page will not affect the original image in the Asset library. 

Once edits have been made (if any), click the check mark to save changes.