Adding Images to the Departmental Website

Before uploading an image, you must have permission from the copyright holder.

If the image contains identifiable people, they must also have given their written consent for their image to be used in this way.

Uploading Content Images

To upload an image into the main page content ("Body" field):

  1. Click the "Insert image" icon on the editor toolbar.
  2. Find the image and open it - this will upload it to the web server and insert it into the content.
  3. Click the image that was inserted to select it.
  4. Click the "Change image alternative text" icon on the far left of the image toolbar.
  5. Enter a suitable description of the image. This will be read aloud by screen readers (used by people who are blind or visually impaired), so it is important for accessibility (which is a legal requirement). Tick "Decorative image" only if the image is purely decorative and should not be read aloud.
  6. Click the tick ("Save") icon.
  7. In the dropdown on the far right (which defaults to "Raw image"), select the appropriate size.

You can select "Original" to keep the original image size and get rid of the "Please select an image style" warning - but please be aware that large images may take longer to download, especially on slower mobile networks, so you should not use "Original" for very large photos.

Unfortunately, the selected image size is not currently reflected in the content editor, so you may also want to manually scale the preview to match by dragging the resize handle with your mouse. (We hope this will be made automatic in a future release of the software.)

If desired, you can also change the image alignment, add a caption, and add a link using the toolbar icons. If you want the link to open the full size version of the image in a lightbox (modal popup):

  • Right-click the image in the editor
  • Click "Copy Image Link" (or similar, depending on your browser)
  • Click the "Link image" icon on the toolbar
  • Paste the image link into the "Link URL" field (Ctrl+V, or right-click > Paste)
  • Click the tick ("Save") icon

Reusing Content Images

While it is possible to copy & paste images between pages, you are advised to re-upload each image to each page instead. This is because uploaded image permissions are inherited from the page they uploaded to - so if the original page is replaced or deleted in the future, the copy-pasted image will stop working on every page.

Adding Banner Images

You can also display one or more banner images at the top of the page, above the breadcrumbs. If you upload more than one image, they will be displayed as a slideshow.

  1. In the "Images" section above the content editor, click "Add media".
  2. Under "Add media", click "Browse".
  3. Find the required image and open it.
  4. Under "Alternative text", enter a suitable description of the image. This will be read aloud by screen readers (used by people who are blind or visually impaired), so it is important for accessibility (which is a legal requirement).
  5. Optionally, drag the crosshairs on the image to choose which part of the image should be cropped to fit in the banner. (The default is the very centre. Unfortunately the "Preview" button doesn't always work properly, and you may lose your changes, so we advise against using it for now.)
  6. Click "Save and Insert".

You can edit an existing image by clicking the pencil icon button, remove it by clicking the "Remove" button, and re-order images by dragging and dropping them.

Reusing Existing Banner Images

To select a banner image from an image library:

  1. In the "Images" section above the content editor, click "Add media"
  2. Next to "Image library", click the dropdown and then select an image library
  3. Click "Apply filters"
  4. Tick the image you wish to use (don't click the image itself - that will open a preview of it)
  5. Click "Insert Selected"

To reuse a banner image from another page:

  1. Make a note of the filename of the image (e.g. "SCC00WCQ3I.jpg")
  2. In the "Images" section above the content editor, click "Add media"
  3. In the "Filename" box, enter the filename
  4. Click "Apply filters"
  5. Tick the image you wish to use (don't click the image itself - that will open a preview of it)
  6. Click "Insert Selected"

Sources of Images

As noted above, you must have permission from the copyright holder to use an image - you can't just find something you like online. (Some commercial stock image suppliers search for infringing uses of their photos and send demands for payment of thousands of pounds!)

You may want to look in Oxford University Images (OUImages) for university-related images. You will need to register, and you generally need to include an image credit on the page.

You may also find the following rights-free stock image sites useful:

It is often a good idea to credit and link to the image source even if you are not required to do so - this makes it easier to refute any claim of copyright infringement. Alternatively, keep your own records of the image sources used.

More public domain (free to use) and Creative Commons-licensed (free with some restrictions) sources are listed on the Open Access Oxford website.

Last updated on 19 Aug 2024, 9:35am. Please contact us with feedback and comments about this page.