How to add listings

Guidance applies to:T4 Site Manager
Last updated: 13/11/2015
Summary: Different types of listings layouts.

Before you start

Please read How to create page layouts. Listings are used for groups of related items (eg news, research themes, case studies, people, etc).

Listings with or without images

By changing classes, listings can be used with or without thumbnail images (standard and large sizes).

Basic listing

Listing with thumbnails

Images should be 142px x 142px.

Copy the above code and paste it in the HTML view of the content you are editing. Click the Update button, bottom left of the HTML window. Now highlight the placeholder image and click the Insert Media icon to navigate to your image in the Media Library.

Listing with large thumbnails

Images should be 142px x 142px.

Copy the above code and paste it in the HTML view of the content you are editing. Click the Update button, bottom left of the HTML window. Now highlight the placeholder image and click the Insert Media icon to navigate to your image in the Media Library.

Multiple column listings

Listings can be arranged in multiple columns by adding a multi-column class. This will default to three columns in a grid_12 (or when not using the grid), and two columns in a grid_8. Note this doesn't work in IE9 or earlier but degrades sensibly.

Basic listing with multiple columns

Listing with multiple columns and thumbnails

Font size of link is smaller in multi column layout of lists with thumbs

Copy the above code and paste it in the HTML view of the content you are editing. Click the Update button, bottom left of the HTML window. Now highlight the placeholder image and click the Insert Media icon to navigate to your image in the Media Library.

Listing with multiple columns and large thumbs

Note font-size of link is larger, needs to be used with short titles (research groups, people)

Copy the above code and paste it in the HTML view of the content you are editing. Click the Update button, bottom left of the HTML window. Now highlight the placeholder image and click the Insert Media icon to navigate to your image in the Media Library.

Multiple column listings within a grid_8 column

Listing with multiple columns

Listing with multiple columns and thumbs

Copy the above code and paste it in the HTML view of the content you are editing. Click the Update button, bottom left of the HTML window. Now highlight the placeholder image and click the Insert Media icon to navigate to your image in the Media Library.

Listing with multiple columns and large thumbs

Copy the above code and paste it in the HTML view of the content you are editing. Click the Update button, bottom left of the HTML window. Now highlight the placeholder image and click the Insert Media icon to navigate to your image in the Media Library.