Inserting Pictures

The Image Manager icon allows you to upload and edit images to include on your web page(s). The instructions below are in two sections – uploading photos, and inserting photos on a page.

Uploading Photos
First you will need to upload the image(s) into a website folder.

NOTE: If you wish to include photos of people then the appropriate permissions MUST have been obtained in accordance with GDPR. You will need to confirm to the Webmaster that you have the necessary permissions from all those in each photo. Please refer to the Privacy Matters page (in the Help menu) on the website for how to do this.

Click on the Image Manager icon. In the left-hand pane of the window that opens is a folder tree. Either select a folder (or subfolder) you think suitable to add your photo to, or create a new folder by right clicking an existing folder (see below) and selecting new folder, or click on the New Folder icon   in the toolbar. Give your folder a name and click OK.

NOTE:
1. The folder tree comes pre-populated with folders for each Event and (Study) Group within the system. Please do not delete any of these existing folders. You will see the default folder for a Study Group or Event at the very top of the folder tree. Please use this or create a new sub-folder beneath it.
2. If you do create a new folder please use a meaningful name for this that will relate directly to either the Menu Item or Page to which the contents will be linked. The default name is ‘New Folder’. Delete this and enter the name you decide on.

Now go to your folder by clicking on it and select ‘Upload’ from the toolbar. Click ‘Select’ in the window that opens, and you will be able to navigate the folders on your device to find the image(s) you wish to upload.

Note the file extensions that are allowed, and also that the maximum file size allowed is 9.77MB. The software does not allow ‘&’ and other ‘special’ characters to be included in filenames, so if you have a problem uploading a file please try renaming it.

Having selected your image(s), click ‘Upload’ in the bottom left of the pane and details of them – filename & size - will appear in the centre pane of the window. Click on a file and a Preview of the image will appear in the right-hand pane. (This pane also has a Properties tab, which is described in the ‘Inserting Photos on a Page’ section below).

NOTE: If you are replacing an existing image in a file with the same name then check the Overwrite Existing File box before clicking Upload. In this case you may not see the image of the new photo in the Preview window. If this is the case click Image Editor and it should be visible.

It is very important to edit the size of a photo within the Image Manager before adding it into the page because most photos will be far too large and look massive.

Click Image Editor in the toolbar above the image to see the Image Editor toolbar shown below:

Find the resize button in the centre of the toolbar and click it. The maximum width for a photo is 1000 pixels, which will span the page. For most photos they should be resized so that the pixel width and height are in the range of 200 to 500px. An easy way to do this is to select a percentage of the original image in the percentage box. This also has the benefit of retaining the photo’s original proportions. Alternatively, with the ‘constrain proportions’ icon   enabled (this is the default) simply reduce the height or width to be within the recommended range. The other parameter will automatically be adjusted to retain the original proportions.

The Image Editor also allows you to undertake a number of other functions to alter your photo, using the icons in the toolbar, each of which come with a descriptive text box if you hover your mouse over them. Each of these should be reasonably familiar if you have used similar photo editing functions in other software packages.

If you want to add a title or other text onto your photo:
• Click the T (Add Text) icon on the far right to open the Insert Text window
• Insert your text in place of ‘Your text here…’
• Choose your text colour. The default is black, but white works better for most images. 

To change the colour click the ‘down arrow’ on the right of the Colour box. This will open the colour chart – white is in the bottom left hand corner. Click this square and the text colour will change.
• Choose your text font and size. Verdana 12px is the default and should be fine for most images.
• Position the text. This is given in pixel coordinates, with the default being x=0, y=0. This is the top left-hand corner, where you should see your text. Adjust the x and y values to position the text where you want it. The Size information below your image should assist in this. Once you are happy with the text click Insert.

NOTE you will not be able to alter the text once it is inserted as it is incorporated into the image. If you want to change the text later you will have to start again using the ‘clean’ version of the image you uploaded. 

Please make sure that you delete any images that you no longer need.

By default the Image Editor will save any changes made into a new file with the suffix ‘_thumb’. If you want to overwrite the existing file delete the ‘_thumb’ suffix in the Save As field, but make sure you check the ‘Overwrite if file exists?’ box below this. Alternatively you can save any modifications as a new file by inputting a filename into the Save As box. 

Once you have made all the changes required click Save, or Cancel if you wish to exit without saving.

Inserting the Photos on the Page
Go back to the web page you are working on and ensure that your cursor location is where on that page you want the image to appear. Now click the Image Manager icon again. 

Select the filename of the image you want to insert and it will appear on the right hand side of the window. 

If you want to set the way the image appears on the page then you will need to edit some of the image properties via the Properties tab, as described below. You do not need to do this, but if you have text adjacent to your image you may want to use the facility to set some space between the image and the text.

NOTE: If you have text that you want to wrap around your image(s), this is possible but requires commands to be inserted into the HTML, and is not possible to achieve via the editor available to users. If you require this please contact either your Webmaster or your System Administrator who will be able to assist you.

[Note for Webmaster/System Administrator: wrapping text requires the inclusion of a ‘float: left;’ or ‘float: right’ command within the ‘style=”…”’ string in the HTML for the image concerned. This will justify the image to the left or right of the page respectively. There doesn’t appear to be a centre justification option. The <img …> command will need to be positioned in the HTML at the point required in the text.]

Properties tab
This displays and enables you to amend the properties of an image, as shown below:

  Shows the image dimensions

    Shows where the image is to be placed. Clicking on the drop-down menu shows the options: top, bottom, left, centre, right. The default, x , shown on the left, will place the image at the cursor position.

Enables you to select a colour and pixel width for an image border. The default is none.

  These allow you to add blank space around the image to separate it from adjacent text or other images. 10px will probably suffice in most cases. (In HTML this is known as ‘padding’).

Alternative text allows visually impaired users using screen readers to better understand an on-page image. This text will also be displayed in place of the image if the image file cannot be loaded.

Anything included here will be displayed when a user hovers their mouse over the image.

Text entered here will be displayed when an image is viewed on its attachment page. This facility does not appear to be available on the website, so leave this field blank.

Please ignore. Do not alter.

Once you are happy with the image, and any properties you have set, click the Insert button (bottom right) and the image will appear on the page. (Right-clicking the image will enable you to access the Properties described above and to amend them if required. You can also access the Properties tab through the Image Manager as above).
You can repeat the above if you wish to insert a number of related photos. You may however prefer to use the Insert Gallery Function (see below). 
NOTE: If you find that the changes you have made to images do not immediately show on the website then close the page, empty the cache on your device and then re-open the page. This should resolve the problem.