Skip to content

Using Images

Using relevant and appropriate images is a great way to liven up the content of your web pages.

Copyright & Approved Imagery

It is important to ensure you have authorisation to use an image and it is not copyrighted. View a list of sites you can use to source images.

The Web & Digital team govern the use of appropriate imagery on the website. Some graphics, including icons and clip art are not aligned with our website standards. Please see approved imagery for further detail.

Image Sizing

Digital images are measured in pixels. All images should be resized appropriately before loading to TMS (especially images received from a photographer or taken straight from a camera). To assist you with image resizing, see the following resources:

Adding Images to Your Website

For sites in the old template, please contact us to assist with adding images. For new template sites, please follow the instructions below:

  • Step 1Choose Display Option from Pattern Library

    The Images page on the Pattern Library provides a number of options for displaying images on your web pages.

    Find the option you want to use and make note of the placeholder image size in pixels - written within the grey placeholder image (see below).

    Example of 180x120 pixel placeholder image in the Pattern Library

  • Step 2Resize & Save Image to Your Hard Drive
    • There are several ways that you can resize, crop and save the image to the appropriate size
      • Pixlr Link to external website is user-friendly web based image editor and is all based within your browser window.
        For step-by-step instructions, please read the Editing with Pixlr page.
      • Microsoft Office Picture Manager (available on most University computers) can also be used.
        For step-by-step instructions, please read the Editing with Picture Manager page.
      • Editors who have access to Photoshop and who are familiar with this software can also resize using this.
  • Step 3Add Image to Webdev (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)

    editing box

    • 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.

    Files view of images folder

    • 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 4Copy Source Code from Pattern Library

    • Go to the Images page on the Pattern Library and copy the source code from underneath the pattern you want to use.
    • Open your webdev site in a new tab and login
    • Go to the page you want the image to appear on and make sure you are in editing mode
    • Click on the Source code icon on the bottom row of the editing toolbar
    • Find the position on the page where you want image to go
    • Paste the code that you copied from Pattern Library into the source code screen
    • Click Update
    • On the editing screen, you'll then need to click once on the placeholder image that you've just added
    • Click the icon to 'Insert/Edit image' from the editing toolbar
    • Delete all content from Image URL field and type in the new path to the image you saved earlier e.g. /mysite/images/example.jpg
    • Don't forget to add an image description to make sure your image is fully accessible!
    • Click Update and Preview > Save Changes if you're happy.
  • Step 5Upload Changes to Live Website

    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.

    Read the 'Making Your Website Live' page for help.

 

Web Team

Call us: For urgent requests or to speak with someone directly,
please contact one of our team members.
 
Not sure how to do something? Take a look at our FAQs.