Inserting and Formatting Images in Blackboard

Modified on Thu, 21 Dec, 2023 at 9:13 AM

Your teacher may ask you to insert an image into a Blackboard assignment, especially for discussion posts. This tutorial can help you insert and format an image in the Blackboard text editor.

Inserting the Image

Click on the “Add Content” button. It is shaped like a plus sign and is the bottom rightmost button in the text editor.

The “Add content” box opens. Click Insert Local Files beneath the Common Tools heading.

Add content box

Browse for the image on your computer and then select it.

Your image will appear inside the textbox.

Formatting the Image

You may want to format your image’s “alt text” description, size, and alignment. You can format your image by following these directions:

Right click on your image in the text editor and click “Image” in the drop-down menu.

When the box labeled “Insert/edit image” appears, add alt text to the field labeled, “Alternative description.” Alt text need only be a simple description of the image. In this example, “smiley face” would be appropriate.

What is alt text? Alt text is a text description of an image used by screen reader software and web browsers that cannot display images. You may have class members who use such software and browsers.

Change the image’s size by changing the number in either the Width or Height fields. By default, Blackboard will keep the image’s proportions intact so that it does not become distorted. You can undo that option by clicking the “constrain proportions” button (symbolized by a lock icon) to the right of the Width and Height fields.

Insert/edit image box

A good rule of thumb for Blackboard posts is for the larger of the two dimensions to be no larger than 600 pixels.

Click “Save” to apply your changes and close the “Insert/edit image” box. You will be returned to the text editor.

Just like text, you can change the alignment of your image. Simply left click the image to select it, and then click the Left Align, Center Align, or Right Align buttons in the text editor’s toolbar. The buttons have the following icons:

Alignment tools

Advanced – Using HTML to Wrap Words Around Your Image

By default, your image will share only one line with your text, and the text itself will fit closely to the image, which may be difficult to read.

You can avoid this by simply adding lines between the text and image, or you can use HTML to allow more lines of text to wrap around the image.

To do so, open the HTML editor by clicking the “Source code” button, labeled “< >”, in the text editor’s tool bar. Find the img tag for your image, and then its style attribute. Replace the style attribute’s contents (between the quotation marks that follow it) with the following code:

vertical-align: middle; margin: 0.0px 10.0px; float: left;

Before:

HTML with default word wrap

After:

HTML with custom word wrap