Guidelines for using images on the CPFT website
Guidelines for using Images
on the CPFT website
Cherril Norrie
June 2013
Introduction 2
Some general principles 2
Layout of images on the CPFT Website 3
Front-end View 3
View from the Sitekit Content Management System 3
Inserting an image onto a page 4
Check for an existing image 4
Acquiring an image from a royalty-free source 5
Finding a picture from Shutterstock 5
Downloading for yourself 7
Using a lightbox 8
Adding images to a lightbox 8
Sharing a lightbox 8
Requesting images for download from Shutterstock 9
Finding a picture in the NHS Photo Library 10
Saving images from a photo library to your own computer 11
Naming an image file 12
Source 12
Editor 13
Search terms 13
Format 14
Restriction on use 14
Uploading an image into Sitekit 15
Inserting a logo onto a directory page 17
Cropping an image 21
Guide to file structure for images 23
Introduction
This document is for use by editors of the CPFT website and assumes that the user has access to the Sitekit content management system. If you need access to the Sitekit content management system or to the photo libraries mentioned, or have any other general queries about the web-site then please contact either: or .
If you have queries in relation to these guidelines or specifically about images then contact .
Some general principles
The general principles of using images on the website are as follows:
§ The website aims to use images that are realistic but generally positive.
§ The images we use should reflect that mental health is an issue for people of all ages, colours and creeds.
§ We want to use as great a variety of images as possible to keep the website fresh and attractive.
§ In selecting and using images we need to be mindful of copyright law. All images are copyright. In the absence of any other arrangement copyright for images and artwork lie with the photographer or artist.
Layout of images on the CPFT Website
Front-end View
Website pages are structured to allow the placing of suitable images in a standard layout that varies from section to section. For example, completed website pages for services have two main images that editors need to complete. Below the organisation or service name is a picture space that is normally used for the logo of the service or organisation and to the right of the page is a space for a suitable illustrative image or photograph. The finished page layout for a service looks like this:
View from the Sitekit Content Management System
As an editor the initial screen will look like this with two stock images acting as place holders for new images to be inserted.
A single left click on the place-holder image will take you to the picture editing screen and the image files where you are able to search, import, caption, describe and crop images. The screen will display the image currently in use and its location in the directory structure.
Inserting an image onto a page
Check for an existing image
o Enter a keyword in the search box at the bottom of the screen. The first 3 or 4 letters will generally be enough to find variants on the same idea (eg swim/swimming). Try one or two ideas before giving up.
o Press return to search.
o Select an image by clicking on it. It will appear in the preview box.
o Click OK and the image will be inserted on the page.
o Check its appearance on the page.
o If the image you have selected is indicated as for editorial use only make sure that you tick in the “enable caption” box before taking the image onto the page.
Acquiring an image from a royalty-free source
If CPFT does not already own a suitable image an alternative can be found in either our paid subscription service, Shutterstock, or the NHS photo library.
Finding a picture from Shutterstock
The Shutterstock website is at http://www.shutterstock.com/
UserName: cambsmh
Password: (please request – see intro for emails)
Shutterstock has a large selection of images and uses free word searching as well as offerings ways of refining searches by broad categories. For example a search for alcoholism calls up this screen:
Searches can be refined in various ways by using the options at the left of the screen, although generally 2 or 3 key words will be sufficient to find an image. Note the tabs which allow you to look at the results of the search either by recency of inclusion on the site, popularity or closest relevance to your search terms.Tips for using Shutterstock
o Shutterstock is a predominantly American service. Many of the images look “American” and many are categorised using American English. For example if you want to find an image of an older person it can be helpful to use the term “senior”.
o You can specify “England” or “UK” in your search terms but this will reduce the number of images you find very substantially. Remember that for places you MUST specify country. Cambridge, Mass is a very different place!
o It can be hard to find images of people looking natural without expressions of extreme emotion, especially joy. No doubt this reflects the needs of the advertising industry. Use search terms such as “thinking” “thoughtful” or even “sad” to find more natural/neutral facial expressions. The people are also unrepresentatively perfect and beautiful, and young. Adding the term “older” can help you find adults above the age of 30. “Ugly” is also quite helpful in finding people who look like real human beings rather than models!
o Vector images are artwork that will need to be downloaded to software such as Adobe Photoshop in order to set the image size.
Once you have selected an image, a single left click will take you a page where you can select the desired size and download:
o Underneath the image you have selected you are offered a selection of other images using the same model or that are similar to the one you have chosen.
NB Before downloading yourself or requesting a download on your behalf make a note of the Shutterstock reference number and search the CPFT images to check that it has not been downloaded already.
Downloading for yourself
o Normally, select “small” as the image size (these images take less storage space and will upload and download faster either for editing or when end users go to the website).
o Note whether the picture is for editorial use only. Most pictures in Shutterstock are available for any use but some are restricted for only non-commercial/editorial uses. Although our current use is fine the image needs to retain its copyright information and editorial constraint so that it may not be mis-used in the future.
o Click on download.
o You will be giving a code to enter.
o Choose the option for Saving to your computer.
o If the image is for Editorial use only you will need to confirm the use agreement and make sure to note the caption credit that is required once the image downloads to your computer.
o In your own software you can rename the image in accordance with the guidelines below and then upload it to the CPFT site.
o If the image is for Editorial use only the copyright credit should be entered in the Caption box when you Upload the image to Sitekit.
Using a lightbox
A Lightbox is used to store a group of images that you would like to eventually download or share with a colleague. You can place images into a Lightbox, and then later download the images, or send the Lightbox link to a friend/colleague for them to review. You are not obligated to download images in your lightbox, and it's entirely up to you how many lightboxes you have, or if you use the images later.
Adding images to a lightbox
There are two ways. When you conduct an image search, the results are displayed as miniatures called thumbs. If you scroll over a thumb, you can add that image to your lightbox by clicking on the light bulb icon directly beneath the thumb. This will generate a dropdown box, prompting you to “add to lightbox.” If this is your first lightbox, you will choose “new,” and will be able to save the lightbox with whatever title you prefer. Thereafter, you may continue to add other images to that particular lightbox, or continue creating other lightboxes, depending on your needs.
The other way is to click on the image itself, which will bring up the image on your screen to full-size. You will see to the lower left of the image the same lightbulb icon and the words “add to lightbox.” Click on this and the same dropdown box will come up and simply repeat the process stated above.
Sharing a lightbox
Once you have created a lightbox, you have the option to email it to a third party. Just enter the email address and click 'send.' You can also share lightboxes with other Shutterstock users by clicking on the “share” button and entering the username of another Shutterstock subscriber.
Requesting images for download from Shutterstock
o Make a note of the reference numbers of the images you want or use a lightbox to store your selection.
o Send an e-mail to Rod Rivers/Cherril Norrie with a list of the images you need, the name of the lightbox you have used or a link to it and an indication of the sub-directory in the images file where you want the images uploaded.
Finding a picture in the NHS Photo Library
http://www.photolibrary.nhs.uk/
You will need to register on first use in order to get a password.
The NHS photo library has the advantage of using images of real people in UK settings but the selection is not huge and the search mechanism is not especially sensitive. The images are of poorer quality than Shutterstock images. Searching for nurse team produces the following results:
o
o
o
o
o
o Note that you have a lightbox facility as with Shutterstock.
o At the top right is the command to add an image to your basket.
o Choose a download size of “web large”.
NB I have had a few problems with the NHS site not wanting to download an image with sufficient pixels for the size of image we need for the site. The poor quality of the image will not be apparent until after you have uploaded it to Sitekit and placed it into the page. Beware! I am asking them to clarify the problem I encountered so watch this space.
Saving images from a photo library to your own computer
Once you have identified the image you need, save it onto you local hard disk. You will later upload the image into the Sitekit image folder or sub-folder.
You may want to set up a file structure on your local disk, which may be something like this:
CPFT Work
Images
From Libraries
Shutterstock
General
Editorial only
NHS Choices
Other
Uploaded to Sitekit
As you find images you save them to the appropriate library folder. Then, if you are doing this job in batches, after uploading to Sitekit, you could move the images into the ‘Uploaded to Sitekit’ and this may make it easier to keep track. Once in the ‘Uploaded to Sitekit’ folder you will probably never need to use these images again as they will be more easily dealt with within Sitekit. You cannot use these images elsewhere, because the usage rights apply only to the CPFT use, however, you can (and should) keep these images on your own computer as a back-up, just in case something goes wrong and you have to re-load them.
Naming an image file
File names are the key search tool for finding images in the system and so it is important to follow a standard method of naming image files so that pictures can be re-captured through a variety of different searches.
The standard file name formula is as follows:
Source_editor_search_format_use
All elements are to be separated by underscores.
Source
By indicating the source of the image it will be possible, for instance, to search for all the Shutterstock images on the site or to find images taken from any other third party organisation. All images will always have a source element in their file name. The sources available are as follows :
o CPFT. This is for all images owned or generated by the CPFT or its staff and should include the surname of the photographer if known.
for example: CPFT_Rivers_etc
o NHS stock. These images will have a reference number which should be included here.
for example: NHS_ refno_etc
o Shutterstock . Shutterstock images have a reference number which should be included here.
for example: Shutterstock _134079695_etc
o Third party source
for example: Alzheimers_Society_etc
Editor
By indicating the editor responsible for uploading an image into the system it is possible to find all the images that an editor has previously found and used. It is also an easy way for an editor to find all of the images they are currently working with without doing a number of separate searches.
It is up to you to decide how you want to identify the images you are responsible for uploading to the system, you can use initials/first name/surname as long as you remain consistent and the form is not already being used by somebody else.
Search terms
As the key searchable element of the file, it is useful if images have some search terms attached so that they can be found readily. It is impossible to second guess all of the possible images but key ideas worth adding to the file name might be as follows:
o Logo
o Significant age groups – baby/older