Image component

The image component allows users to pull photos from their assets library or upload an image directly to feature on their websites.

To place the image component on a page, drag the component from the side panel and drop it to the area on the page where the image should appear. 

Once in place, click on the Assets tab in the upper portion of the side panel to switch to your asset folder. Click and drag the image to the box where the component is placed. Release the image when it appears over the component box. 

Editing an image

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

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. 

Image editing on the page
Click the pencil icon to edit an image on a page. You can crop, rotate, or flip an image.

Properties window

After placing the image on the page, open its properties by clicking on the configure (wrench) icon. From here, you can adjust the settings of the image. 

The image component's properties feature three tabs at the top: Image, Accessibility, Formatting. 


Image tab

The image tab shows the image that has been uploaded. It can be removed by clicking the Clear button. Another image can be uploaded in its place by dragging it from the assets folder over to the image tab area. 

Other fields that appear under that tab are:

Title: Give the image a title.

Link to: Enter the URL or navigate to the page within the CMS if you wish to link the image.

Description: This describes the content of the image.

Caption: This text will appear on the page with the image as its caption.

Accessibility tab

An image must have Alternative Text for screen readers used by site visitors who may have a visual impairment. Once open, an image's properties window will not close until Alternative Text is entered under the Accessiblity tab. The alert that appears in the image above demonstrates the Alternative Text requirement.

 Alternative Text is required, unless the image is a decorative element on a page.

If the image is decorative, click the check box. Decorative images are those used for design treatments on a page. 

Images in assets which do not meet accessibility standards are badged with the error "Required Metadata Missing."

Formatting tab

By default, images are intended to fill the space where they are placed. This treatment is ideal for pages that are designed to be accessible from several sites. As a result, the default settings should remain in place for both size and alignment. 

However, if there are times when an image needs to be aligned or appear at a smaller size, users can make those adjustments. 

Image Size: Here, you can adjust the image size. By default, all images will be adaptive. All templates within Ensemble are developed to be accessible from multiple devices and platforms. The adaptive format will adjust the images to fit at an optimal size for the desktop, laptop, tablet, smartphone, or other device. 

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: Besides the default size, images can be aligned center, left, or right. However, to keep true to the grid for the responsive design, it's best to leave alignment at default. 

To remove an image, click on the box and choose the wrench icon to open the properties. Under the Image tab, you'll see a smaller version of the image. Click the clear button to remove the picture but keep the image component in place. To remove the component entirely, click the box and choose the trash can icon. Confirm removal by clicking the Delete button.