A gallery is simply a row of square thumbnails whose modal popups are linked together. More complicated galleries can use a grid layout to create a two-, three- or four-column layout and add c-gallery-item
components to each grid box.
If a collection of items on a page all have the js-modal--gallery
class, then they will automatically be scrollable when popped up in a modal window.
Simple gallery
<a class="c-gallery-item c-gallery-item--landscape js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1120/840/?image=992">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/374/280/?image=992" alt="">
</figure>
</a><a class="c-gallery-item c-gallery-item--landscape js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1920/640/?image=993" data-caption="<p>The University is in the middle of an unprecedented period of expansion and renewal.</p>">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/374/280/?image=993" alt="">
</figure>
</a><a class="c-gallery-item c-gallery-item--portrait js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/840/1120/?image=994" data-caption="<p>The University is in the middle of an unprecedented period of expansion and renewal.</p>">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/374/?image=994" alt="">
</figure>
</a><a class="c-gallery-item c-gallery-item--portrait js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/640/1920/?image=995">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/374/?image=995" alt="">
</figure>
</a><a class="c-gallery-item c-gallery-item--portrait js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1920/1920/?image=996" data-caption="<p>Our investment in new colleges mean it has never been a better time to join our student body or research groups at York.</p>">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/374/?image=996" alt="">
</figure>
</a>
Complex gallery
Galleries can also be created by using a grid layout, which gives you more control over the layout, especially at changing screen sizes.
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__box o-grid__box--third o-grid__box--full@medium">
<a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=997" data-caption="<h3>Berrick Saul building </h3><p>Our £11m Berrick Saul building houses the Humanities Research Centre, interdisciplinary research centres, seminar rooms and the 150-seat Bowland Auditorium.</p>">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=997" alt="">
</figure>
</a>
</div>
<div class="o-grid__box o-grid__box--third o-grid__box--half@medium">
<a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=998">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=998" alt="">
</figure>
</a>
</div>
<div class="o-grid__box o-grid__box--third o-grid__box--half@medium">
<a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=999" data-caption="<p>Our investment in new colleges mean it has never been a better time to join our student body or research groups at York.</p>">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=999" alt="">
</figure>
</a>
</div>
</div>
<div class="o-grid__row">
<div class="o-grid__box o-grid__box--third o-grid__box--half@medium">
<a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=998">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=998" alt="">
</figure>
</a>
</div>
<div class="o-grid__box o-grid__box--third o-grid__box--quarter@medium">
<a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=999" data-caption="<p>Our investment in new colleges mean it has never been a better time to join our student body or research groups at York.</p>">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=999" alt="">
</figure>
</a>
</div>
<div class="o-grid__box o-grid__box--third o-grid__box--quarter@medium">
<a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=997" data-caption="<h3>Berrick Saul building </h3><p>Our £11m Berrick Saul building houses the Humanities Research Centre, interdisciplinary research centres, seminar rooms and the 150-seat Bowland Auditorium.</p>">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=997" alt="">
</figure>
</a>
</div>
</div>
<div class="o-grid__row">
<div class="o-grid__box o-grid__box--third o-grid__box--half@medium">
<a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=999" data-caption="<p>Our investment in new colleges mean it has never been a better time to join our student body or research groups at York.</p>">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=999" alt="">
</figure>
</a>
</div>
<div class="o-grid__box o-grid__box--third o-grid__box--half@medium">
<a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=998">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=998" alt="">
</figure>
</a>
</div>
<div class="o-grid__box o-grid__box--third o-grid__box--full@medium">
<a class="c-gallery-item js-modal js-modal--frameless js-modal--gallery" href="https://picsum.photos/1280/1280/?image=997" data-caption="<h3>Berrick Saul building </h3><p>Our £11m Berrick Saul building houses the Humanities Research Centre, interdisciplinary research centres, seminar rooms and the 150-seat Bowland Auditorium.</p>">
<figure class="c-gallery-item__thumbnail">
<img class="c-gallery-item__thumbnail-image" src="https://picsum.photos/280/280/?image=997" alt="">
</figure>
</a>
</div>
</div>
</div>
Options
Molecules
- gallery-item
- link: the URL of the picture for the gallery
- thumbnail: the URL of the image thumbnail
- caption: the stuff that goes in the box under the picture. Should be an HTML string.