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
Click the Insert Content Link (folder with chain) button in the toolbar. The Content Links pop-up window will open.
Insert Content Link button
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.
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.
- Click the Browse button next to the Upload a File text box.
- 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.
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
- 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.
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.
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.
Insert Image button
Click the Browse Server button to access images which you have uploaded.
Click Browse Server to access uploaded images.
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.
Image Properties window after uploaded file has been selected.
- 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.
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.
- 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.
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.
- Fill in a pixel size (e.g., "5") in VSpace to add empty "padding" to the top and bottom of the image.
- 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.
- Click OK.
Convert an Image into a Link
- Upload and insert an image following the instructions in the previous two sections.
- In the Image Properties window, select the Link tab.
- Enter the destination URL into the URL field.
- To have the image open in a new window or tab, select New Window (_blank) from the Target pull-down menu.
- To hide the blue border, select the Image Info tab and enter "0" for the Border.
- 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
- Click the Insert/Edit Image tool to reopen the Image Properties window.
- Copy and paste the image Web address into the URL field (e.g., http://www.personal.psu.edu/xyz123/image.gif).
- Click OK.
Reedit Image Properties
- Click the image to select it. When selected, it will show square "handles."
Click the Insert/Edit Image button to reopen the Image Properties window.
Insert/Edit Image button
- 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.