How to embed an image into a page

Download as PDFDownload as PDF

When writing an article, event or similar content type, there is a What You See Is What Get (WYSIWIG) editor to help you. One of the options is to upload images.

On the tool bar, there is an image of a picture frame with a house in it which will allow you to upload an image to show on your page, or to browse existing images if you need to re-use one.

Click on the icon and a box will pop-up. On this box, you will need to use the 'Browse Server' option to open up a pop-up box which will give you further options. 

This box shows you the library of images which you can use. If you need to upload a new image, there is an option to do so on the right hand side of the page.  If you upload a new image, you should give it a meaningful name that does not contain any spaces so that you can find it at a later date or so that some one else can re-use it if appropriate.

Any images uploaded must be less than 600 by 800 pixels. Any thing larger will be automatically resized downwards. You will be shown a copy of the image when it has been uploaded to the server. If the image is larger than 300 by 300 pixels, then it is an idea to use the resize option to make a smaller version to embed into your article so that the text flows around the image. 

When you are happy with the image, use the ‘Insert file’ option. This will insert the image into the original pop up page where you can now set its properties.

The alternative text should be a description of the image that is suitable for screen readers to help in accessibility. The height and width will be set from the image sizes that you have selected.

Select the link tab to embed the image link (or the link to the full sized image, if you have embedded a smaller version) using the ‘Browse Server’ option.

On the advanced tab, the style sheet class needs to have ‘caption’ (without the quotes) put into it. This will allow the image to pop up and show the larger image when clicked by the user.  

Once these have been set, click the OK button to save the image into your document.