Add an Image to a Text Component

Add an Image to a Text Component#

Tags: educator how-to

When you use the Visual Editor, you can add any image from your computer to a Text component. You can see a preview of the image before you add it to the component.

Note

  • Before you add an image, make sure that you obtain copyright permissions for images you use in your course, and that you cite sources appropriately.

  • To add effective alternative text for images, review Use Best Practices for Describing Images.

  • You can only add one image at one time.

  • Each individual image file must be smaller than 10 MB.

To add an image to a Text component, you can use one of the following procedures.

Locate an Image on Your Computer#

  1. In the Text component, position the cursor where you want to add an image, and then select the image icon on the toolbar.

  2. In the Add an Image dialog box, Upload a New Image (10 MB max).

  3. In the dialog box that opens, locate the file that you want to add, and then select Open, or locate the image in the Image Gallery, and then select Next.

    As soon as your image is selected, the Image Settings dialog box opens.

  4. In the Edit Image Settings dialog box, add an image description.

    • In the Alt Text field, enter alternative text for the image. This text becomes the value of the alt attribute in HTML and is required for your course to be fully accessible. For more information, see Use Best Practices for Describing Images.

    • If your image is a decorative image that does not convey important information, select the This image is decorative (no alt text required) checkbox.

  5. (optional) Specify the width and height of your image. For more information, see Change the Image Size.

  6. Select Save.

  7. Save the Text component and test the image.

Select a Previously Uploaded Image#

  1. When you upload an image, the image automatically becomes available in a gallery list that opens when you add an image to a Text component.

  2. In the Text component, position the cursor where you want to add an image, and then select the image icon on the toolbar.

  3. In the Add an Image dialog box, locate the image in the gallery list, and then select Next. There are sort and filter options available for the gallery list to make it easy to find the image you need.

  4. In the Image Settings dialog box, complete one of the following options.

    • In the Alt Text field, enter alternative text for the image. This text becomes the value of the alt attribute in HTML and is required for your course to be fully accessible. For more information, see Use Best Practices for Describing Images.

    • If your image is a decorative image that does not convey important information, select the This image is decorative (no alt text required) checkbox.

  5. (optional) Specify the width and height of your image. For more information, see Change the Image Size.

  6. Select Save.

  7. Save the Text component and test the image.

Format an Image in a Text Component#

You have several options for formatting an image in a Text component.

Align an Image#

To align your image to the right, the left, or the center, follow these steps.

  1. In the Text component, select the image.

  2. On the toolbar, select the left align, right align, or center icon.

Change the Image Size#

To change the size of your image, follow these steps.

  1. In the Text component, select the image that you want to edit, and then select the Contextual image icon that appears above the image.

  2. In the Image Settings dialog box, locate Image Dimensions, and then enter the values that you want for the Width and Height options.

    Note

    To make sure that the image keeps the same proportions when you change the image size, make sure that Lock proportions is selected, and enter a number in only the Width field or the Height field. After you tab or click outside that field, the number in the other field changes to a value that maintains the image proportions.

  3. Select Save.

If you want to change the image back to the original size, clear the values in the Width and Height fields.

See also

Working with Text Components (reference)

Create a Text Component (how-to)

Paste without Formatting in a Text Component (how-to)

Add Link to Website, Course Unit, or a File (how-to)

Work with HTML Code in the Text Component (how-to)

Work with LaTeX Code (how-to)