Using Images

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.