Add an Image to a Text Component
Using the Visual Editor, you can add any image from your computer
to the text component. It is also possible to preview the image before adding
it to the component.
Before adding images, make sure you get the necessary copyright permission
for any of the images you plan to use throughout your course; also, properly
cite all the sources.
To add effective alt text to images, see the Using Best Practices for Describing Images tutorial.
Just one image may be added at a time.
Individual image files must be less than 10 MB each.
To insert an image within a Text component, you can proceed by one
of two means:
- You can search for images from within the Add Image dialog box using the Browse Your Computer option.
- Or you may choose from images you have uploaded previously.
Locate an Image on Your Computer
1. You can add an image to your desired Text component by locating an
image on your computer. Place the pointer where you would like to add the image.
Next, from within the toolbar, select the image icon.
2. Doing so opens the Add an Image dialogue box, in which you can
upload a new image that is up to 10 MB maximum.
3. Find the file you want to add in the dialogue window that opens and select Open. Or search for an image in your Image Gallery, and click on Next.
4. Selecting your image immediately opens the Image Settings dialog
box, in which you can add a description for your image.
- In the Alt Text placeholder, write an alternative text for your
image, which then becomes the HTML Alt attribute value. If you would like your
course to be completely reachable by everybody, the image Alt attribute is
essential. For more information, see Use Best Practices
for Describing Images.
- You can select the ‘this image is decorative (no alt text
required)’ checkbox if your image is not decorative or informative; and does
not play a role in understanding the overall context.
5. You may also alter the dimensions of the image as you see fit. To read more about resizing images, see the Change the Image Size guide.
6. Next, click on Save to maintain any modifications made to the
image.
7. Lastly, save the Text component, itself. And check to see if the
image displays correctly in the LMS using the Preview.
Select a Previously Uploaded Image
1. You can access the images you upload from within the Gallery list.
This list automatically loads when you insert an image inside your Text
component.
2. Place the pointer where you would like to insert an image in your
Text component, then click on the image icon in the toolbar.
3. This opens the Add an Image window, in which you can search for
your desired image in the Gallery list, then click Next. The gallery list
includes filtering and sorting options that enable you to quickly find the
image of your choice.
4. To modify the settings of an image, you can select from one of two
options in the Image Settings dialog box.
- For your course to be readily accessible, it is essential to
provide alternative text, also known as the HTML alt attribute, within the Alt
text field. To ensure this is done correctly, consult the Use Best Practices for Describing Images guide.
- You can select the ‘this image is decorative (no alt text
required)’ checkbox if your image is not decorative or informative; and does
not play a role in understanding the overall context.
5. You may also alter the dimensions of the image as you see fit. To
read more about resizing images, see the Change the
Image Size guide.
6. Next, click on Save to maintain any modifications made to the
image.
7. Lastly, save the Text component, itself. And check to see if the
image displays correctly in the LMS using the Preview.
Format an Image in a Text Component
When you would like to use an image within your Text component,
there are numerous ways you can optimize the images, each of which allows you
to customize and control your images to a different extent. Examples of such
formatting may include:
- Aligning an Image
- Changing the Image Size
Align an Image
Follow the steps below to align an image to the right, left, or
center of your Text component.
1. First, choose the image which you have inserted within your Text
component.
2. From within the toolbar, choose among the different alignments by
clicking on the corresponding icon: left, right, or center.
Change the Image Size
Follow the steps below to resize images.
1. Open the Text component you wish to edit an image within. Then choose
the image you would like to modify; once you select the image, the Contextual
image icon appears above the image.
2. Click the icon to open the Image Settings dialogue box. In the opened window, navigate to the Image Dimensions section, where you can alter the values assigned to the width and height of the image as you see fit, ultimately resizing the image.
Note:
Select the Lock Proportions to maintain the image’s width-height
ratio; this will avoid skewing the image once you change the dimensions. In
other words, click on the Lock Proportions to activate it, then enter your
desired value within just one of the two available fields - either the Height
or Width field. Once you enter the value for one of the sides, press the tab
button or click outside the field. As a result, the other value is calculated
automatically to preserve the image proportions.
3. Click on Save.
In case you would like to resize the image back to its original size, clear the Width and Height values you assigned each field.
Related Articles
HTML (Texts) Component Overview and Templates
The key elements constituting your course content are the Text components utilized. To add and format text, links, images, or other content types; you may use Text components. It is possible to add text, images, and hyperlinks, within the text ...Options for Editing Text Components
When it comes to editing your Text content, there are two editors you may choose from: The Visual Editor The Visual Editor is the simpler choice. It allows you to easily create, edit and format your content; or add links and images, for instance, ...Adding Textual Content (Text Component) to the Unit
1. Within the unit you wish to enhance by adding a textual content, click on HTML under the Add New Component section. 2. To add a blank component, select the Text template. The component is added at the end of the unit. 3. Open the component in the ...Add a Link in a Text Component
While using the Visual editor, the Insert link dialogue box is the option we use to insert a link to a website, another course unit, or a file in a Text component. Add a Link to a Website 1. Choose the text you wish to be displayed as the link text. ...Component Overview
Uploading various content for the course may be done using components. Once the course designer has created the required sections and subsections, they must create units to insert the content within. The components are included within the units; with ...