Images Panel
Add a group of 2-4 images with optional captions on a purple background
How to use
- Optionally add Quick-Nav Text to be picked up the Quick Navigation Bar/Progress Navigation Bar
- Add 2-4 Images. For each Image:
- Select a suitable image from the Media Library for the Panel - Image. Recommend images are at least:
- 1500px x 1280px for Panel 1 Image
- 840px x 875px for Panel 2 Image
- 1060px x 785px for Panel 3 Image
- 1060px x 1360px for Panel 4 Image
- Images can be any size or aspect ratio, and will be cropped and resized to the sizes above automatically by a service called PXL. Find out how PXL crop and resize works.
- Optionally add a Panel Caption which displays below the Panel Image
- Select a suitable image from the Media Library for the Panel - Image. Recommend images are at least:
Content Type Details
ID: 446
Name: Images Panel
Description: A group of 4 panels (2 of them optional) with images and captions
Minimum user level: Contributor
Content Type Elements Details
Name | Description | Size | Type | Required |
---|---|---|---|---|
Name | The Name Element | 80 Characters | Plain Text | Yes |
Quick-Nav Text | This text will be used for the Quick Navigation Bar/Progress Navigation | 20 Characters | Plain Text | No |
Panel 1 Image | Select an image from the Media Library | N/A | Media | Yes |
Panel 1 Caption | Add a caption for the corresponding image | 50 Characters | Plain Text | No |
Panel 2 Image | Select an image from the Media Library | N/A | Media | Yes |
Panel 2 Caption | Add a caption for the corresponding image | 50 Characters | Plain Text | No |
Panel 3 Image | Select an image from the Media Library | N/A | Media | No |
Panel 3 Caption | Add a caption for the corresponding image | 50 Characters | Plain Text | No |
Panel 4 Image | Select an image from the Media Library | N/A | Media | No |
Panel 4 Caption | Add a caption for the corresponding image | 50 Characters | Plain Text | No |
Examples
2 Images With Captions
/0x0:1500x1280/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/media-grid-ph-1.09224b2d.jpg)
/1x0:840x874/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/media-grid-ph-3.f93df0f9.jpg)
3 Images Without Captions
/0x0:1500x1280/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/media-grid-ph-1.09224b2d.jpg)
/225x0:835x782/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/media-grid-ph-2.7f2c8a11.jpg)
/1x0:840x874/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/media-grid-ph-3.f93df0f9.jpg)
4 Images Mixed Use of Captions
/0x0:1500x1280/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/media-grid-ph-1.09224b2d.jpg)
/225x0:835x782/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/media-grid-ph-2.7f2c8a11.jpg)
/1x0:840x874/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/media-grid-ph-3.f93df0f9.jpg)
/0x0:1060x1360/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/media-grid-ph-4.7ec66d98.jpg)