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:
- Pattern Library: Images for examples of pixel dimensions
- Editing with Pixlr
Adding Images to Your Website
Please follow the instructions below to add images to your site. See the image gallery section if you wish to create a gallery.
- 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).
- 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
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. - Editors who have access to Photoshop and who are familiar with this software can also resize using this.
- Pixlr
- There are several ways that you can resize, crop and save the image to the appropriate size
- 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)
- 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 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.
To upload the page, see the editing page content section of webguide.
To upload the image file, you'll need to navigate back to the images folder for your site and click 'Upload' next to the image file you wish to upload. See managing files on how to navigate your website files.
