Virginia Tech™home

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. 

boo

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.


This component inserts an image onto the 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.

Features

  • Basic image editing
  • Accessibility enforcement
  • The image can be a link
  • Various size and positioning configuration options
  • Automatic image quality adjustments with the adaptive image option
  • Custom text description and caption

Image editing

The image may be edited in-line after choosing it from the dialog properties and clicking the pencil icon.

Edit Options

  1. Crop
  2. Rotate - Clockwise rotation
  3. Undo - Undo the most recent edit
  4. Redo - Redo the most recent edit
  5. Enable full screen - Launches a full screen editor with more options
    • Launch Map - Create a clickable area inside the image
      • Rectangular Map - Create a rectangular clickable area using a bounding box
      • Circular Map - Create a circular clickable area using a resizing control
      • Polygon Map - Create a clickable area using a triangle
    • Reset Zoom - If the user has zoomed into the image, reset to the default view
  6. Zoom - Opens a slider control to zoom in or out with
  7. X - Cancel edits
  8. Checkmark - Confirm edits

Dialog Properties

Title and Options

  1. Image asset - Browse for an image file on your computer or drag one over from the digital asset library
  2. Component Title - Title of Component
  3. CSS Class - CSS class to be applied to the component
  4. Link to - Renders the image as a link to another page
  5. Description - A short paragraph of text describing the image
  6. Caption - A short sentence that will serve as the caption of the image

Accessibility

  1. Alternative Text - a short sentence providing a description of the contents of the image. This will be used by screen reader software to assist visually impaired individuals
  2. Image is decorative - if an image serves no meaningful purpose (i.e. is an icon or symbol, or does not provide any real content to the user) then this option will hide it from screen reader software
  3. Fill Alternative Text from Assets - This option will fill the Alternative Text field with the alt text or title from the asset in the asset library

Formatting

  1. Image Size - Choose the size of the image
    • Adaptive - Automatic image quality adjustments based on screen width
    • Thumbnail - The smallest image size
    • Small - Forces the width to be a smaller size
    • Medium 240 - Forces the width to be 240 pixels
    • Medium - Forces the width to be a medium size
    • Large - The image loads in its original size
  2. Alignment - the horizontal positioning of the image
    • Default - For use with the adaptive image format. The adaptive image cannot be aligned
    • Center
    • Left
    • Right