Tutorial

Images

Images must be jpeg, png or gif types and will usually have the extension .jpg, .png or .gif. You may upload full sized images from your digital camera so that other members of your organisation may download and print them. This is preferable to resizing before uploading. There is an upload file size limit of 1500Mb built-in to our system, but each file uploaded will be copied and resized by default down to less than 50Kb or 300 pixels width for use in the web page. This resizing is automatic and is essential for keeping page load times for your visitors as low as possible, especially when using mobile devices.

You can enlarge or reduce the image on your page and the system will automatically resize the copy to avoid pixellation. Be aware that if you upload the same image to another page and reduce its size, it may cause pixellation on the original page. To counter this, either resize the largest image last or rename the file before uploading.

To upload an image, start by clicking on the or button in the the Control Panel. You will be able to browse to your chosen image file. Left click at the position on your page where your image is to go. Click on Image button in the Control Panel to insert your image into the page. A dialogue box will open, asking for the alt (alternative) and title text. This is what you see when you hover over an image. You should enter a meaningful description of the image because the alt text is used by screen readers for the partially sighted. It may also help Search Engines to find you.

The page must be saved before you can add any more images. At the same time, the image file will be uploaded to our server. Ensure you resize the image, if necessary, prior to saving the page.

If the image did not appear quite where you expected it to, don't fret, just drag it to the correct position. You can use the justify Left Left Left buttons to make the image float left or centred or float right.

Tip: Photographs are best suited to the jpeg format. Logos are best suited to the png or gif format.

Image settings


When you click on an image, you will see a bar similar to the one above, appear in the Control Panel. Here you can resize your image by entering the Width or Height in pixels. By default, Maintain Aspect Ratio will be enabled. When you enter the width of the image, the height will be calculated automatically and vice versa. You can turn this off and change the height and width freely thereby stretching the image. If the image becomes too distorted you can reset the aspect ratio by ticking the Reset Aspect Ratio checkbox and then saving the page. You can also change the title and alt text of the image by altering the text in the Title box or Alt box as appropriate. Click once you have made any changes on the form to see those changes reflected on the page. Don't forget to save the page.

Rotate image

Rotate image buttonIf you upload a photograph to a page and it is upside-down or on its side, click on the image and click the Rotate button. The image will rotate 90 degrees clockwise. Keep clicking until it is correctly orientated.

Image caption

Caption image buttonTo caption an image, click the Image caption button and the Title text will appear below the image as a caption. Normal formatting functions can be applied to the caption e.g. centre it. You may add to or change the caption text but it will be lost if you delete the caption. Click on the image and then click the Caption icon again to remove the caption text. Don't forget to save the page.

Delete image

Delete image buttonTo delete an image, click the Delete image button and then save the page.


Image buttonTry this

Point your mouse at this image icon (mountain next to sub heading). Hold down the left mouse button and drag the icon to the beginning of this paragraph. Notice that the Control Panel displays form inputs as shown above. Change the Width or Height to 50 and click on . The paragraph text moves out of the way, automatically, because the image is floated left Left. Click on the Float right Left button and the image will appear to the right of the paragraph - floated right. Click on the Centre paragraph Left button and the image will be placed in its own paragraph and centred. If you want to centre an image, it must be in its own paragraph.