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.
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/.
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.
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.
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 |