6.3 Insert an Image into Your HTML Content
- In Edit mode, click in the content where you wish to place your image
- Click on the Files, Images, Hyperlinks button (the little stack of books icon)
PLEASE NOTE: if you have a pop-up blocker, hold the Shift key down when you click the Files, Images, Hyperlinks button.
- An additional window will open up containing a library of assets
PLEASE NOTE: the window may appear automatically behind your current window in Firefox
- In the left hand folder directory, click on the folder containing the image you wish to insert
- Select Images in the dropdown menu (this will allow you to view a list of your images)
- To insert the image, either double-click on the image or on the image's descriptive text, or highlight the image and click the Insert icon
PLEASE NOTE: If you click on the yellow icon to the right of your image ONLY a thumbnail of your image will be inserted into your content
- A Picture Properties dialogue box will automatically appear on your screen after inserting your image. Click Preview to see a preview of your image.
PLEASE NOTE: Be sure to fill out the Title field. This is where you will put your Alternative Text (Alt Tags), which is used as a replacement for an image, whenever the image cannot be seen. It is best practice to include Alternative Text to enhance the accessibility of the site.
- You can also access your image properties by right clicking on your image or clicking the Picture Properties icon in the editor's tool bar
To position an image, apply the "image-right" or "image-left" style. Refer to the .edu Style Guide for more details and more options.
back to top