▶Click the link to view the Working with Images video.
- From the edit page view, click Add To Content then select Add Block.
- From the Add Block modal, select Image.
- 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. - Choose +Select an image to open the File Manager.
- The File Manager displays files that have been uploaded and also allows uploading additional files. To upload a file, select the Upload/Drag button or drag a file anywhere in the File Manager window.
To search for an existing file, use the Keywords search box to search for a specific file or use the bottom navigation to browse through files that are already uploaded in the File Manager.
Select the checkbox next to the image you want to use.
Select Choose from the menu.
- 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 the image has Alt Text in the File Manager that Alt Text will be brought into the Image block. You can edit this text if desired. 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.
- 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.
- 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.
- Once the changes are published, the Image block displays as it will appear to learners.
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?