Uploading documents and images to the Media Library

It is a legal requirement that all documents used on website and in other communications are accessible. You must make sure your document is created in an accessible format before it is uploaded to the website.

• Meeting accessibility requirements
• Web accessibility
• How to create accessible documents
• Accessible communications templates
• Creating accessible content blog

1. Give your document a file name:
   • you don't need to add hyphens or underscores, they'll be added automatically
   • keep the file name clean and simple, don’t add dates or version numbers to the file name
   • keep a note of the name you’ve given it, it will come in useful when you want to link to it
2. Open the Media Library.
3. Navigate to the ‘Documents’ folder.
4. Select the relevant sub-folder, eg Directories, Law, Business.
5. Select ‘Upload files’.
6. The document will need to be published, contact your FWPA or WEDM who will do this for you.

Restricted documents

Restricted documents can't be added to Sitecore. Send these to wedm@essex.ac.uk and we'll upload them to our restricted website.

1. In the Media Library, find and select the document you wish to replace.
2. In the ‘Media’ tab, select ‘Detach’ to remove the old document.
3. Select ‘Attach’ and upload your replacement document
4. The new document has to be published – contact your FWPA or WEDM to publish this for you.

Header images

Header images are used for most main University web pages, including department pages, news and events. Header images need to be cropped to 1000 pixels x 1000 pixels.

When creating a new page, such as an event, you'll add the header image via Content Editor. Your image will automatically be placed into the Header Images folder in the Media Library. You can also add the header image directly into the Media Library before you start working in Content Editor, you just need to make sure it goes into the Header Images folder. 

Module images

Sitecore modules that include an image should be uploaded to the Media Library before you create the module. You'll need to check the dimension size required for the module you're using.

Adding images directly to the page

Except for blogs (where this is the only option), we ask that you do not add images directly to web pages from the Rich Text Editor. Please use the Image Gallery module instead (or the Hero Image in news and event items).

The reason for this is that the website is mobile-responsive and so adding images directly to the page needs to be done in a particular way. Also, directly-added images do not work well visually. The image will be forced full-width in the paragraph, which is why using the module is better as it is designed to work with mobiles.

If you do need to add an image to the page for any reason, please contact wedm@essex.ac.uk.

Staff and Student Directory images

Images are rarely used on the Staff and Student Directories as these sites are focused on providing information and guidance. If you think you need to add an image, please contact wedm@essex.ac.uk.

Before you upload an image to the Media Library, it needs to be cropped and compressed, in Photoshop or similar software, according to the pixel dimensions specified by each Sitecore module. Header images, for example, need to be 1000 pixels wide by 1000 pixels high. See a full list of image dimension sizes (.pdf)

Lower file size = faster page load speed = better SEO!

Using JPG Optimizer

JPG Optimizer lets you resize and compress image files very quickly and easily without having to use Photoshop, Paint or anything else. All you need to do is:

1. Upload your image
2. Set the image quality to 60
3. Tick the resize image box
4. Set the maximum width and height you want the image to be (the image will be resized in the original proportions)
5. Hit the compress button
6. You’ll then be able to download the compressed image and see how much file size has been saved.

Using Photoshop

Using Photoshop to crop and save your image:

1. crop the image to a specific size
2. save it for web usage:
   • choose File > Save for web
   • set the image size to 75% quality
3. save using a naming convention which describes the image and gives the image dimensions, eg colchester-campus1000x1000

1. Make sure you have cropped the image to the correct dimensions needed by the type of page or module you are using it for.
2. Open the Media Library.
3. For news, events and header images on main University web pages - upload your image to the Header Image folder. Hero images go to the Hero Image folder.
4. All other images need to go into a sub folder. This can be either your department or team folder, or a subject area, such as Business.
5. Select the folder with your cursor. The folder should then be highlighted in blue.
6. Under 'Options' select 'Upload files' and add your image from your PC.
7. Images are added to folders alphabetically, you now need to find and select your image in the folder (it will be highlighted in grey).
8. Select Lock and Edit.
9. For Image Gallery and Image XN modules only: Under 'Information' in the 'Title - Use for Image Gallery and Image XN' field, enter the text caption that is to appear with the image.
10. Under 'Image' - you MUST complete the 'Alt' field as it is an accessibility requirement. This should a be a description of the image, eg 'Person sitting at a table writing on a laptop'. Your description will enable visually impaired users using screen readers to understand what the image is.
11. Save and publish.

1. Make sure your new image has the same dimensions as the existing one. 
2. In the Media Library, find and select the image you wish to replace.
3. In the ‘Media’ tab, select ‘Detach’ to remove the old image.
4. Select ‘Attach’ and upload your replacement image.
5. The new image has to be published – contact your FWPA or WEDM to publish this for you.