<!-- Gallery -->
<div class="gallery">
<div class="gallery_inner">
<div class="gallery_header">
<div class="fs-row">
<div class="fs-cell fs-lg-8">
<h2 class="gallery_title">Full-Width Media Gallery</h2>
<div class="gallery_description">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.</p>
</div>
</div>
</div>
</div>
<div class="gallery_body">
<div class="fs-row">
<div class="fs-cell fs-cell-contained fs-lg-11">
<div class="gallery_body_inner">
<div class="js-carousel gallery_items" role="region" aria-label="Full-Width Media Gallery Gallery" tabindex="0" data-carousel-options='{"contained":false,"labels":{"controls":"Full-Width Media Gallery carousel controls","pagination":"Full-Width Media Gallery carousel pagination"}}'>
<div class="gallery_item">
<figure class="gallery_item_figure" aria-label="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.">
<span class="gallery_item_media">
<span class="lazy_image_wrapper gallery_item_image_wrapper">
<img class="js-lazy js-lazyload gallery_item_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x169/1" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/1 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/1 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/1 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/1 1220w" alt="">
</span>
<noscript>
<img class="gallery_item_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/1" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/1 1220w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/1 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/1 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/1 300w" sizes="100vw" alt="">
</noscript>
<div class="gallery_item_image_credit">
<div class="gallery_item_image_credit_inner">
Reuters
</div>
</div>
</span>
<figcaption class="gallery_details">
<div class="fs-row">
<div class="fs-cell fs-cell-contained fs-lg-9">
<p class="gallery_item_caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Gallery -->
{%
set carousel_options = {
contained: false
}
%}
{% if title %}
{%
set carousel_options = carousel_options|merge({
labels: {
controls: title|replace({"'": "'"}) ~ " carousel controls",
pagination: title|replace({"'": "'"}) ~ " carousel pagination"
}
})
%}
{% endif %}
{% set carousel_options = carousel_options|json_encode %}
<!-- Gallery -->
<div class="gallery">
<div class="gallery_inner">
{% if title or description %}
<div class="gallery_header">
<div class="fs-row">
<div class="fs-cell fs-lg-8">
{% if title %}
<h2 class="gallery_title">{{ title }}</h2>
{% endif %}
{% if description %}
<div class="gallery_description">
<p>{{ description }}</p>
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
<div class="gallery_body">
<div class="fs-row">
<div class="fs-cell fs-cell-contained fs-lg-11">
<div class="gallery_body_inner">
<div class="js-carousel gallery_items" role="region" aria-label="{{ title|e('html_attr') }} Gallery" tabindex="0" data-carousel-options='{{ carousel_options }}'>
{% for item in items %}
<div class="gallery_item{% if item.caption is empty %} no_caption{% endif %}">
<figure class="gallery_item_figure" {% if item.caption %} aria-label="{{ item.caption|striptags }}" {% endif %}>
<span class="gallery_item_media">
{% render "@partial-image" with {
class: "gallery_item",
alt: "",
itemprop: "",
image: item.image,
sources: [
img.wide.lrg,
img.wide.med,
img.wide.sml,
img.wide.xsml,
img.wide.xxsml
]
} %}
{% if item.image_credit %}
<div class="gallery_item_image_credit">
<div class="gallery_item_image_credit_inner">
{{ item.image_credit }}
</div>
</div>
{% endif %}
{% if item.video %}
<a class="js-video-appender gallery_item_link" href="{{ item.video }}" target="_blank">
<span class="gallery_item_link_inner">
<span class="gallery_item_link_icon">{{ icon("play") }}</span>
<span class="gallery_item_link_label">Play</span>
</span>
</a>
{% endif %}
</span>
<figcaption class="gallery_details">
<div class="fs-row">
<div class="fs-cell fs-cell-contained fs-lg-9">
{% if items|length > 1 %}
<span class="js-gallery-index gallery_index">
<span class="js-gallery-current gallery_index_number">#</span>
<span class="gallery_index_label">of</span>
<span class="js-gallery-total gallery_index_number">#</span>
</span>
{% endif %}
{% if item.caption %}
<p class="gallery_item_caption">{{ item.caption }}</p>
{% endif %}
</div>
</div>
</figcaption>
</figure>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Gallery -->
No notes defined.