How to Upload and Insert an Image

This FAQ item explains how to insert an image in a content item that you upload to the site. Though there are similarities, it is different to adding a link to another internet site, and to uploading and linking a file into your content item - these are or will be both covered in separate FAQ items.

This process of inserting an image that you upload to the site would generally take place in the middle of authoring a content item - this basic authoring process is covered in a separate FAQ item - please make sure you are comfortable with this first.

1. To insert an image that you have uploaded or want to upload to the site while authoring a content item, start by placing the cursor where you want the image to be inserted - see left for example.

2. Then click on the Insert/Edit Image icon found in the rows of the editing icons - holding your mouse over any icon will reveal its purpose. This will open a separate pop-up window (see right) that allows you to either select an existing image on the site or to upload a new image (or images) that you can then link.

3. Note the folder structure displayed on the bottom left of this new window. The Root is specific to your user and the current calendar year. You can create subfolders if you wish for your own organisational purposes, using the New Folder icon near the highlighted Upload icon - but there is no need to do so.

4. If you wish to link to an existing uploaded image, simply click on the appropriate image file name that appears in bottom central part of the dialog box. This will populate the properties fields at the top of the dialog box, most of which can be changed if desired. In most cases the default settings can be used without change, but if you wish you can

• Choose Alignment of either Left or Right - this will put the image at the selected side of the content item with the text flowing around it.
• Set a Margin - this generally looks better as it avoids text abutting the image too closely.
• Set a Border by checking the Border check-box, choosing a Width, a Style and a Color - this can set off the image attractively.
• It is better to leave the other properties at their default settings - note while you can change the dimensions of the displayed image here, it is far better to change the dimensions of the image as you upload it to the site - see step 8 below.
• After setting these you should now click on the Insert button on the bottom of the dialog box. This dialog box will close automatically.

5. If the image displays in a way different to the way desired, select the image and click again on the Insert/Edit Image icon - this will enable you to change any of the settings and then click on the Insert button again.

6. If you wish first to upload one or more new image files to the site from your computer, then click on the Upload icon located towards the right hand side of the dialog box (half way down) - highlighted in a red square in the image above. Clicking this will bring up a further smaller dialog box (see left).

7. This smaller dialog box allows you to select one or more image files on your computer by clicking on the Add File... button at the top left of the dialog box. Doing this opens a small browser window on your computer (similar to the image right) that allows you to select one or more files (more than one file can be selected using Ctrl-Click). When you close this browse window using its Open button the selected file names will appear in the Queue. You may also be warned at this point if any of the selected files are larger than the site limit or of a non-standard image file format.

8. Note there is an option near the top of the dialog box (see above left) to define the action should an uploaded file have the same name as an existing file in the destination folder. The default is to overwrite the existing file - but this can be changed to creating a different unique name. There are also a number of transformation options available in this dialog box - these include:

• Resize an image file - generally no site image should have a dimension of more than 400 px - and a good target size is more like 200 px.
• Rotate an image (Flip Horizontal) so that a person "looks into rather than out of" the web page for example.
• After changing these if desired, click on the Upload button at the bottom of this smaller dialog box (see above left) and each of the queued files will be uploaded in turn - with success indicated by a green tick next to the file name in the queue. When you have uploaded all the files you want click on the Cancel button at the bottom of this smaller dialog box to close it.

8. Now that these image files are uploaded, you can proceed with inserting an uploaded image to a content item as per step 4 and 5 above.

9. When your content item is complete it would be worthwhile previewing it and checking that the image appears as you intended. While the above process may at first seem complex, it is logical - and contact the webmaster if you need further assistance.