Adding images to a web page takes several steps:
- Upload the image to a folder on the website
- Link it to a position within the text and the page
- Add alternate text to display if the image isn’t visible
- Add styling to control its display size, border and text flow around it
All these steps can be initiated through the text input screen. Click on the Insert/edit image button to open a pop up dialogue box. If you happen to know the url of the image required, type it into the box.
To view and select a previously uploaded image:
- Click the ‘browse’ button next to the URL box to open the image browser
- click on the image name to view it
- click ‘add’ to insert it into your text
- click on one of the headings to sort the list by name, size or date
- You may also have delete privileges – if so, you can click delete to remove an image from the site.
To upload a new image from your own computer:
- Note that there are restrictions on the size of individual images you can upload and you may also have a quota that limits the total file space you can use. These limits are indicated in the panel at the bottom of the image browser window
- Click on the browse button at the lower section of the window to browse the files on your own computer.
- Navigate to the location of the image you want and click ‘open’ and ‘upload file’.
- Ensure the ‘resize if necessary’ button checked to enable the system to resize your image to manageable proportions for the web site.
- Note that very large images can’t be processed here.
Styling the imge
Once the image is selected, the image browser closes and you are returned to the Insert/edit image dialogue box.
- Add a brief image description. This is the alternate text to display if the image isn’t visible
- Choose one of the alignment options to control the position of the image and the text flow around it.
- Set the border thickness in pixels or leave blank for no border. A value of 1 produces a thin border.
- Set vertical and horizontal space to about 5 or 10 to leave a margin around the outside of the image. Leave blank to allow adjacent text or images to touch the side of the image.
- Click insert to place the image.
To adjust an image within a layout, select the image and click on the Insert/edit image button and enter new values.