Long-form gallery

The long-form gallery pattern allows you to displaying a large number of images on a page and makes use of the Lightbox JavaScript library to view the images in an immersive experience.

Rules for the long-form gallery

Thumbnail images must be 170 × 170 pixels.
Must only be used within the main content of a long-form page.
A page may contain multiple galleries.
There should be no more than ten images in any one gallery.
Use data-lightbox="[gallery name]" to group images together for each gallery.

Options available

Long-form gallery

Long-form gallery

To be used only on the long-form pages.

Scientists involved with Light Box

alt text for image 1 — Ifor Samuel
*Physicist*

alt text for image 2 — John Allen
*Physicist*

alt text for image 3 — Ashu Kumar Bansal
*Optical physicist*

Code

<div class="gallery">
    <h4 class="thumbnail-gallery__title">Scientists involved with Light Box</h4>
    <div class="gallery__description"><p></p></div>
    <div class="longform_gallery">
        <figure id="optional-id2">
            <a href="../../assets/docs/images/long-form-content/portrait-ifor-samuel.jpg" data-lightbox="gallery-longform" data-title="Ifor Samuel <br> <em>Physicist</em>"><img src="../../assets/docs/images/long-form-content/portrait-ifor-samuel.jpg" alt="alt text for image 1"></a>
            <figcaption>Ifor Samuel <br> <em>Physicist</em></figcaption>
        </figure>
        <figure id="optional-id3">
            <a href="../../assets/docs/images/long-form-content/portrait-john-allen.jpg" data-lightbox="gallery-longform" data-title="John Allen<br><em>Physicist</em>"><img src="../../assets/docs/images/long-form-content/portrait-john-allen.jpg" alt="alt text for image 2"></a>
            <figcaption>John Allen<br><em>Physicist</em></figcaption>
        </figure>
        <figure id="optional-id4">
            <a href="../../assets/docs/images/long-form-content/portrait-ashu-kumar-bansal.jpg" data-lightbox="gallery-longform" data-title="Ashu Kumar Bansal<br><em>Optical physicist</em>"><img src="../../assets/docs/images/long-form-content/portrait-ashu-kumar-bansal.jpg" alt="alt text for image 3"></a>
            <figcaption>Ashu Kumar Bansal<br><em>Optical physicist</em></figcaption>
        </figure>
        <figure id="optional-id4">
            <a href="../../assets/docs/images/long-form-content/portrait-hien-nguyen.jpg" data-lightbox="gallery-longform" data-title="Hien Nguyen<br><em>Polymer chemist</em>"><img src="../../assets/docs/images/long-form-content/portrait-hien-nguyen.jpg" alt="alt text for image 3"></a>
            <figcaption>Hien Nguyen<br><em>Polymer chemist</em></figcaption>
        </figure>
        <figure id="optional-id4">
            <a href="../../assets/docs/images/long-form-content/portrait-olena-kulyk.jpg" data-lightbox="gallery-longform" data-title="Olena Kulyk<br><em>Biomedical electronics engineer</em>"><img src="../../assets/docs/images/long-form-content/portrait-olena-kulyk.jpg" alt="alt text for image 3"></a>
            <figcaption>Olena Kulyk<br><em>Biomedical electronics engineer</em></figcaption>
        </figure>
    </div>
</div>