Expanding Image Panels

This content type works best on widescreen pages.

To make a page widescreen,:

  1.  Edit the section 
  2.  Click on the 'More' tab and choose 'Metadata'
  3.  In the DC.Keywords field, enter 'fullWidth subSite'

Make sure you include a 'Widescreen Navigation' content type  in the page to replace the sidenav that will not be visible.


  1. Add the 'Expanding Image Panels' (container) Content type to the section (page) you wish the images to appear in.
  2. Return to the Site Structure, click on the Actions button and Create a sub section called 'gallery_background'
  3. In gallery_background, add up to 3 'Expanding Image Panel Item' content types.

Image Info

  • For best results, you should use dark (or low-key) images.
  • You select images  from your computer - you don't use the media library for this content type.
  • You will need 2 images - Images Sizes: 1600 x 1138 (desktop) & 640 x 400 (mobile).  You should optimise the same image for the two sizes
  • Note: Upload file size limits apply so the images you use must be optimised for the web. [See how]


The intro text is what always appears.

The 'Full Text' field contains the extra text that appears when the user clicks on 'Read More'.

Example 2

This has an image of rocks in a lake.

But when you view it on mobile, the image is of coffee beans.  Obviously, if using this content type, you should use 2 different sized versions of the same image.