<!-- Gallery -->
<div class="gallery">
<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 gallery_row_layout_70_30">
<div class="gallery_item gallery_item_has_media">
<figure class="gallery_item_figure gallery_item_size_wide">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/1440x810/1 1440w, https://images.fastspot.com/framework/1220x686/1 1220w, https://images.fastspot.com/framework/980x552/1 980w, https://images.fastspot.com/framework/740x416/1 740w, https://images.fastspot.com/framework/500x282/1 500w, https://images.fastspot.com/framework/300x169/1 300w" src="https://images.fastspot.com/framework/300x169/1" alt="" loading="lazy" width="300" height="169">
</div>
<div class="gallery_item_body">
<figcaption class="gallery_item_caption">
<p>Visual callout component Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</figcaption>
<div class="gallery_item_actions">
<div class="gallery_item_action">
<a href="#" class="gallery_item_link">
<span class="gallery_item_link_inner">
<span class="gallery_item_link_label">Join Our Researchers List</span>
<span class="gallery_item_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
<div class="gallery_item_action">
<a href="#" class="gallery_item_link">
<span class="gallery_item_link_inner">
<span class="gallery_item_link_label">Join Our Researchers List</span>
<span class="gallery_item_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure gallery_item_size_portrait">
<div class="gallery_item_media">
</div>
<div class="gallery_item_body">
<figcaption class="gallery_item_caption">
<p>Supporting optional visual callout block</p>
</figcaption>
<div class="gallery_item_actions">
<div class="gallery_item_action">
<a href="#" class="gallery_item_link">
<span class="gallery_item_link_inner">
<span class="gallery_item_link_label">Optional Link</span>
<span class="gallery_item_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
<div class="gallery_item_action">
<a href="#" class="gallery_item_link">
<span class="gallery_item_link_inner">
<span class="gallery_item_link_label">Optional Link</span>
<span class="gallery_item_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</figure>
</div>
</div>
<div class="gallery_row gallery_row_layout_100">
<div class="gallery_item gallery_item_has_media">
<figure class="gallery_item_figure gallery_item_size_wide">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/1440x810/1 1440w, https://images.fastspot.com/framework/1220x686/1 1220w, https://images.fastspot.com/framework/980x552/1 980w, https://images.fastspot.com/framework/740x416/1 740w, https://images.fastspot.com/framework/500x282/1 500w, https://images.fastspot.com/framework/300x169/1 300w" src="https://images.fastspot.com/framework/300x169/1" alt="" loading="lazy" width="300" height="169">
</div>
<div class="gallery_item_body">
<figcaption class="gallery_item_caption">
<p>Visual callout component ultricies est nisi eu integer. Scelerisque est varius dignissim molestie. Lacinia sit non tincidunt suspendisse suspendisse non.</p>
</figcaption>
</div>
</figure>
</div>
</div>
<div class="gallery_row gallery_row_layout_30_70">
<div class="gallery_item gallery_item_has_media">
<figure class="gallery_item_figure gallery_item_size_portrait">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/735x980/2 735w, https://images.fastspot.com/framework/555x740/2 555w, https://images.fastspot.com/framework/375x500/2 375w, https://images.fastspot.com/framework/225x300/2 225w" src="https://images.fastspot.com/framework/225x300/2" alt="" loading="lazy" width="225" height="300">
</div>
<div class="gallery_item_body">
<figcaption class="gallery_item_caption">
<p>Supporting optional visual callout block</p>
</figcaption>
</div>
</figure>
</div>
<div class="gallery_item gallery_item_has_media">
<figure class="gallery_item_figure gallery_item_size_wide">
<div class="gallery_item_media">
<img class="gallery_item_image" srcset="https://images.fastspot.com/framework/1440x810/3 1440w, https://images.fastspot.com/framework/1220x686/3 1220w, https://images.fastspot.com/framework/980x552/3 980w, https://images.fastspot.com/framework/740x416/3 740w, https://images.fastspot.com/framework/500x282/3 500w, https://images.fastspot.com/framework/300x169/3 300w" src="https://images.fastspot.com/framework/300x169/3" alt="" loading="lazy" width="300" height="169">
</div>
<div class="gallery_item_body">
<figcaption class="gallery_item_caption">
<p>Visual callout component Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</figcaption>
</div>
</figure>
</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'
}
]
}
]
} %}
#}
{%
set layout_sizes = {
"70_30": [
"wide",
"portrait"
],
"30_70": [
"portrait",
"wide"
],
"50_50": [
"wide",
"wide"
],
"100": [
"wide"
]
}
%}
<!-- Gallery -->
<div class="gallery">
<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 %}
<div class="gallery_row gallery_row_layout_{{ row.layout }}">
{% for item in row.items %}
{% set img_size = attribute(layout_sizes, row.layout)[ loop.index0 ] %}
<div class="gallery_item{% if item.image %} gallery_item_has_media{% endif %}">
<figure class="gallery_item_figure gallery_item_size_{{ img_size }}">
<div class="gallery_item_media">
{% if item.image or item.video %}
{% if img_size == "wide" %}
{% if row.layout == "50_50" %}
{% include '@partial-image' with {
class: 'gallery_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.wide.med,
img.wide.sml,
img.wide.xsml,
img.wide.xxsml
]
} %}
{% else %}
{% 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
]
} %}
{% endif %}
{% else %}
{% include '@partial-image' with {
class: 'gallery_item',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.portraitFull.med,
img.portraitFull.sml,
img.portraitFull.xsml,
img.portraitFull.xxsml
]
} %}
{% endif %}
{% endif %}
</div>
<div class="gallery_item_body">
{% if item.caption %}
<figcaption class="gallery_item_caption">
<p>{{ item.caption }}</p>
</figcaption>
{% endif %}
{% if item.links %}
<div class="gallery_item_actions">
{% for link in item.links %}
<div class="gallery_item_action">
{% include '@partial-link' with {
class: 'gallery_item',
title: link.title,
url: link.url,
icon: link.icon
} %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</figure>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Gallery -->
No notes defined.