Skip to Main Content

6.3 Insert an Image into Your HTML Content

  1. In Edit mode, click in the content where you wish to place your image
  2. Click on the Files, Images, Hyperlinks button (the little stack of books icon)
    Files, images, hyperlinks button
    PLEASE NOTE: if you have a pop-up blocker, hold the Shift key down when you click the Files, Images, Hyperlinks button.
  3. An additional window will open up containing a library of assets
    PLEASE NOTE: the window may appear automatically behind your current window in Firefox
  4. In the left hand folder directory, click on the folder containing the image you wish to insert
  5. Select Images in the dropdown menu (this will allow you to view a list of your images)
    Images dropdown menu
  6. 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
    Insert image

    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
    Insert thumbnail
  7. A Picture Properties dialogue box will automatically appear on your screen after inserting your image. Click Preview to see a preview of your image.
    Preview 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.
    Picture properties
  • 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
    Picture properties button

 

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

Back to Top

Montgomery College

Montgomery County, MD

240-567-5000

©2014, Montgomery College