Adding images to your content
Uploading your image
If the content you want to add your image to is in Typecase (Content Publisher), you should upload the image to Flickr.
Read our guidance about adding images to Flickr.
Request help uploading or accessing images on our Flickr account.
If you are adding images to content in a different platform, like OpenCMS or Wordpress, you may be able to upload the image directly to that content management system.
Locating your image in Flickr
You may need to change an image in Typecase. To do so you'll need to find the image used in Flickr.
You can search directly for images in Flickr with the search function. You can also find an image by using part of the image URL located in Typecase.
Any image already added to a content item in Typecase has a Flickr URL. For example:
https://live.staticflickr.com/7824/33707888938_fdfdc0c949_b_d.jpg
To locate this image in Flickr, copy and paste the number image number id, in this case, 33707888938, to the end of the following URL:
http://flickr.com/photo.gne?id=
The new URL created (http://flickr.com/photo.gne?id=33707888938) will take you to the image location page in Flickr. From there you can amend or replace the image as required.
Image accreditation
Some images require you to credit the creator when you use them. Always read the terms of an image's licence before you use it.
Include any required accreditation at the end of the image's caption. For example:
- Image from the Foreign and Commonwealth Office
- Image by Peter Parker (CC-BY-SA-2.0)
Alternative (alt) text
Alt text is additional information added to an image that makes it more accessible to users with assistive technologies like screen readers.
You must add an alt text description for all featured images. This description is used when:
- an image doesn't load, for example if a user has network problems or a slow connection
- a user is browsing the page with assistive technology, like a screen reader, and cannot see the image
Consider the Worldwide Web Consortium's advice about writing good alt text:
A good test to determine if a text equivalent is useful is to imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener?
Alt text should describe the image within the context of the page, not use words to express the details and nuances of an image.
How to write captions for images used on the website
It's important to know the difference between image captions and alt text descriptions.
Captions must quickly tell the viewer what the image itself cannot say, such as people, places, dates, and importance. Captions need to add information to an image. Captions should never describe the image.
Every image on the website needs a caption. A caption cannot be more than 255 characters.
A good caption example is:
During his visit to the University, HRH Prince Harry met Professor Keith Stokes and the team behind the rugby science work.
This example contains all of the key elements of a caption, explaining who is in the image, what they are doing, why they are doing it, and where they are.
Some dos and don'ts for best-practice caption writing:
Try to:
- use present tense to describe the image and any action
- keep your captions active (wherever possible)
- think in headlines – punchy and concise is good
- explain the unknown and/or unshown - what's happening in the image that the reader can't see or know
- provide answers your user might have about the image
Avoid:
- giving readers information they get from looking at an image
- beginning with an indefinite or definite article e.g. 'she' 'it' 'a', 'an' or 'the'
- writing 'above' or 'pictured'
- repeating information contained in the title or summary
Images that don’t need captions
- background images used in the page design
- banner images used at the top of a page
- logos
Video captions
Remember to add captions to video stills. Use the caption field in Typecase to describe what the video is and what it shows.