Uploading documents to the Media Library

Uploading images to the Media Library

This is the most fool proof method for uploading images. The best time to do this is before creating any components so that the images are ready to add in. Make sure you use images in the correct dimensions, details for this are below.

Accessing the Media Library

To get to the Media Library, open the main start page for Sitecore. Then click on the icon with an image named 'Media Library'. This can be done at any point in time, even if you have Content Editor or Experience Editor open in a different tab or window.

Screenshot of the Media Library icon on the start page.

Navigating the Media Library

The Media Library has a similar set up to Content Editor - there is a left-hand menu with expandable folders which reflects the structure of the website.

We store all our images and documents in the 'UWE' folder and then either 'Images' or 'Documents' depending on the file type.

These folders are organised in the same way as the components folders, so there are subfolders with the main website sections such as 'Life' and 'Study'. This is where you will need to upload your image, so navigate to the relevant subfolder and select it.

For example, an image for the Sustainability landing page will sit within the 'About' folder because the URL is uwe.ac.uk/about/values-vision-strategy/sustainability/.

A screen shot of the Media Library menu,

Using the upload button

Once you have clicked on and selected the correct subfolder, you will see the images within that folder on the right-hand side. You will also see a button to 'Upload file', click this in order to upload your image.

Then use 'Choose file' to browse your computer and select the correct image. This will upload the image to the Media Library in the folder you have selected.

Cropped screenshot showing the Media Library upload button.

Naming and saving images

The image file name should reflect the page/component the image will appear on, plus the image size.

Rename your image when you are downloading it so it is stored correctly on your computer before uploading to Sitecore.

Naming needs to be logical so that images can be found using the search function. Page thumbnails should be named after the page navigation title.

Use lower case and hyphens to separate words, eg: accredited-learning-410x230.

Take a look at existing examples of images in similar components if you're unsure.

Please note that image files need to be in JPEG format, except cut out images which can be PNG files.

Adding Alt text

It is essential to add in Alt text for all images uploaded to the Media Library, this is for accessibility and SEO reasons. You will be unable to publish your image until it has Alt text.

How to write and add in Alt text

To add the text in, make sure your image is unlocked. Then scroll until you find the relevant field which is marked 'Alt'.

Use a short sentence that describes the image to someone using a screen reader. Eg. 'A close up shot of a cappuccino'

Remember to save your changes when adding in Alt text.

Adding alt text screenshot.

Image dimensions

Below are the dimensions for images on the website for each component. Px means pixels. Images must be resized and cropped in Asset Bank prior to upload, or if the image is not available on Asset Bank then using Photoshop/image editing software.

Component name

Image orientation/aspect ratio

Dimensions

Notes

Cards (normal page cards)

Landscape

410px by 230px

 

Colour Cards

Portrait

260px by 360px

Cut outs

Content Carousel

Landscape

846px by 471px

Teal gradient effect added by CSS

Feature Link

Landscape

740px by 300px

 

Featured Image

Landscape and portrait

Landscape: 850px by 480px

Portrait: maximum width of 850px

Landscape works best

Gallery

Landscape and portrait

Landscape@ 850px by 480px

Portrait: maximum height of 480px

 

Image copy section

Square

602px by 602px

Must be square

Large quote

Portrait

410px by 550px

 

Multi size hover colour cards

Square

Large tiles: 560px by 560px

Small tiles: 275px by 275px

 Must be square

 

 

 

Overlapping hover cards

Square

700px by 700px

 Must be square

 

 

 

Partner logo strip

Landscape, portrait or square

Varied - max width of 150px (there's no restriction on height)

Works best when partner logos are small

People list

Square

50px by 50px

 

Single media component

Landscape

Desktop: 840px by 470px

Mobile: 600px by 335px

Works with two images applied

Single media section

Landscape

850px by 500px

 

Small image copy section

Square

305px by 305px

Must be square

Tabbed content image section

Portrait

210px by 212px

Opacity added by CSS