Click the link to view the Working with Images video.

  1. From the edit page view, click Add To Content then select Add Block.

  2. From the Add Block modal, select Image.

  3. Click Image to add an image.
    Note: Check out How do I add an image from Flickr? to see how to add an image from Flickr.

  4. Choose +Select an image to open the File Manager.

    The File Manager displays images that can be added to the Image block. Use the <<Previous and Next>> navigation to browse images in the File Manager.
    Note: File Manager content may also be navigated by selecting the numbered tiles between <<Previous and Next>>.

  5. To search for an existing image, use the Keywords search box to search for an image. With the File Manager content filtered by keyword, click the image and select Choose from the popup menu.

  6. The Add Image form will reappear with the selected image. Configure the remaining fields as needed and then select the Next button.
    Note: Some of the Image block fields may be configured automatically with metadata from the selected image.
    • Image Alignment: Select how the image should be aligned on the page. See How do I align an Image block? for additional information.
    • Alt Text:* Describe the image by telling viewers as much as possible about the image, using as few words as possible. The purpose of alternative text is to allow the content or purpose of the image to be revealed to someone with visual or cognitive disabilities. Alt text is not visible to learners—it is only read aloud by screen readers. To learn more about alternative text, visit WebAIM's Alternative Text.
      Note: If an image is decorative, enter a single space in the Alt Text:* field of the Image block so that the alt="" tag is set for the image. If no alt attribute is present for an image, screen readers read the file name for the image creating an unnecessary distraction for screen-reader users. Additionally, the aria-hidden="true" tag is set so that the image attribution and caption are not read by screen readers. To learn about decorative images, refer to WebAIM's Decorative Images.
    • Image Caption: Add a caption to the image which will be displayed on the screen for all viewers. 
    • Link: If the image should link to another page, enter a URL.
    • Image Attribution: Use these fields to attribute the image to the author. 
    • Zoom Image?: Check the Yes box if the image should open at its original size in a new window.

  7. Use the Numeric Resize: field to change the pixel width and then click Size; or click and drag the corners of the image to resize manually. Select the Add+ button.

  8. The new Image block will now appear on the page in the edit page view. Select the Publish My Edits button to save the block to the page.

  9. Once the changes are published, the Image block displays as it will appear to learners.



To upload an image to the File Manager, select the Browse button to browse for images with the macOS Finder or Windows Explorer. Images may also be added to the File Manager via drag and drop to Drag Files Here.



Image block Custom attribution type features a WSIWYG editor and supports unlimited text



To learn more about adding images, watch the Working with Images video



How do I add an image from Flickr?
How do I align an image in an Image block?
How do I give credit for a piece of work using the Citation block?
How do I link to a file?
How do I upload files to the File Manager?