Using relevant and appropriate images is a great way to liven up the content of your webpages. If you would like to include some images on your website, please follow the instructions below:
Step 1: Resize and save the image to your hard drive
- Please make sure that you resize your image(s) BEFORE uploading to the files view in webdev.
Note: Image size is left to your discretion, however, please ensure that they do not overlap the website template and that they do not fill the screen too much.
- Microsoft Office Picture Manager (available on most University computers) will allow you to resize, crop and save the image to the appropriate size. For step-by-step instructions, please read the Resizing my images page.
Step 2: Make the image available on the development server
- From the homepage of your website, click once on the files option listed in the top blue editing box at the bottom of the page (see below)
- You should see an Images/ folder listed within the files view. Click on the link to enter the images folder.
- Click on the browse button under the 'Upload a file to the current directory' section. This will allow you to search for the relevant image on your hard drive.
- Select the image and click Open. This will display your chosen image path in the field next to the browse button. Then click Submit.
- Your image file will then appear in the alphabetical list with the rest of the files. Then right click on the name of the image and click Copy Shortcut.
Step 3: Inserting your image onto a page
- Go to the page you want the image to appear on and make sure you are in editing mode
- Place the cursor at the location on the page where you would like the image to appear
- Then click the Insert/edit image icon (tree) from the toolbar below:
- This will display the following pop-up on your screen where you will need to enter the image URL and image description
- In the Image URL field, right click and paste in the image shortcut and edit the shortcut to show a "site root" style link. E.g.: remove everything from the start of the URL inclusive of the '.edu.au' so that the link starts with something like: /sitename/images/.... or /images/ if your site is a virtual host. Please refer to the linking section of the editing guide for more information.
- In the Image description field, type in a description of the image. This text will appear when users hover over the image with their cursor.
- Then click Insert.
Please note: you will now need to upload both the image file and the page the image sits on for the page to display correctly on the live website.