<!-- 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">
<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>
<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 class="gallery_item">
<figure class="gallery_item_figure" aria-label="Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.">
<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/2" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/2 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/2 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/2 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/2 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/2 1220w" alt="">
</span>
<noscript>
<img class="gallery_item_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/2" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/2 1220w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/2 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/2 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/2 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/2 300w" sizes="100vw" alt="">
</noscript>
<a class="js-video-appender gallery_item_link" href="https://www.youtube.com/embed/XPjQhvjQbSM" target="_blank">
<span class="gallery_item_link_inner">
<span class="gallery_item_link_icon">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
<span class="gallery_item_link_label">Play</span>
</span>
</a>
</span>
<figcaption class="gallery_details">
<div class="fs-row">
<div class="fs-cell fs-cell-contained fs-lg-9">
<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>
<p class="gallery_item_caption">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure" aria-label="Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.">
<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/3" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/3 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/3 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/3 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/3 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/3 1220w" alt="">
</span>
<noscript>
<img class="gallery_item_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/3" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/3 1220w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/3 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/3 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/3 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/3 300w" sizes="100vw" alt="">
</noscript>
<a class="js-video-appender gallery_item_link" href="https://www.youtube.com/embed/XPjQhvjQbSM" target="_blank">
<span class="gallery_item_link_inner">
<span class="gallery_item_link_icon">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
<span class="gallery_item_link_label">Play</span>
</span>
</a>
</span>
<figcaption class="gallery_details">
<div class="fs-row">
<div class="fs-cell fs-cell-contained fs-lg-9">
<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>
<p class="gallery_item_caption">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure" aria-label="Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.">
<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/4" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/4 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/4 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/4 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/4 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/4 1220w" alt="">
</span>
<noscript>
<img class="gallery_item_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/4" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/4 1220w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/4 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/4 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/4 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/4 300w" sizes="100vw" alt="">
</noscript>
</span>
<figcaption class="gallery_details">
<div class="fs-row">
<div class="fs-cell fs-cell-contained fs-lg-9">
<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>
<p class="gallery_item_caption">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="gallery_item">
<figure class="gallery_item_figure" aria-label="Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.">
<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>
</span>
<figcaption class="gallery_details">
<div class="fs-row">
<div class="fs-cell fs-cell-contained fs-lg-9">
<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>
<p class="gallery_item_caption">Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</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.