The Image grid content type provides the opportunity to add groups of images to pages. See the example below.

The Image grid is design for use on landing pages and content pages. At desktop screen width it displays in rows of four on Landing - slideshow and Landing - left block, and in rows of three on Landing - sidebar and Content pages. Each image contains a picture, caption with the option to make the image a link. The first three images are not linked and the second 3 images (lion, I-HUB and the railings) are.

Image grid widget


Similar to other content types like Accordions, Slideshows and People Lists, an Image grid consists of a hidden folder where you add your image grid items and a widget on the page which displays those items.

Step one: create the correct folder structure and add your image grid items

1. Add a hidden sub-section called ImageGrid (case sensitive) directly beneath the section where you'd like the Image grid to appear (it's a hidden repository folder and so the 'Show in navigation' option needs to be unticked).

2. Add a second hidden sub-section below your new ImageGrid sub-section. You can name this sub-section as you wish. In my example I've called the sub-section: Sample images.

Site structure screen showing the ImageGrid folder structure

3. Navigate to your second sub-section (in my example Sample images), Click the blue Actions button and select Create content.

4. Add an Image grid item content type  for each separate image in your set. (Find out how to add a content type to a section),

5. Fill in the form as instructed below:

Field titleWhat should I do?Is it compulsory?

Give your items a name, e.g. 'A - My first image; B - My second image' etc. This is for you and your colleagues reference only. Your users never see it.

NB: The Up and Down ordering arrows do not work in the image grid items so you need to use letters or numbers to manage the order of your items.

For example, the first item should be named: A - My first item, the second item B - My second item, and the third: C - Third item; and so on. If you need more than 26 items in an accordion, name them A - ; AA - ; B - ; BB - ; and so on...

New Image*

Click Select media to choose a image from the Media Library or to upload a new image. An image of 3000 pixels (wide) by 2000 pixels (high) is required for this content type. Please view the guidance on adding and selecting images in the Media Library.

If you add an image you must add an 'Alt text' describing what is contained in the image. This is an accessibility requirement.

Internal Link YOU MUST ADD A LINK or this item won't display

If the link is internal (Internal means from one t4 section/page to another t4 section/page), click the Add section link and choose the section/page from the complete list of sections in t4.
External Link Or If the link is external (External means any page not in t4, either within the College or elsewhere) type or paste the entire URL including http:// or https:// e.g. No
Media Library Link Or add a document (pdf, Word, Powerpoint etc.,) from the Media Library No
Caption* This appears underneath the image Yes
Display items* This defaults to yes Yes

6. Click Save and approve.

Repeat steps 4-6 for each image grid item you want to add.

Step two: add the Image grid widget to the page where it will display

1. Add a Image grid widget content type to the page where you want the Image grid to appear. (Find out how to add a content type to a section).

2. Fill in the options as required (see table below).

Field titleWhat should I do?Is it compulsory?
Name* This is the behind-the-scenes name, only visible to editors of the section Yes
Block title* This title will be shown above the entire block, if switched on with the field below. Otherwise it will be an 'invisible' screenreader only heading and will ensure your page has and H2 Yes
Show block title? Ticking this box will make the heading show to all users, not just screenreaders. No
Find items* Click Add section link and navigate  to the sub-folder where your Image grid items live. In my example this is Sample images Yes
Display items* Defaults to Yes. Yes

3. Click Save and approve to save the widget.