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.

Examples

Image floated right with a border

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.

Image floated left with a border

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.

Implementation in MySource Matrix

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

Applying float and border classes via the Insert Image interface

1. Place the cursor where you would like your image to be inserted.
2. Click on the icon with the landscape graphic labelled Insert Image.
3. Click the Change button next to the Image URL field and upload your picture.
4. Insert a description of the image in the Alternate text box, unless the image is purely decorative.
5. Remove the numeral "0" from the Border thickness text box.
6. Enter floatleft border in the Class: text box to float the image to the left and apply a border.
7. Click the Ok button.

Applying the img_borders class

1. Click the orange Edit Div Properties icon in the top left corner of the div containing the inserted image(s)
2. Enter img_borders in the Class field and click Ok.

Technical implementation

Bordered image floated right

<img src="PATH OF IMAGE" height="165px" width="165px" alt="" class="floatright border">

Bordered image floated left

<img src="PATH OF IMAGE" height="165px" width="165px" alt="" class="floatleft border">

Image floated right

<img src="PATH OF IMAGE" height="165px" width="165px" alt="" class="floatright">

Image floated left

<img src="PATH OF IMAGE" height="165px" width="165px" alt="" class="floatright">

Applying the img_borders class

<div class="img_borders">IMAGE IS WITHIN DIV</div>