Image

Basic Info

The Image component allows you to add images to your page. While images may also be incorporated into other components, this is the only component that will allow you to add a standalone image.

Example

Component Tutorial: Image example

Example of an image caption

Component Tutorial: Image example

Example of a linked image

Component Tutorial: Image example

Example of a rotating image

Tutorial

  1. Navigate to and open your page.
  2. Add the image component.
  3. A new image component without content will appear on the page as a placeholder.
  4. To edit the component:
    1. Right-click on the component and select Edit; or
    2. Double-click on the component.
  5. An edit window will appear so you can insert an image and provide additional image details.
  6. Drop an Image: Locate an image from the left-hand side DAM asset tray. Drag and drop it into the specified spot within the edit window.
  7. If necessary, edit the image by using the supplied editing tools:
    1. Crop to adjust portion of image shown on page.
    2. Rotate image in 90° increments.
    3. Use the slider to zoom into the image.
  8. To remove the previously selected image, click the Clear icon. This icon looks like a broom.
  9. Image Alternative Text: This is a required field. For site visitors using screen reading software alternative (alt) text provides information about the image on the page. This text should be short (like a tweet of 140 characters or less) and provide details about the image within the context of the page.
  10. In the Details tab:
    1. Provide an optional image caption. This caption will appear in gray stylized text underneath the image.
    2. Create an optional link the image to another CMS page, an external site, DAM asset, or email. An indicator will appear in the bottom right-hand corner of images that are hyperlinked to notify site visitors.
    3. Create an optional sequence of random images.
  11. Click OK.

^ Back to top

Randomize Image

  1. In the Details tab of the Image edit window, check the box to Randomize Image.
  2. A field to select your Images Path will appear. Navigate to the appropriate folder in the DAM that contains the images you want the CMS to randomly display on the page.
  3. Click OK.

^ Back to top

Accessibility Info

Using Images

  • Screen readers are not able to read text displayed within an image.
  • Images with text are difficult to read on smaller screens and can appear pixelated when magnified.
  • Logotypes (logos with text) are okay to use with alt text.
  • When selecting an image, make sure it's something that can complement your text content rather than replace it.

Alternative Text

  • When writing your alt text, be concise and consider the purpose your image plays in the context of your content.
  • Because of character limits on different screen reader software, try to keep your alt text less than 140 characters.
  • If an image is purely decorative, enter a space in the alt text field to mark it null.

Infographics

  • Infographics must include a full text description, located in the main body of your page or within an Expandable component.
  • Note in your alt text where site visitors can locate the full text description.
  • Some colors are inaccessible to users with color blindness, so do not rely on color alone to convey messages in graphics.

Learn more about images and accessibility at NYU.

^ Back to top

Screenshots

Component Tutorial: Image edit window

Component Tutorial: Image edit window