Using aligned images in the page editor to improve page layout

Aligning Images

For: Administrators, page editors, news or blog contributors in the Warwickshire Learning Platform.

The align function will allow you to format your picture so that text will wrap around and auto-flow around your image. This can be used when creating a page of text, banners at the top of pages, creating menu's which use images as button or for news items. Using this funtion means you do not have to create tables to format your pictures on your page.

To set a pictures alignment (you need to be in the page edit mode):

• insert the image as usual using the image manager
• right click image select image properties
• Set the alignment using the option
• set the horizontal and vertical spacing around the image
• done

Un-aligned image with no spacing

This is rubbish! you can see the text continues at the base of the image, it doesnt look that great and normally I would have used a table to align the text to the middle which would take a while to set up and configure.

Left/Right aligned images with horizontal spacing set to 10

this bumps the text up to the top of the image and it will auto flow around the image, this is useful if there is lots of text, or to put a picure at the top left of the screen. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image.


this bumps the text up to the top of the image and it will auto flow around the image, this is useful if there is lots of text, or to put a picure at the top right of the screen. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image.