Display Images in Your Coursework
You can display images in your questions, assignments, or announcements.
- Use one of the following image formats to ensure compatibility with all Web browsers: PNG, GIF, or JPG.
- Keep the image dimensions smaller than 800 by 600 pixels to ensure that the image is displayed in the question without scrolling.
- Open the question, assignment, or announcement in which you want to display your image file.
Open the My Files window.
From this page: Do this: Question Editor Click My Files in the Page Tools panel. Assignment Editor Click Include File for either the Description or Instructions. Communication Home Click My Files to the left of your announcement text.
Navigate to the file you want to use and select its
You can select more than one file.
- For Paste location of file (selected below) as, select Image.
Set the display text for the image.
To do this Do this Use the existing display attributes In Attributes, select use saved attributes. Override the existing display attributes
- In Attributes, select enter new attributes.
- Type the alternative text you want to be read
by screen readers in both the alt
tag and title
Screen readers might read the contents of the alt or title attributes of an image. To ensure that your content is accessible, provide the same information in both fields.
- Optional: Provide a link to a longer description of the content in the longdesc field.
Select where you want your file to be included.
In a: Do this: Question For Destination Field, select Question, Answer, or Solution.Note You can include files or images in Answer only for multiple-choice, multiple-select, or matching questions. Assignment For Destination Field, select Description or Instructions. Announcement For Destination Field, select Announcement.
For each image to be displayed, a
<userimage>tag is added to your content referencing the image's file ID and specifying any overrides to the display attributes.
<userimage(23456, alt => "gingko leaf", title => "gingko leaf")>
If needed, cut and paste the
<userimage>tag to the location where your image should be displayed.
Specify other attributes that are valid for the
<img>tag in HTML — for example, align, height, width, or style — in the same way that the alt, title, and longdesc attributes are specified.
For example, the following code displays the image with a 2-pixel solid gray border:
<userimage(103854, style => "border: 2px solid gray;")>
The following code resizes the image to a width of 150 pixels:
<userimage(137884, width => "150")>Tip Specify either height or width to resize the image, as the other dimension will adjust proportionately.