The gallery pattern demonstrates a method of displaying a large number of images on a page and makes use of the to view the images in an immersive experience.
Rules for the gallery
Gallery images must be in landscape orientation.
Full size gallery images must be 1280 × 960 pixels. This resolution must never be exceeded.
All images must have an aspect ratio of 4:3. This is the typical aspect ratio for photographs.
If an image's resolution is lower than 1280 × 960 pixels, then the image must have an aspect ratio of 4:3 at its highest native resolution.
Thumbnail images are not automatically generated from the full image and must be created separately.
Thumbnail images must be 360 × 240 pixels.
A gallery must only be used within the main body of a page.
A page may contain multiple galleries.
Use data-lightbox="[gallery name]" to group images together for each gallery.
The following additional scripts must be included on the page before the closing </body> tag:
This option does not use Lightbox. All images must link to another page. The pages linked can be directly to the video hosted on YouTube or Vimeo, or to another page where the video is already embedded.
Example
Title of gallery
12 June 2018
19 May 2018
25 March 2018
5 January 2018
Code
Title of gallery
12 June 2018
19 May 2018
25 March 2018
5 January 2018
Old gallery - deprecated
This option is no longer supported
This old method of gallery implementation, using the jQuery theatre plugin, is deprecated and will be removed in a future version of the digital pattern library.
