Woodlands.co.uk Component Library

Gallery: Square

Thumbnail gallery, which can be used for Instagram.

A carousel including thumbnails. This uses two JavaScript libraries; Tiny Slider and PhotoSwipe.

<div class="gallery">
    <ul class="gallery__thumbnails">
        <li class="gallery__item">
            <div class="media media--square">
                <div class="media__content">
                    <img src="http://picsum.photos/400/225" alt="" title="" />
                </div>
            </div>

        </li>
        <li class="gallery__item">
            <div class="media media--square">
                <div class="media__content">
                    <img src="http://picsum.photos/400/225" alt="" title="" />
                </div>
            </div>

        </li>
        <li class="gallery__item">
            <div class="media media--square">
                <div class="media__content">
                    <img src="http://picsum.photos/400/225" alt="" title="" />
                </div>
            </div>

        </li>
        <li class="gallery__item">
            <div class="media media--square">
                <div class="media__content">
                    <img src="http://picsum.photos/400/225" alt="" title="" />
                </div>
            </div>

        </li>
        <li class="gallery__item">
            <div class="media media--square">
                <div class="media__content">
                    <img src="http://picsum.photos/400/225" alt="" title="" />
                </div>
            </div>

        </li>
        <li class="gallery__item">
            <div class="media media--square">
                <div class="media__content">
                    <img src="http://picsum.photos/400/225" alt="" title="" />
                </div>
            </div>

        </li>
    </ul>
</div>
 
<div class="{{modifier 'gallery' modifiers}}">
    <ul class="gallery__thumbnails">
      {{#each gallery }}
        <li class="gallery__item">
            {{ render '@media' this merge=true }}
        </li>
      {{/each}}
    </ul>
</div>