<div class="gallery-tiles" data-gallery-tiles>
<div class="gallery-tiles__container">
<div class="gallery-tiles__item">
<button class="gallery-tiles__slide-button" data-slide-button="0" data-is-button-shown="true" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-tiles__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1348/960?random=1" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/1348/960?random=1" alt="alt text 1">
</picture>
<figcaption class="captioned-image__caption">
Image caption changes as the user swipes through.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-tiles__item">
<button class="gallery-tiles__slide-button" data-slide-button="1" data-is-button-shown="true" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-tiles__video-container">
<div class="gallery-tiles__modal-video">
<img class="gallery-tiles__modal-video-splash-image" src="https://i.ytimg.com/vi/jVIwpjHazmg/hqdefault.jpg" alt="Caption of the video">
<button class="gallery-tiles__modal-video-play" data-slide-play-button="1" aria-label="play video">
<span class="play-button">
<svg class="play-button__oval" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="68" height="68" viewBox="0 0 68 68">
<defs>
<circle id="prefix__a" cx="32" cy="32" r="32"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(2 2)">
<use fill="#000" fill-opacity=".5" xlink:href="#prefix__a"/>
<circle cx="32" cy="32" r="33" stroke="#000" stroke-opacity=".5" stroke-width="2"/>
<circle cx="32" cy="32" r="31" stroke="#FF552E" stroke-linejoin="miter" stroke-width="2"/>
</g>
</svg>
<svg class="play-button__arrow" xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
<path fill="#F5F5F5" fill-rule="evenodd" d="M24 44L24 20 44 32z" transform="translate(-24 -20)"/>
</svg>
</span>
</button>
</div>
</div>
</div>
<div class="gallery-tiles__item">
<button class="gallery-tiles__slide-button" data-slide-button="2" data-is-button-shown="true" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-tiles__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1348/960?random=2" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/1348/960?random=2" alt="alt text 2">
</picture>
<figcaption class="captioned-image__caption">
This one has a caption, too.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-tiles__item">
<button class="gallery-tiles__slide-button" data-slide-button="3" data-is-button-shown="true" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-tiles__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/900/1100?random=3" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/900/1100?random=3" alt="alt text 2">
</picture>
<figcaption class="captioned-image__caption">
This one has a caption, too.
</figcaption>
</figure>
</div>
</div>
<div class="gallery-tiles__item">
<button class="gallery-tiles__slide-button" data-slide-button="4" data-is-button-shown="true" aria-label="expand/collapse media">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" d="M6.5 8L8 9.5 3.414 14H7c.513 0 .936.386.993.883L8 15c0 .513-.386.936-.883.993L7 16H0V9c0-.552.448-1 1-1 .513 0 .936.386.993.883L2 9v3.584L6.5 8zM16 0v7c0 .552-.448 1-1 1-.513 0-.936-.386-.993-.883L14 7V3.414L9.5 8 8 6.5 12.584 2H9c-.513 0-.936-.386-.993-.883L8 1c0-.513.386-.936.883-.993L9 0h7z"/>
</svg>
</button>
<div class="gallery-tiles__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1348/960?random=4" type="image/webp">
<img class="captioned-image__gallery-image" loading="lazy" src="https://picsum.photos/1348/960?random=4" alt="alt text 2">
</picture>
<figcaption class="captioned-image__caption">
This one has a caption, too.
</figcaption>
</figure>
</div>
</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="gallery-tiles" data-gallery-tiles>
<div class="gallery-tiles__container">
{% for item in component.media %}
<div class="gallery-tiles__item">
<button class="gallery-tiles__slide-button" data-slide-button="{{ loop.index0 }}" data-is-button-shown="true" aria-label="expand/collapse media">
{% include 'bits/icons/expand.twig' %}
</button>
{% if item.media_type == 'Image' %}
<div class="gallery-tiles__image-container">
{{ imageMacros.createHeightOnlyCropForGallery(item.media) }}
</div>
{% else %}
<div class="gallery-tiles__video-container">
<div class="gallery-tiles__modal-video">
<img class="gallery-tiles__modal-video-splash-image" src="{{ item.media.thumbnail_url }}" alt="{{ item.media.caption | escape }}">
<button class="gallery-tiles__modal-video-play" data-slide-play-button="{{ loop.index0 }}" aria-label="play video">
{% include 'bits/icons/play-button/play-button.twig' %}
</button>
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{
"siteUnit": "network",
"departmentName": "Network",
"background": "light",
"component": {
"type": "gallery",
"displayType": "slideshow",
"title": "A header passed in as a string",
"shortDescription": "this is a short description",
"body": "<p>Studying urban planning at UIUC means you have access to the resources, facilities, and minds of a global R1 university. It also makes you part of a long tradition—planning has been offered at Illinois since 1912.</p><p>Getting involved in planning issues at all levels is easy in Champaign-Urbana. Work with three plan commissions, two city councils, a county board, the Bicycle and Pedestrian Advisory Board, the Sustainability Advisory Commission, the Community Development Commission, and more!</p>",
"media": [
{
"media_type": "Image",
"media": {
"src": "https://picsum.photos/1348/960?random=1",
"altText": "alt text 1",
"caption": "Image caption changes as the user swipes through."
}
},
{
"media_type": "Video",
"media": {
"url": "https://www.youtube.com/watch?v=jVIwpjHazmg",
"src": "https://www.youtube.com/embed/jVIwpjHazmg?feature=oembed&autoplay=1",
"caption": "Caption of the video",
"thumbnail_url": "https://i.ytimg.com/vi/jVIwpjHazmg/hqdefault.jpg",
"dimensionSizingImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1YAAAHgCAIAAAApMmt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEv0lEQVR4nO3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC+BsauAAH5v2KcAAAAAElFTkSuQmCC",
"width": 854,
"height": 480
}
},
{
"media_type": "Image",
"media": {
"src": "https://picsum.photos/1348/960?random=2",
"altText": "alt text 2",
"caption": "This one has a caption, too."
}
},
{
"media_type": "Image",
"media": {
"src": "https://picsum.photos/900/1100?random=3",
"altText": "alt text 2",
"caption": "This one has a caption, too."
}
},
{
"media_type": "Image",
"media": {
"src": "https://picsum.photos/1348/960?random=4",
"altText": "alt text 2",
"caption": "This one has a caption, too."
}
}
],
"mediaSize": "Large",
"callToAction": {
"text": "Click this button",
"url": "#"
}
}
}
.gallery-tiles
margin-bottom 32px
&__container
display grid
grid-template-columns 1fr
grid-gap 32px
+above(600px)
grid-template-columns 1fr 1fr
&__item
position relative
z-index 1
&__image-container
position relative
&__slide-button
@extends $slide-button
&__modal-video
position relative
&__modal-video-splash-image
width 100%
&__modal-video-play
@extends $video-play
visibility visible
opacity 1
.captioned-image__gallery-image
height auto
width 100%
&__modal-video-iframe
width 100%
height 400px
There are no notes for this item.