Image Gallery
Gallery One - 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>
Gallery Two
<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>
Image Gallery Documentation
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.