Image gallery
Meaningful images enhance the user experience by communicating ideas that are difficult to express in words, making pages more inviting, and contributing to a cohesive visual language for the Macquarie brand. The image gallery component is used where a large number of images are relevant to a page.
1.02
12 May 2020
Thumbnail image collection
The image gallery layout displays thumbnails in two rows of three, with the number of images remaining in the collection shown as an overlay on the last image.
Image sizes must be at least 225 x 225 pixels, and should not exceed 1500 x 1500 pixels.
File sizes shouldn't exceed 300kb per image.
Insert a quick sentence or paragraph describing what kinds of content and imagery the user can expect from clicking on the gallery.
Full screen view
Clicking an image in the gallery takes the user to full screen mode. Tis display mode features:
- controls to navigate forward and backward between images within the gallery
- image credit and description
- a counter showing the current image out of the total number in the collection
- thumbnails on the right hand side, accessed by an icon in the top right corner
Character count
- Description — 300 maximum
- Image credit text — 160 maximum
Use meaningful images
Images should enhance and help to illustrate the content of a page. For every image on your site, you should be able to answer the following two questions:
- Why does it need to be this particular image?
- Why did you place the image where you placed it, and not somewhere else?
Show real people
When using images with faces in your design, double check that the focus of attention in the image is appropriate. Try not to use stock images; instead use high quality photographs of people who actually work or study with Macquarie.
Curate the collection
Organise each image gallery around a common theme. This helps ensure users will find the imagery that is most relevant to them, as well as providing a cohesive user experience.
Resize your images correctly
Large images will extend the page's loading time, especially when loading the gallery component. This can cause page loading errors, or cause users to lose interest as they wait.
Ensure the image file sizes aren't too large
All individual image files should ideally be no larger than 300kb. This is to ensure the image gallery doesn't add too much time to the load speed of the page.
Image Gallery
Gallery — Default
<div class="my-gallery my-gallery-2134143 grid grid--c20 grid--r20 gallery margin-btm--48" data-variable="2134143" data-layout="image-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<div class="grid__col--12 flex flex--center loader--wrap">
<div class="loader loader--spinner" role="status">
<span class="visually-hidden">Loading...</span>
<div class="loader__container" aria-hidden="true">
<div class="loader__layer">
<div class="loader__border"></div>
<div class="loader__clipper loader__clipper--left">
<div class="loader__circle"></div>
</div>
<div class="loader__patch">
<div class="loader__circle"></div>
</div>
<div class="loader__clipper loader__clipper--right">
<div class="loader__circle"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Gallery — Hero
<div class="my-gallery my-gallery-1231244 grid grid--c20 grid--r20 gallery margin-btm--48" data-variable="1231244" data-layout="image-gallery-hero" itemscope itemtype="http://schema.org/ImageGallery">
<div class="grid__col--12 flex flex--center loader--wrap">
<div class="loader loader--spinner" role="status">
<span class="visually-hidden">Loading...</span>
<div class="loader__container" aria-hidden="true">
<div class="loader__layer">
<div class="loader__border"></div>
<div class="loader__clipper loader__clipper--left">
<div class="loader__circle"></div>
</div>
<div class="loader__patch">
<div class="loader__circle"></div>
</div>
<div class="loader__clipper loader__clipper--right">
<div class="loader__circle"></div>
</div>
</div>
</div>
</div>
</div>
</div>