Image wrappers

Photographer directing three people in a photo shoot
The white border around this photo is called an image wrapper.

Image wrappers are the white border around each photo, including the space where the caption is. They make it easy to re-use an image and caption on your site.

When to use image wrappers

  • Most photos on your site should have an image wrapper, including photos at the top of each page, profile pictures, and smaller picutres throughout your page.
  • Never use image wrappers on photos in column boxes.

Guidlines for using image wrappers

  • Give your image wrapper filenames that refer to the page (future-students) instead of the photo (students-studying). This way you can go back and easily change the photo, without having to place the image wrapper again.

How-to

Photos that are not the full width of the page require you to add the image wrapper using HTML (example: Family Centre).

<figure class="imageright">
     <img src="image.jpg" alt="image alternative text">
     <figcaption>Caption text</figcaption>
</figure>