Adding Images to the Departmental Website

Sources of images

You must have permission from the copyright holder to use an image - you can't just find something you like online. Some commercial image suppliers search for infringing uses of their photos and demand payment of thousands of pounds - so if in doubt, seek advice before using an image.

The site's Media Library includes some collections of photos that can be used throughout the site.

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:

Some more sources are listed on the Communications Hub website.

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.

Data protection (GDPR)

If the image contains identifiable people, they may need to give their written consent for the image to be used.

Also be careful when reusing such images, because the consent may be limited to specific uses.

Content images

Uploading content images

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

  1. Click the "Upload image from computer" 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 generally 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.

To reuse an image from the Media Library collections, right-click the thumbnail then click "Save link as..." (or similar) to download it, then upload it to the target page as described above.

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. The same image(s) are used in "Link to other node(s)" blocks.

Uploading banner images

  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 a Media Library collection:

  1. In the "Images" section above the content editor, click "Add media"
  2. Next to "Collection", click the dropdown and then select an image collection
  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 "Collection" dropdown, select "None"
  4. In the "Filename" box, enter the filename
  5. Click "Apply filters"
  6. Tick the image you wish to use (don't click the image itself - that will open a preview of it)
  7. Click "Insert Selected"
Last updated on 13 Feb 2026, 1:28pm. Please contact us with feedback and comments about this page.