Uploading and organizing media
Here you can create folders to organize the media and you can upload images and PDF’s. Once you are in the Media area, you can drag and drop to upload or you can create new items. We would strongly recommend keeping the Media area organized and structured using folders.
You can also click on each image to view them and add a description. We would recommend that all images have descriptions.
Image guidelines and editing
When rendering images, the website code handles a lot of the optimisation work; this ensures the right sized image is used for device width it’s being displayed on. It also keeps the image file size down to help with page speed. As a general rule, we’d recommend following the below practices when using images in the CMS:
- upload images that are a similar aspect ratio to the website element they are being used in. For example, if the area you are using the images is landscape, avoid using a very portrait image, otherwise, areas of the image may be cropped out.
- upload images that are bigger than the area they are being used in. For example don’t use a 200px wide image as a hero image. This will mean the image gets stretched and the quality will be low.
- Always add an image description in the CMS. This will be used as the image alt text.
- Where possible, avoid using text directly in images. As the images need to work across various devices, there is a risk that the text will be cropped off. It’s also not great for SEO. There should be the option in the CMS to add content that overlays the image as live text.
Image crops and mobile optimisation
Depending on the device size, a different aspect ratio will be used for some images. For example, an image that displays landscape on a desktop could display as a square image on mobiles. This avoids the need for having separate desktop/mobile images. The Media area allows you to have control over the crop and focal point of an image for different aspect ratios. This gives the editor control over which part of the image is visible for different devices.
You can click into the image, and then click on the various aspect ratios on the right hand side. You’ll then be able to drag the image around to change the visible area. You can also drag the dot in the middle of the image to change the focal point of the image.
- Horizontal panel listing: 16:9 - minimum 800px wide
- Hero (full width): 16:9 - minimum 2000px
- Homepage hero split: 2:1 - minimum 1000px
You’ll be able to make the changes, save, then preview the page to ensure that you’re happy with how the image looks on desktop/tablet/mobile.
ALT-Text and Accessibility
You can add image ALT-Text to help people with disabilities. ALT-text is used to describe the image for people with visual impairments that may use screenreaders. If don't set this then the imge filename is used instead, so if you have a descriptive filename then this is an easy way to make sure your images are accessible.
Using a Media item
Media items can be added directly when editing page content, or added to the media library and then ‘picked’ when editing page content, plus if you name the files descriptively then they'll show up in the CMS search so you'll be able to find them more easily in the future.
Linking to a file or PDF
Once you have uploaded a file (e.g. a PDF) you can then link to this Media item from a page on the site. You will need to do this by clicking on the ‘Insert/edit Link’ symbol in the rich text editor. Here you can then navigate to the PDF by selecting ‘Select media’ button in the ‘Link to media’ section at the bottom of this screenshot:
