Adding images to your page

When you create a new page, it is initially without content of any kind other than a title. After you have added some text to the page, you may want to start adding some illustrative images or photographs from your site's existing image library.

Your new site makes adding images easy, and it will also automatically scale and 'web optimise' images that you add to your site's Image Bank, making sure that they are the right size for your page and fast to load for viewers.

How to add an image to the page you have been working on ...

Click on the Edit Page button at the bottom of the page to reload the page in editing mode, revealing the text formatting toolbar above the page text.

First you must decide where you want the image to appear on the page - at the top, bottom, between paragraphs, or with the text 'wrapped' around it. Click your cursor in the text where you want the image to be positioned.
Click on the image icon on the toolbar (indicated above). This will bring up a 'popup' window called 'image properties'. This window will guide you through the process of selecting your image and choosing how it will be formatted on the page.

Choosing and Formatting Images

The first thing to do now is to select the image you want to use by clicking on 'browse server' button. This will open up another pop-up window showing a list of all the images that have already been uploaded previously to your site's Image Bank. If this is the first time that you have added an image, then your Image Bank will be empty.

But don't worry, the system will let you easily 'upload' new JPEG images directly from your computer. It's a good idea to have any JPEG images you want to upload roughly prepared - i.e. cropped just to show the part of the image you want. (If you're not confident in doing this, then just upload your JPEG image as it is).

Click on 'Browse' to navigate your computer to where you have your image stored. Click OK. Then click 'Upload', and the image will be automatically uploaded. scaled, optimised and added to your site's Image Bank. Its' that easy!

Note: if the image that you uploaded was large, two versions will be added to your site's Image Bank - a standard sized one for inserting into text, and a full width version which by default will be 'aligned centre' which means it will insert between paragraphs.

Once uploaded, the new image will appear in the Image Bank list. Select it by clicking on its name, and the pop-up will close revealing the image inserted into the text in the Image Properties preview.

The next step is to select the align box and click on align left or align right. Align left will put the image on the left side with the text wrapping around its right. Align right will put the image on the right side with the text wrapping around its left.

You can also choose to give the image a black border. Type in a number in the 'Border' field. '1' will give you a 1 pixel (thin) border.

You can also create some additional space around the image so it will not collide with the surrounding text. Just type in the number of pixels in the fields 'HSpace' (horizontal space) and 'VSpace' (vertical space).

Finally use the 'Alternative Text' field to provide a short description, or 'alt' tag which will appear when the site visitor hovers their cursor over it (depending on the Browser they are using).

Once you are happy with the changes, click on 'OK' button to record your changes. The pop-up will close, showing the image you have chosen 'embedded' in the page text. Click the 'Submit changes' button to confirm your changes.

The page will reload showing the new image in place.

Changing image formatting

If you decide that the image alignment isn't the way you want, select the image in the text field by clicking on it once, then either click on the image icon on the toolbar, or Right+Click (Mac: Control+click) to open the image properties again, where you can change the alignment, border, spacing, etc.

To delete an image . . .

In editing mode, select the image by clicking on it. Now press the delete button on your keyboard ( <– ) and submit the changes on the page.

Click for Map