Insert and position images

A web page containing lots of text will be informative, but you will usually wish to use images or photographs in your pages in order to make the content more appealing to your visitors, as well as to demonstrate ideas and concepts.

This tutorial explains how to insert an image into a page and position it as required. Note: it is assumed that you have already uploaded the images to your Image Library, if not please refer to the Image Library section.

1. Edit the page

Locate the page that you wish to insert an image into in the Page Manager, and click the pencil icon next to it to open it in the Page Editor.

2. Indicate the location of the image

Choose where you would like to insert the image (this can be approximate, as you are able to move the image later) by clicking inside the editor at the correct place. The flashing cursor (insertion point) will be displayed - you can always use the cursor keys to move it to the exact location. In the example below, we are going to insert the image at the start of the second paragraph.

3. Open the Insert Image window

Simply click on the Image toolbar button in the page editor, as shown on the left.

4. Open the Image Browser

We will look at the options available in the Image Properties window later. For now, open the Image Browser by clicking on the "Browse Server" button.

5. Locate and insert the image

Locate the image you wish to insert by using the "Image Navigation" controls - you can browse the library using either the "show more images" links, or the page links at the bottom.

Once you have found the image, click on it. The background will start flashing (as shown to the right) to show it is selected.

You can then click the "Insert Image" button to use the image.

6. Set the image display settings

Now that the image has been selected, it is displayed in the "Preview" window, allowing you to see how it will appear when inserted into your page (the screenshot to the right shows an image preview after some settings have been changed). The available options are as follows:

  • URL. The web address of the image, which will have been automatically set by the Image Browser. You can change this URL to the address of any image, but you should make sure that you have permission to use the image on your website.
  • Alternative Text. Important. You should enter a concise but meaningful description of the image so that screen readers (used by people who are visually impaired) can be told what the image represents.
  • Width and Height. These boxes allow you to manually set the width and the height of the image. However, this is not recommended as manually resized images can appear pixellated or have jagged edges. It is much better to upload an image that is of the correct dimensions, or use the Image Library resize controls to achieve this.
  • Border. If you wish for a border to be displayed around the edges of the image, enter the thickness (in pixels) here. To remove the border, set this value to 0.
  • HSpace. The number of pixels of space to the left and right of the image, used to leave a gap between the image and any text around it.
  • VSpace. The same as HSpace, but for above and below the image.
  • Align. Choose whether you wish for the image to appear to the left or right of the text, or leave as "<not set>" to keep the image where it is.

Once you are happy with the settings, as shown in the preview, click the "OK" button to insert the image into the page.

7. Moving and changing the image

If you wish to move the image to a different position within the page content, simply click-and-drag the image. As you drag it, you will see the insertion point appear at different locations within the text - simply release the mouse when the cursor is at the correct point.

If you need to change the alignment, border, etc (as defined in step 6), right-click the image and choose "Image Properties" from the popup menu.

8. Save your changes

Click the "Save & Publish" page to save your changes to the website. You can also click the "Save Changes" button if you wish to make further changes before going live.

Keep up with our news Sign up now