How to use images (T4 legacy templates only)

These guides are specific to content in T4's legacy templates. If your content uses T4's responsive templates, please see our user guides for web publishers in SharePoint.

Last updated: 11/12/2015

Main image

When using an image at the top of a page, recrop/resize the image to 600px x 250px. After inserting the image, right-click the image and select 'Edit Media Attributes' and in the 'class' field add:

  • img-main

Aligning images to the right

By default images are aligned to the left. To align the images to the right, insert the image to the left of the first word in the paragraph, then right-click the image and select 'Edit Media Attributes' and in the 'class' field add:

  • align-right - for standard-width images (283 pixels wide) and for images wider than 283 pixels
  • align-right-no-width - for images narrower than 283 pixels wide

Image captions

A placeholder image, used for illustrative purposes

Caption in here

To add a caption beneath an image, use <p class="caption">.

 

For an image in the main body of the web page, first insert the image then open the HTML view and add the following code around the lengthy-looking <span> code:

<div class="img-with-caption align-right">
  [IMAGE CODE STARTS WITH <span id="media-... ENDS WITH </span>]
  <p class="caption">Caption in here</p>
</div>

For an image in a right hand column, first insert the image then open the HTML view and add the following code around the lengthy-looking <span> code:

<div class="img-with-caption">
  [IMAGE CODE STARTS WITH <span id="media-... ENDS WITH </span>]
  <p class="caption">Caption in here</p>
</div>

Images within modules

When using an image within a module, recrop/resize the image to one of the following sizes:

  • 283px x 142px 
  • 283px x 94px

Circular images

The sports facilities at Bristol are extensive, and you can play pretty much any sport you can think of. There are loads of things to try.

Oliver, Second year, MSci Chemistry

When using a circular image within a module, recrop/resize the image to 142px x 142px.

Insert the image to the left of the first word in the paragraph, then right-click the image and select 'Edit Media Attributes' and in the 'class' field add:

  • img-circle img-circle-right