Image

On this page:

Basic Info | Example | Tutorial | Randomize Image | Sizing Suggestions | Accessibility Info | Screenshots

Basic Info

You can add images to your page by using the Image component.

Example

Tutorial

1. Navigate to and open your page.
   
2. Add the image component.
3. A new Image component placeholder icon will display in the space.
   
4. To edit the component, click or touch the placeholder. The component toolbar will display along the top of the space.
5. Select the wrench icon to configure.
   
6. Drop an Image: Locate an image from the components menu in the side panel.
   1. Make sure to have the side panel open before opening the component's Configure window. You will not be able to open the side panel while the Configure window is open.
7. Drag and drop it into the specified spot within the edit window.
8. To remove the previously selected image, click the Clear icon. This icon looks like a broom.
9. In the Image 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.
10. In the Accessibility tab: Enter Image Alt 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.
11. Click or touch the checkmark to save and close. 

Edit an Image

1. Click or touch an existing image on the page to open the toolbar. 
2. Select the pencil icon to edit. An abbreviated toolbar will appear. Through here, you can: 
   1. Rotate right
   2. Expand the view to full screen size
   3. Close
3. For a full menu of edit options, including Crop, open the expanded view. 
4. To close the expanded view, click or touch the Exit Fullscreen icon at the top right of the screen.

^ Back to top

Randomize Image

1. In the Image tab of the Image edit window, check the box to Randomize Image.
2. In the Images Path, navigate to the appropriate folder in the DAM that contains the images you want the CMS to randomly display on the page.
3. Click or touch the checkmark to save and close. 

^ Back to top

Sizing Suggestions

The CMS will automatically shrink or expand images so they occupy 100% of the width of the space they're in. So if a small image, perhaps only 100 pixels wide, is placed in the main content area of a Content Template without the use of a Column Control container, then it will expand to fill the entire width of that content area, 930 pixels. This can cause smaller images to become very pixelated.

Some things to keep in mind:

• Recommended DPI is 72
  
• An image will never display wider than 930 pixels
  
• Basic Promo images will never display larger than 450 pixels wide x 338 pixels high

Learn more about adding content to the DAM, including naming files and size limits.

^ 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

^ Back to top