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 4 on Landing - slideshow and Landing - left block, and in rows of 3 on Landing - sidebar and Content pages. Each image contains a picture, caption with the option to make the image a link. The first 3 images are not linked and the second 3 images (lion, I-HUB and the railings) are.

Image grid widget

Give it a try

1. To add items to your Image grid, you'll need to 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).

Screen grab 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.

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

Image grid item form fields

Field titleWhat should I do?Is it compulsory?
Name* This is the behind-the-scenes name, only visible to editors of the section Yes
Image* Add you image using the image crop tool. Add a description of the image in the Alt text: field Yes
Internal Link Either click Select and navigate to the T4 page you want to link to. YOU MUST ADD A LINK or this item won't display No
External Link Or copy and paste an external URL into this field. External links must start with http:// or https:// 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

Once you have created all your image grid items...

4. 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).

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

6. Find items. Use the Select option to tell the widget where you've put its Image grid items. In my example above I put the items in the sub-section of ImageGrid called Sample images. See screen grab above.

Image grid widget form fields:

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* Point to the sub-folder where your Image grid items live. Yes
Display items* Defaults to Yes. Yes

7. Click Add & Approve to save the widget.