Home ▻ T4 Training▻Training▻Training Examples▻Expanding Image Panels

Expanding Image Panels

Stones

The intro text is what always appears.

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

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.

Read More +

Expanding Image Panels

This content type works best on widescreen pages. See the instructions below on how you can make your page widescreen. Make sure you include a 'Widescreen Navigation' content type  in the page to replace the sidenav that will not be visible.

Image Info

  • For best results, you should use dark (or low-key) images.
  • 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]
  • You select images  from your computer - you don't use the media library for this content type.
  • You need to fully comply with copyright law. Ensure that you have the right to use any images you upload or insert onto your webpage. Further information is available on our Images FAQ page - Where can I find Images to use on my website.
  • Tip: Make sure the filename does not contain any spaces, and the file name has at least 3 characters (before the dot) or it might not upload.
    Also, remove any characters that are reserved for web addresses ( ! * ' ( ) ; : @ & = + $ , / ? % # [ ] ) or you may not be able to browse to the file once it's uploaded. 

How do I make my page Widescreen?

Expanding Image Panels work best on Widescreen pages

To make a webpage widescreen

  1. Click on the Actions button for the section and choose Edit Section
  2. Click on the More tab and choose Metadata
  3. In the field 4: Page Customisation Keywords, insert 'fullWidth subSite' (do not include the apostrophes)

How to add Expanding Image Panels to your webpage

  1. Go to the site structure and find the section you want the 'Expanding Image Panels' to appear on
  2. Click on the Actions button, choose Edit section from the dropdown menu
  3. Click on +Add content
  4. Choose the 'Expanding Image Panels' (this is a container to ensure your images display correctly) Content type
  5. Return to the Site Structure, click on the Actions button of the section you added the container to
  6. Choose Create section
  7. Give the new sub section the Name 'gallery_background'
  8. In the gallery_background section, add up to 3 'Expanding Image Panel Item' content types.
  9. For each 'Expanding Image Panel Item' content type add a Name
  10. In the field Image Desktop the image should be sized 1600 x 1138px for when the page is viewed on a computer, click on the Drop file here or click to choose to choose the image from your computer
  11. Add a second image under Image Mobile, the image should be sized 640 x 400 which will be shown when the webpage is viewed on a mobile or tablet.
  12. Add Intro Text which will appear on the image.

← Back to Examples List