HTML Editor: Insert an Image

Within the HTML editor, you can upload an image from your local drive, insert an image you have already uploaded, or link to an image on the Web. Supported file types are .gif, .jpg, and .png>.

This is a two-step process in which you must first upload an image, then insert it later.

Upload an Image

  1. Click the Insert Content Link (folder with chain) button in the toolbar. The Content Links pop-up window will open.

    Screen Captrue. Insert Content Link button.
    Insert Content Link button

  2. Select a destination tab for your image file:
    • Select the Personal tab if you want to use the same image in multiple courses or groups.
    • Select the Course (or Group) tab if you only wish to use the image in that course or group.
    • Select the default Associated tab if you only want to use that image once.

    Screen Capture. Content Links window with selected Acssociated tab.
    Content Links window. Choose the Personal tab if you wish to use the same image across multiple courses. Use the Associated tab for a single-use image.

  3. Click the Browse button next to the Upload a File text box.
  4. Navigate to the image file on your local drive and double-click its name. A path to the file will appear in the Upload a File text box.
  5. Click the Upload File button to complete the upload. The name of the file will appear within the tab.


    Content Links Personal Tab after file has been uploaded

  6. If you wish to create folders (subdirectories), click the New Folder button to open a folder pop-up window.

Note on Internet Explorer 7: If the window fails to open, make sure ANGEL has been designated as a Trusted Site in the security tools.

Upload an Additional Image

Repeat the steps from the section above. The image upload screen will show each image you have uploaded in the HTML editor.

Insert a Text Link to an Image

If you click on a file name within the Content Links window, you will insert a text link to the image. To insert an embedded image, see the following section.

Screen Capture. Example of a text link to image.
Example of a text link to image

Insert an Embedded Image

Once you have uploaded images following the instructions in the Upload an Image section above, you can embed them within the text area/page.

  1. Place the cursor where you would like to insert an image, then click the Insert/Edit Image button. A pop-up Image Properties window will appear.

    Screen Capture. Insert Image button.
    Insert Image button

  2. Click the Browse Server button to access images which you have uploaded.

    Screen Capture. Image Properties window with selected Image Info tab.
    Click Browse Server to access uploaded images.

  3. In the Content Links window that opens, select the appropriate tab, then click the name of the image you wish to embed. A preview will appear in the Image Properties window.

    Note: If the appropriate image is not available, you can upload it following the instructions in the previous Upload an Image section.

    Screen Capture. Image Properties window after uploaded file has been selected.
    Image Properties window after uploaded file has been selected.

  4. In the Alternative Text field, enter a description of the image. This is what is displayed to users if the image is not available or they use a screen reader or text-only browser.
  5. The Width and Height are set to the original size of the image, but you can change the values to resize the image.

    Note: This option works best for JPEG photos.

  6. To add a border, fill in an number (e.g., "1") in the Border field. A black border of that pixel size will be added.
  7. Fill in a pixel size (e.g., "5") in HSpace to add empty "padding" to the sides of the image.

    Note: This feature is useful if the image is embedded within text.

  8. Fill in a pixel size (e.g., "5") in VSpace to add empty "padding" to the top and bottom of the image.
  9. Images are placed at the left of the screen by default. To change the placement, select another option from the Align pull-down menu. The result of your selection will display in the Preview area.
  10. Click OK.

Convert an Image into a Link

  1. Upload and insert an image following the instructions in the previous two sections.
  2. In the Image Properties window, select the Link tab.
  3. Enter the destination URL into the URL field.
  4. To have the image open in a new window or tab, select New Window (_blank) from the Target pull-down menu.
  5. To hide the blue border, select the Image Info tab and enter "0" for the Border.
  6. Click OK.

Note: You can also use the other link tools for images, but you must use the Image tool to remove the blue border.

Advanced Image Properties

If you open the Image Properties window and select the Advanced tab, you will see options for adding long descriptions, style classes and other information.

Link to an Image Outside ANGEL

  1. Click the Insert/Edit Image tool to reopen the Image Properties window.
  2. Copy and paste the image Web address into the URL field (e.g., http://www.personal.psu.edu/xyz123/image.gif).
  3. Click OK.

Reedit Image Properties

  1. Click the image to select it. When selected, it will show square "handles."
  2. Click the Insert/Edit Image button to reopen the Image Properties window.

    Screen Capture. Insert/Edit Image button.
    Insert/Edit Image button

  3. Edit the properties as needed, then click OK.

Resize an Image

Click the image to select it. When selected, it will show square "handles."

  • Click and drag the corner handles to make the image larger or smaller.
  • Click and drag the handles at the sides to make image "stretch" or "contract" horizontally.
  • Click and drag the handles at the top or bottom to make the image "stretch" or "contract" vertically.

Note: If you increase the size of the image significantly, its quality and sharpness may visibly deteriorate.

Related articles:

 

Was this helpful?: 

No