The Visual Identity is a part of the UWA Communications Strategy, and its use must be authorised by the University Website Office.
Whether decorative or providing content, images can be formatted to improve their appearance on the page.
If an image is required, ensure that it is relevant to the content of the page and cropped to 165 pixels wide.
These images are 'floated' right and left, respectively. Without floating, the next line of text would drop below the image, and the remaining space next to the image would just contain white space. The classes floatleft and floatright are used to add left and right floating styles.
The default style sheets will take care of the padding around an image for you, keeping them reasonably distanced from the text on a page. Images floated left only have padding on the right hand side and vice versa. The only notable exception is with Internet Explorer 6, where it is not possible to achieve this effect, and as result you will generally see padding on both sides of the image.
By default, images will appear without a border. There are two classes which may be used to apply a standard light grey border to images. The class border can be used apply the standard border to an individual image.
If you have multiple images on a page, rather than adding the border class to each image you can apply an img_borders class to the content div, which will apply a border to every image contained within that div.
Although it is possible to align images via the MySource Matrix WYSIWYG editing interface, at the time of writing, this simply sets an align attribute on the image. This has been deprecated so float left/right classes should be applied instead..
<img src="PATH OF IMAGE" height="165px" width="165px" alt="" class="floatright border">
<img src="PATH OF IMAGE" height="165px" width="165px" alt="" class="floatleft border">
<img src="PATH OF IMAGE" height="165px" width="165px" alt="" class="floatright">
<img src="PATH OF IMAGE" height="165px" width="165px" alt="" class="floatright">
<div class="img_borders">IMAGE IS WITHIN DIV</div>