Adding images

Here are some written instructions on how to add images on to pages. This details two methods:

• Adding images inside content blocks or accordions
• Adding images through an image block

There are also some best practice tips on preparing images for upload.

You can expand the screenshots by clicking on them. Tips are given in italics.

These notes assume you are already logged into the CMS.

1. Image tips

During the build phase of a site, we may recommend some image sizes to you for certain parts of your site. These are guidelines to help achieve the best results possible.  However, as screen and device sizes differ considerably, you can't always guarantee exactly how the image will be displayed.  Therefore, it is best to use images which aren't too focused, as cropping may differ.

In general, we recommend that images uploaded aren't too large in file size. For example, a photograph directly from a camera could on average be 4MB or 5MB in size - some as high as 20MB. This will slow down pages where the image is used.

To avoid this, we recommend doing 2 things before uploading your image:

• Resize it to the maximum required dimensions - most images won't need to be greater than 1920px in width.
• Optimise the image. There are a number of ways to do this, but a free-to-use website like TinyPNG can massively cut down file sizes while maintaining quality.

You should usually end up with an image below 1MB (about 1000KB) in size and still perfect for use

2. Content blocks or accordions

• Upload your image to the File Manager in Dashboard > Files
• Identify where in your content the image should be - it will insert wherever your flashing cursor is
• In the editor, click the image icon

• In the image properties popup, to the right of the field titled 'URL' click the 'Browse Server' button

• A popup file manager should now appear - at this point, if you haven't done so already, you can upload your image (find out how to add file here)

• Find your image in the popup file manager and left-click to select it. This will return to the add image popup, and the URL field will now be complete.

• At this point, you can save your image and it will appear in the content block

You also have the following options with each image:

• Alternative text - this is descriptive text to aid website accessibility. We recommend adding one for every image, and you can find further information in Accessible Content Guide - Images.  If the image is going to be used in multiple places, you can add this to the file properties in the File Manager - using the 'Title' field.  The CMS will use the title field if there is no alternative text present.

• Width and height - this allows you to resize your image in its current position. Changing one option will automatically change the other, so you don't need to worry about the image stretching.

• Align left, right or center - this allows you to either center an image, or make text flow around it. To align an image next to a certain paragaph, it must be inserted on the same line as the paragraph (so that flashing cursor is immediately before the first letter). You can also drag an image into place afterwards.

• Caption - To add a caption tick the box which says 'Captioned image'. This will insert an area for text beneath your image when you exit the image popup.

Linking images

To link an image, simply select the image in the editor and press the link button.  Find out more about adding links here.

3. Image block

You can also add images using the standalone block.

• Upload your image to the File Manager in Dashboard > Files
• Drag an Image block onto the page.  See Adding blocks to a page for more guidance
• In the new popup, click Choose File beneath 'Image'

• Select your image from the file manager
• Add or save the block

Further down in the 'Image' block editor, you have options to link the image, add alternative text, or add link 'title' text for any link that you add.

At the bottom of the editor there is also a 'Resize Image' section, where you can make it smaller on the page by ticking 'Constrain image size' and entering either a 'Max Width' or a 'Max Height'.

Ensure that you press 'Add' or 'Save' at the bottom to save the changes.