<div class="gallery-filmstrip gallery-filmstrip--durp" tabindex="-1" data-gallery-filmstrip data-filmstrip-modal>
</div>
<div class="gallery-filmstrip__controls-container gallery-filmstrip--durp
" data-filmstrip-controls>
<div class="gallery-filmstrip__controls">
<button class="gallery-filmstrip__control-button-previous" type="button" aria-label="Go to previous carousel item" data-controls-prev>
<svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
</button>
<button class="gallery-filmstrip__control-button-next" type="button" aria-label="Go to next carousel item" data-controls-next>
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</button>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="gallery-filmstrip gallery-filmstrip--{{ siteUnit }}" tabindex="-1" data-gallery-filmstrip
data-filmstrip-modal>
{% for item in component.media %}
<div class="gallery-filmstrip__slide-container gallery-filmstrip__slide-container--{{ component.mediaSize }}"
data-carousel-index="{{ loop.index0 }}">
<button class="gallery-filmstrip__slide-button" data-slide-button="{{ loop.index0 }}"
data-is-button-shown="{{ loop.first ? true : false }}" aria-label="expand/collapse media">
{% include 'bits/icons/expand.twig' %}
</button>
<div class="gallery-filmstrip__slide" data-gallery-filmstrip-item>
<div
class="gallery-filmstrip__media-container gallery-filmstrip__media-container--{{ component.mediaSize }}">
{% if item.media_type == 'Image' %}
<div class="gallery-filmstrip__image-container">
{{ imageMacros.createHeightOnlyCropForGallery(item.media, 900) }}
</div>
{% else %}
<div class="gallery-filmstrip__video-container">
<div class="gallery-filmstrip__video">
<img class="gallery-filmstrip__video-splash-image" src="{{ item.media.thumbnail_url }}"
alt="{{ item.media.caption | escape }}" data-splash-image>
<iframe class="gallery-filmstrip__video-iframe" src="" title="{{ item.media.caption }}"
data-video-src="{{ item.media.src }}" frameborder="0" style="display: none;"
allow="autoplay"></iframe>
<img class="gallery-filmstrip__video-placeholder"
src="{{ item.media.dimensionSizingImage }}" alt="{{ item.media.caption | escape }}">
<button class="gallery-filmstrip__video-play" data-video-play
data-is-play-button-shown="false" aria-label="play video">
{% include 'bits/icons/play-button/play-button.twig' %}
</button>
</div>
</div>
{% endif %}
</div>
<div class="gallery-filmstrip__caption
gallery-filmstrip__caption--{{ background }}"
data-caption
data-is-caption-shown="{{ loop.first ? true : false }}">
{{ item.media.caption | raw }}
</div>
</div>
</div>
{% endfor %}
</div>
<div class="gallery-filmstrip__controls-container gallery-filmstrip--{{ siteUnit }}
{{ component.hideTitle ? 'gallery-filmstrip__controls-container--no-title' }}" data-filmstrip-controls>
<div class="gallery-filmstrip__controls">
<button
class="gallery-filmstrip__control-button-previous" type="button" aria-label="Go to previous carousel item"
data-controls-prev>
{% include "bits/icons/left-chevron.twig" %}
</button>
<button class="gallery-filmstrip__control-button-next" type="button" aria-label="Go to next carousel item"
data-controls-next>
{% include "bits/icons/right-chevron.twig" %}
</button>
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "light",
"component": {
"title": null,
"body": null,
"shortDescription": null
}
}
.gallery-filmstrip
transition all ease-in-out 200ms
display flex
flex-grow 0
flex-shrink 0
position relative
width 100vw
+below(768px)
margin-bottom 45px
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive white
--iconBackgroundColorActive illiniOrange
&--dark
--bodyColor grey
--captionColor grey
&--arch
--borderColor industrialBlue
--captionColor greyDarkest
--iconFillColor industrialBlue
--iconFillColorActive white
--iconBackgroundColorActive industrialBlue
&--art
--borderColor archesBlue
--captionColor greyDarkest
--iconFillColor archesBlue
--iconFillColorActive white
--iconBackgroundColorActive archesBlue
&--college
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
--iconBackgroundColorActive illiniOrange
&--dance
--borderColor archesBlue
--captionColor greyDarkest
--iconFillColor archesBlue
--iconFillColorActive white
--iconBackgroundColorActive archesBlue
&--durp
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive white
--iconBackgroundColorActive illiniOrange
&--landarch
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive black
--iconBackgroundColorActive illiniOrange
&--theatre
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
--iconBackgroundColorActive illiniOrange
&__slide
transition opacity 200ms ease-in-out
&__slide-container
position relative
&--Large
max-height 530px
&--Medium
max-height 338px
&__slide-button
@extends $slide-button
&__media-container
& img
& iframe
height 100%
max-width: 50vw;
object-fit cover
object-position center
+below(1000px)
max-width 88vw
& iframe
position absolute
height 100%
width 100%
background-color black
&--Medium
height 288px
&--Large
height 480px
+below(largeDeviceBreakpoint)
height 360px
&--Medium iframe
height 288px
&--Medium iframe
&--Medium img
+below(mediumDeviceBreakpoint)
height 192px
max-width 90vw
&--Large iframe
+below(largeDeviceBreakpoint)
height 360px
+below(mediumDeviceBreakpoint)
height 192px
+below(mediumDeviceBreakpoint)
height 192px
& .captioned-image__caption
display none
&__image-container
&__video-container
&__video
height 100%
&__image-container .captioned-image__picture
&__video
max-width 50vw
position relative
+below(1000px)
max-width 88vw
height 100% !important;
&__video-splash-image
position absolute
&__video-play
@extends $video-play
transition all 200ms ease-in-out
visibility hidden
opacity 0
&[data-is-play-button-shown="true"]
visibility visible
opacity 1
&__caption
transition all 400ms ease-in-out
&[data-is-caption-shown="true"]
opacity 1
visibility visible
&[data-is-caption-shown="false"]
opacity 0
visibility hidden
&__caption
@extends $detail
border-top 2px solid var(--borderColor)
color var(--captionColor)
margin-top 24px
padding-top 8px
&__video-splash-image
height 100%
object-fit cover
object-position center
width 100%
&__control-button-previous
&__control-button-next
@extends $control-button
border solid 2px var(--borderColor)
&:focus
&:hover
background-color var(--iconBackgroundColorActive)
& ._mark
fill var(--iconFillColorActive)
& > svg
& ._mark
fill var(--iconFillColor)
&__controls
display flex
pointer-events all
+below(768px)
margin-right auto
width fit-content
&__controls-container
display flex
justify-content flex-end
pointer-events none
position relative
top -20px
&--no-title
top -2px
+above(768px)
top 53px
&--no-title
top -24px
&__control-button-previous
display block
margin-right 16px
+below(mediumDeviceBreakpoint)
margin-right 10px
& > svg
margin-right 4px
&__control-button-next
& > svg
margin-left 4px
There are no notes for this item.