<!-- Gallery -->
<div class="gallery theme_dark">
<div class="gallery_header">
<div class="fs-row">
<div class="fs-cell fs-lg-8 fs-all-justify-center">
<div class="gallery_header_inner">
<h2 class="gallery_title">Ipsum Fermentum Tristique</h2>
<div class="gallery_description">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</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">
<div class="gallery_row grid_layout_video align_left">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_wide">
<img class="gallery_item_image" srcset="https://images.fastspot.com/generic/1440x810/1 1440w, https://images.fastspot.com/generic/1220x686/1 1220w, https://images.fastspot.com/generic/980x552/1 980w, https://images.fastspot.com/generic/740x416/1 740w, https://images.fastspot.com/generic/500x282/1 500w, https://images.fastspot.com/generic/300x169/1 300w" src="https://images.fastspot.com/generic/300x169/1" alt="" loading="lazy" width="300" height="169">
<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":false,"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>
</figure>
<div class="gallery_item_caption">
<p class="gallery_item_caption_title">A Student Oriented Campus</p>
<p class="gallery_item_caption_description">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem <a href="#">malesuada</a> magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
</div>
<div class="gallery_row grid_layout_50_50">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_classic">
<img class="gallery_item_image" srcset="https://images.fastspot.com/generic/1440x960/2 1440w, https://images.fastspot.com/generic/1220x814/2 1220w, https://images.fastspot.com/generic/980x654/2 980w, https://images.fastspot.com/generic/740x494/2 740w, https://images.fastspot.com/generic/500x334/2 500w, https://images.fastspot.com/generic/300x200/2 300w" src="https://images.fastspot.com/generic/300x200/2" alt="" loading="lazy" width="300" height="200">
</div>
</figure>
<div class="gallery_item_caption">
<p class="gallery_item_caption_description">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_portraitFull">
<img class="gallery_item_image" srcset="https://images.fastspot.com/generic/1080x1440/3 1080w, https://images.fastspot.com/generic/915x1220/3 915w, https://images.fastspot.com/generic/735x980/3 735w, https://images.fastspot.com/generic/555x740/3 555w, https://images.fastspot.com/generic/375x500/3 375w, https://images.fastspot.com/generic/225x300/3 225w" src="https://images.fastspot.com/generic/225x300/3" alt="" loading="lazy" width="225" height="300">
</div>
</figure>
<div class="gallery_item_caption">
<p class="gallery_item_caption_description">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
</div>
<div class="gallery_row grid_layout_100">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_wide">
<img class="gallery_item_image" srcset="https://images.fastspot.com/generic/1440x810/4 1440w, https://images.fastspot.com/generic/1220x686/4 1220w, https://images.fastspot.com/generic/980x552/4 980w, https://images.fastspot.com/generic/740x416/4 740w, https://images.fastspot.com/generic/500x282/4 500w, https://images.fastspot.com/generic/300x169/4 300w" src="https://images.fastspot.com/generic/300x169/4" alt="" loading="lazy" width="300" height="169">
</div>
</figure>
</div>
</div>
<div class="gallery_row grid_layout_70_30">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_classic">
<img class="gallery_item_image" srcset="https://images.fastspot.com/generic/1440x960/1 1440w, https://images.fastspot.com/generic/1220x814/1 1220w, https://images.fastspot.com/generic/980x654/1 980w, https://images.fastspot.com/generic/740x494/1 740w, https://images.fastspot.com/generic/500x334/1 500w, https://images.fastspot.com/generic/300x200/1 300w" src="https://images.fastspot.com/generic/300x200/1" alt="" loading="lazy" width="300" height="200">
</div>
</figure>
<div class="gallery_item_caption">
<p class="gallery_item_caption_description">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_wide">
<img class="gallery_item_image" srcset="https://images.fastspot.com/generic/1440x810/2 1440w, https://images.fastspot.com/generic/1220x686/2 1220w, https://images.fastspot.com/generic/980x552/2 980w, https://images.fastspot.com/generic/740x416/2 740w, https://images.fastspot.com/generic/500x282/2 500w, https://images.fastspot.com/generic/300x169/2 300w" src="https://images.fastspot.com/generic/300x169/2" alt="" loading="lazy" width="300" height="169">
</div>
</figure>
<div class="gallery_item_caption">
<p class="gallery_item_caption_description">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
</div>
<div class="gallery_row grid_layout_30_70">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_portraitFull">
<img class="gallery_item_image" srcset="https://images.fastspot.com/generic/1080x1440/4 1080w, https://images.fastspot.com/generic/915x1220/4 915w, https://images.fastspot.com/generic/735x980/4 735w, https://images.fastspot.com/generic/555x740/4 555w, https://images.fastspot.com/generic/375x500/4 375w, https://images.fastspot.com/generic/225x300/4 225w" src="https://images.fastspot.com/generic/225x300/4" alt="" loading="lazy" width="225" height="300">
</div>
</figure>
<div class="gallery_item_caption">
<p class="gallery_item_caption_title">A Student Oriented Campus</p>
<p class="gallery_item_caption_description">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_wide">
<img class="gallery_item_image" srcset="https://images.fastspot.com/generic/1440x810/5 1440w, https://images.fastspot.com/generic/1220x686/5 1220w, https://images.fastspot.com/generic/980x552/5 980w, https://images.fastspot.com/generic/740x416/5 740w, https://images.fastspot.com/generic/500x282/5 500w, https://images.fastspot.com/generic/300x169/5 300w" src="https://images.fastspot.com/generic/300x169/5" alt="" loading="lazy" width="300" height="169">
</div>
</figure>
<div class="gallery_item_caption">
<p class="gallery_item_caption_description">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
</div>
<div class="gallery_row grid_layout_video align_right">
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_wide">
<img class="gallery_item_image" srcset="https://images.fastspot.com/generic/1440x810/1 1440w, https://images.fastspot.com/generic/1220x686/1 1220w, https://images.fastspot.com/generic/980x552/1 980w, https://images.fastspot.com/generic/740x416/1 740w, https://images.fastspot.com/generic/500x282/1 500w, https://images.fastspot.com/generic/300x169/1 300w" src="https://images.fastspot.com/generic/300x169/1" alt="" loading="lazy" width="300" height="169">
<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":false,"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>
</figure>
<div class="gallery_item_caption">
<p class="gallery_item_caption_title">A Student Oriented Campus</p>
<p class="gallery_item_caption_description">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem <a href="#">malesuada</a> magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
</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'
}
]
}
]
} %}
#}
<!-- Gallery -->
<div class="gallery theme_{{ theme }}">
{% if title or description %}
<div class="gallery_header">
<div class="fs-row">
<div class="fs-cell fs-lg-8 fs-all-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">
{% for row in rows %}
{% if row.layout == 'video' %}
<div class="gallery_row grid_layout_video{% for item in row.items %} align_{{ item.direction }}{% endfor %}">
{% for item in row.items %}
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_wide">
{% include '@partial-image' with {
class: 'gallery_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.wide.xlrg,
img.wide.lrg,
img.wide.med,
img.wide.sml,
img.wide.xsml,
img.wide.xxsml
]
} %}
{% 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: {}
} %}
</div>
</figure>
{% if item.title or item.description %}
<div class="gallery_item_caption">
{% if item.title %}
<p class="gallery_item_caption_title">{{ item.title }}</p>
{% endif %}
{% if item.description %}
<p class="gallery_item_caption_description">{{ item.description }}</p>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% else %}
<div class="gallery_row grid_layout_{{ row.layout }}">
{% for item in row.items %}
<div class="gallery_item">
<figure class="gallery_item_figure">
<div class="gallery_item_media gallery_item_size_{{ item.crop }}">
{% if item.crop == "wide" %}
{% include '@partial-image' with {
class: 'gallery_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.wide.xlrg,
img.wide.lrg,
img.wide.med,
img.wide.sml,
img.wide.xsml,
img.wide.xxsml
]
} %}
{% elseif item.crop == "classic" %}
{% include '@partial-image' with {
class: 'gallery_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.classic.xlrg,
img.classic.lrg,
img.classic.med,
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
]
} %}
{% elseif item.crop == "portraitFull" %}
{% include '@partial-image' with {
class: 'gallery_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.portraitFull.xlrg,
img.portraitFull.lrg,
img.portraitFull.med,
img.portraitFull.sml,
img.portraitFull.xsml,
img.portraitFull.xxsml
]
} %}
{% endif %}
</div>
</figure>
{% if item.title or item.description %}
<div class="gallery_item_caption">
{% if item.title %}
<p class="gallery_item_caption_title">{{ item.title }}</p>
{% endif %}
{% if item.description %}
<p class="gallery_item_caption_description">{{ item.description }}</p>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Gallery -->
No notes defined.