<!-- Gallery -->
<div class="gallery theme_light_tan">
<div class="gallery_inner">
<div class="gallery_header">
<div class="fs-row">
<div class="fs-cell fs-xl-10 fs-xl-justify-center">
<div class="gallery_header_inner">
<h2 class="gallery_title">Surround Yourself</h2>
<div class="gallery_description">
<p>At DRBU, students gain many opportunities to engage in hand-on learning through student activities, volunteering, arts, and service scholarship.</p>
</div>
</div>
</div>
</div>
</div>
<div class="gallery_body">
<div class="fs-row">
<div class="fs-cell">
<div class="gallery_body_inner">
<div class="gallery_items_counter_wrapper">
<div class="gallery_items_counter_inner">
<div class="js-carousel js-gallery-counter gallery_carousel gallery_items_counter" data-carousel-controller-for=".gallery_carousel_gallery_carousel-3" data-carousel-options='{"contained":false,"controls":false,"pagination":false,"single":true,"maxWidth":"980px"}'>
<div class="gallery_items_count"></div>
<div class="gallery_items_count"></div>
<div class="gallery_items_count"></div>
<div class="gallery_items_count"></div>
<div class="gallery_items_count"></div>
<div class="gallery_items_count"></div>
<div class="gallery_items_count"></div>
<div class="gallery_items_count"></div>
<div class="gallery_items_count"></div>
</div>
</div>
</div>
<div class="js-carousel gallery_carousel gallery_items gallery_items_carousel gallery_carousel_gallery_carousel-3" data-carousel-options='{"contained":false,"controls":false,"pagination":false,"maxWidth":"980px"}'>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">
<div class="gallery_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"XPjQhvjQbSM","type":"youtube","title":"Fastspot, Our Methodology","display":"inline","autoplay":false,"playerVars":{}}'>
<a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=XPjQhvjQbSM" aria-label="Play Fastspot, Our Methodology">
<svg class="icon icon_video_play">
<use href="/images/icons.svg#video_play" />
</svg>
</a>
<div class="lazy_video_iframe_wrap">
<div class="lazy_video_iframe_target js-iframe-target"></div>
</div>
</div>
</div>
<figcaption class="gallery_item_caption">
<p>Caption for you</p>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/2 740w, https://images.fastspot.com/framework/500x375/2 500w, https://images.fastspot.com/framework/300x225/2 300w" src="https://images.fastspot.com/framework/300x225/2" alt="" loading="lazy" width="300" height="225">
</div>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">
</div>
<figcaption class="gallery_item_caption">
<p>Another caption</p>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/2 740w, https://images.fastspot.com/framework/500x375/2 500w, https://images.fastspot.com/framework/300x225/2 300w" src="https://images.fastspot.com/framework/300x225/2" alt="" loading="lazy" width="300" height="225">
</div>
<figcaption class="gallery_item_caption">
<p>Thank you caption!</p>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">
</div>
<figcaption class="gallery_item_caption">
<p>Oh caption</p>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/2 740w, https://images.fastspot.com/framework/500x375/2 500w, https://images.fastspot.com/framework/300x225/2 300w" src="https://images.fastspot.com/framework/300x225/2" alt="" loading="lazy" width="300" height="225">
</div>
<figcaption class="gallery_item_caption">
<p>Why you caption!</p>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">
</div>
<figcaption class="gallery_item_caption">
<p>Maybe do a caption</p>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/2 740w, https://images.fastspot.com/framework/500x375/2 500w, https://images.fastspot.com/framework/300x225/2 300w" src="https://images.fastspot.com/framework/300x225/2" alt="" loading="lazy" width="300" height="225">
</div>
<figcaption class="gallery_item_caption">
<p>Definitely a caption</p>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">
<div class="gallery_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"258133523","type":"vimeo","title":"Fastspot Moments","display":"inline","autoplay":true,"playerVars":{}}'>
<a class="lazy_video_toggle_btn js-play-btn" href="https://vimeo.com/258133523" aria-label="Play Fastspot Moments">
<svg class="icon icon_video_play">
<use href="/images/icons.svg#video_play" />
</svg>
</a>
<div class="lazy_video_iframe_wrap">
<div class="lazy_video_iframe_target js-iframe-target"></div>
</div>
</div>
</div>
<figcaption class="gallery_item_caption">
<p>Something nice</p>
</figcaption>
</figure>
</div>
</div>
<div class="gallery_items gallery_items_grid">
<div class="gallery_row gallery_row_layout_3x3">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">
<div class="gallery_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"XPjQhvjQbSM","type":"youtube","title":"Fastspot, Our Methodology","display":"inline","autoplay":false,"playerVars":{}}'>
<a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=XPjQhvjQbSM" aria-label="Play Fastspot, Our Methodology">
<svg class="icon icon_video_play">
<use href="/images/icons.svg#video_play" />
</svg>
</a>
<div class="lazy_video_iframe_wrap">
<div class="lazy_video_iframe_target js-iframe-target"></div>
</div>
</div>
<a class="gallery_lightbox_link js-lightbox fs-youtube" href="https://www.youtube.com/watch?v=XPjQhvjQbSM" data-url="https://www.youtube.com/watch?v=XPjQhvjQbSM" data-crop="" data-lightbox-group="0" data-lightbox-caption="Caption for you">
<span class="gallery_lightbox_link_inner">
<span class="gallery_lightbox_link_icon">
<svg class="icon icon_open_in_full">
<use href="/images/icons.svg#open_in_full" />
</svg>
</span>
<span class="gallery_lightbox_link_label">See Details</span>
</span>
</a>
</div>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/2 740w, https://images.fastspot.com/framework/500x375/2 500w, https://images.fastspot.com/framework/300x225/2 300w" src="https://images.fastspot.com/framework/300x225/2" alt="" loading="lazy" width="300" height="225">
<a class="gallery_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/2" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/2" data-crop="" data-lightbox-group="0">
<span class="gallery_lightbox_link_inner">
<span class="gallery_lightbox_link_icon">
<svg class="icon icon_open_in_full">
<use href="/images/icons.svg#open_in_full" />
</svg>
</span>
<span class="gallery_lightbox_link_label">See Details</span>
</span>
</a>
</div>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">
<a class="gallery_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/1" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/1" data-crop="" data-lightbox-group="0" data-lightbox-caption="Another caption">
<span class="gallery_lightbox_link_inner">
<span class="gallery_lightbox_link_icon">
<svg class="icon icon_open_in_full">
<use href="/images/icons.svg#open_in_full" />
</svg>
</span>
<span class="gallery_lightbox_link_label">See Details</span>
</span>
</a>
</div>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/2 740w, https://images.fastspot.com/framework/500x375/2 500w, https://images.fastspot.com/framework/300x225/2 300w" src="https://images.fastspot.com/framework/300x225/2" alt="" loading="lazy" width="300" height="225">
<a class="gallery_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/2" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/2" data-crop="" data-lightbox-group="0" data-lightbox-caption="Thank you caption!">
<span class="gallery_lightbox_link_inner">
<span class="gallery_lightbox_link_icon">
<svg class="icon icon_open_in_full">
<use href="/images/icons.svg#open_in_full" />
</svg>
</span>
<span class="gallery_lightbox_link_label">See Details</span>
</span>
</a>
</div>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">
<a class="gallery_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/1" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/1" data-crop="" data-lightbox-group="0" data-lightbox-caption="Oh caption">
<span class="gallery_lightbox_link_inner">
<span class="gallery_lightbox_link_icon">
<svg class="icon icon_open_in_full">
<use href="/images/icons.svg#open_in_full" />
</svg>
</span>
<span class="gallery_lightbox_link_label">See Details</span>
</span>
</a>
</div>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/2 740w, https://images.fastspot.com/framework/500x375/2 500w, https://images.fastspot.com/framework/300x225/2 300w" src="https://images.fastspot.com/framework/300x225/2" alt="" loading="lazy" width="300" height="225">
<a class="gallery_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/2" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/2" data-crop="" data-lightbox-group="0" data-lightbox-caption="Why you caption!">
<span class="gallery_lightbox_link_inner">
<span class="gallery_lightbox_link_icon">
<svg class="icon icon_open_in_full">
<use href="/images/icons.svg#open_in_full" />
</svg>
</span>
<span class="gallery_lightbox_link_label">See Details</span>
</span>
</a>
</div>
</figure>
</div>
</div>
<div class="gallery_row gallery_row_layout_2x2">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">
<a class="gallery_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/1" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/1" data-crop="" data-lightbox-group="0" data-lightbox-caption="Maybe do a caption">
<span class="gallery_lightbox_link_inner">
<span class="gallery_lightbox_link_icon">
<svg class="icon icon_open_in_full">
<use href="/images/icons.svg#open_in_full" />
</svg>
</span>
<span class="gallery_lightbox_link_label">See Details</span>
</span>
</a>
</div>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/2 740w, https://images.fastspot.com/framework/500x375/2 500w, https://images.fastspot.com/framework/300x225/2 300w" src="https://images.fastspot.com/framework/300x225/2" alt="" loading="lazy" width="300" height="225">
<a class="gallery_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/2" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/2" data-crop="" data-lightbox-group="0" data-lightbox-caption="Definitely a caption">
<span class="gallery_lightbox_link_inner">
<span class="gallery_lightbox_link_icon">
<svg class="icon icon_open_in_full">
<use href="/images/icons.svg#open_in_full" />
</svg>
</span>
<span class="gallery_lightbox_link_label">See Details</span>
</span>
</a>
</div>
</figure>
</div>
</div>
<div class="gallery_row gallery_row_layout_1">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">
<div class="gallery_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"258133523","type":"vimeo","title":"Fastspot Moments","display":"inline","autoplay":true,"playerVars":{}}'>
<a class="lazy_video_toggle_btn js-play-btn" href="https://vimeo.com/258133523" aria-label="Play Fastspot Moments">
<svg class="icon icon_video_play">
<use href="/images/icons.svg#video_play" />
</svg>
</a>
<div class="lazy_video_iframe_wrap">
<div class="lazy_video_iframe_target js-iframe-target"></div>
</div>
</div>
<a class="gallery_lightbox_link js-lightbox fs-vimeo" href="https://vimeo.com/258133523" data-url="https://vimeo.com/258133523" data-crop="" data-lightbox-group="0" data-lightbox-caption="Something nice">
<span class="gallery_lightbox_link_inner">
<span class="gallery_lightbox_link_icon">
<svg class="icon icon_open_in_full">
<use href="/images/icons.svg#open_in_full" />
</svg>
</span>
<span class="gallery_lightbox_link_label">See Details</span>
</span>
</a>
</div>
</figure>
</div>
</div>
</div>
<div class="gallery_action">
<a href="#" class="gallery_link">
<span class="gallery_link_inner">
<span class="gallery_link_label">Life at DRBU</span>
<span class="gallery_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Gallery -->
{#
{% include '@component-gallery' with {
title: 'Title',
description: 'Description',
rows: [
{
layout: '100',
items: [
{
image: '1',
alt: '',
video: {
type: '',
id: '',
title: ''
},
caption: 'caption'
}
]
}
]
} %}
#}
{%
set carousel_counter_options = {
contained: false,
controls: false,
pagination: false,
single: true,
maxWidth: '980px',
}
%}
{% set carousel_counter_options = carousel_counter_options|json_encode %}
{%
set carousel_options = {
contained: false,
controls: false,
pagination: false,
maxWidth: '980px',
}
%}
{% set carousel_options = carousel_options|json_encode %}
{% set carousel_id = uniqid( 'gallery_carousel' ) %}
<!-- Gallery -->
<div class="gallery theme_{{ theme }}">
<div class="gallery_inner">
{% if title or description %}
<div class="gallery_header">
<div class="fs-row">
<div class="fs-cell fs-xl-10 fs-xl-justify-center">
<div class="gallery_header_inner">
{% if title %}
<h2 class="gallery_title">{{ title }}</h2>
{% endif %}
{% if description %}
<div class="gallery_description">
<p>{{ description }}</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
<div class="gallery_body">
<div class="fs-row">
<div class="fs-cell">
<div class="gallery_body_inner">
<div class="gallery_items_counter_wrapper">
<div class="gallery_items_counter_inner">
<div class="js-carousel js-gallery-counter gallery_carousel gallery_items_counter" data-carousel-controller-for=".gallery_carousel_{{ carousel_id }}" data-carousel-options='{{ carousel_counter_options }}'>
{% for row in rows %}
{% for item in row.items %}
<div class="gallery_items_count"></div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
<div class="js-carousel gallery_carousel gallery_items gallery_items_carousel gallery_carousel_{{ carousel_id }}" data-carousel-options='{{ carousel_options }}'>
{% for row in rows %}
{% for item in row.items %}
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
{% if item.image %}
{% include '@partial-image' with {
class: 'gallery_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.full.sml,
img.full.xsml,
img.full.xxsml
]
} %}
{% endif %}
{% if item.video.id %}
{% include "@partial-lazy-video" with {
class: "gallery",
id: item.video.id,
type: item.video.type,
autoplay: item.video.autoplay|default(false),
title: item.video.title,
playerVars: {}
} %}
{% endif %}
</div>
{% if item.caption %}
<figcaption class="gallery_item_caption">
<p>{{ item.caption }}</p>
</figcaption>
{% endif %}
</figure>
</div>
{% endfor %}
{% endfor %}
</div>
<div class="gallery_items gallery_items_grid">
{% for row in rows %}
<div class="gallery_row gallery_row_layout_{{ row.layout }}">
{% for item in row.items %}
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media">
{% if item.image %}
{% include '@partial-image' with {
class: 'gallery_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.full.sml,
img.full.xsml,
img.full.xxsml
]
} %}
{% endif %}
{% if item.video.id %}
{% include "@partial-lazy-video" with {
class: "gallery",
id: item.video.id,
type: item.video.type,
autoplay: item.video.autoplay|default(false),
title: item.video.title,
playerVars: {}
} %}
{% endif %}
{% if item.video.id %}
{% if item.video.type == 'youtube' %}
{% set href = 'https://www.youtube.com/watch?v=' ~ item.video.id %}
{% else %}
{% set href = 'https://vimeo.com/' ~ item.video.id %}
{% endif %}
{% else %}
{% set href = "https://images.fastspot.com/washington-national-cathedral/" ~ img.wide.xlrg.width ~ 'x' ~ img.wide.xlrg.height ~ '/' ~ item.image %}
{% endif %}
<a class="gallery_lightbox_link js-lightbox{% if item.video.type %} fs-{{ item.video.type }}{% endif %}" href="{{ href }}" data-url="{{ href }}" data-crop="{{ item.crop }}" data-lightbox-group="0"{% if item.title %} data-title="{{ item.title }}"{% endif %}{% if item.caption %} data-lightbox-caption="{{ item.caption }}"{% endif %}>
<span class="gallery_lightbox_link_inner">
<span class="gallery_lightbox_link_icon">{{ icon("open_in_full") }}</span>
<span class="gallery_lightbox_link_label">See Details</span>
</span>
</a>
</div>
</figure>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
<div class="gallery_action">
{% include '@partial-link' with {
class: 'gallery',
title: link.title,
url: link.url,
icon: link.icon
} %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Gallery -->
No notes defined.