<div class="media_grid">
<div class="fs-row">
<div class="fs-cell fs-lg-11">
<div class="media_grid_inner">
<header class="media_grid_head">
<h2 class="media_grid_title">
Media Grid
</h2>
<div class="media_grid_desc typography">
Dining, arts & culture, shopping and beaches. Sarasota has something for everyone.
</div>
</header>
<div class="media_grid_sections">
<div class="media_grid_section">
<div class="media_grid_section_rows">
<div class="media_grid_row layout_70_30">
<div class="media_grid_item img_type_wide js-checkpoint" data-checkpoint-offset="100">
<div class="media_grid_item_iframe_wrap">
<iframe class="media_grid_item_iframe" title="Media Grid" src="//player.vimeo.com/video/374441340" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<div class="media_grid_item_caption">
<p>The Ringling Museum - a place of art, architecture, and circus in an environment that inspires, educates and entertains.</p>
</div>
</div>
<div class="media_grid_item img_type_portraitFull js-checkpoint" data-checkpoint-offset="100">
<div class="js-background media_grid_item_background" data-background-options='{"source": { "0px": "https://images.fastspot.com/new-college-of-florida/375x500/1", "500px": "https://images.fastspot.com/new-college-of-florida/555x740/1"}, "lazy": true, "alt": ""}' aria-hidden="true">
<div class="media_grid_item_background_fallback" style="background-image: url(' https://images.fastspot.com/new-college-of-florida/300x129/1');"></div>
</div>
<div class="media_grid_item_caption">
<p>From fine dining to casual, Sarasota has a wealth of dining options.</p>
</div>
</div>
</div>
</div>
</div>
<div class="media_grid_section">
<span class="media_grid_section_title">Beaches</span>
<div class="media_grid_section_rows">
<div class="media_grid_row layout_thirds">
<div class="media_grid_item img_type_wide js-checkpoint" data-checkpoint-offset="100">
<div class="js-background media_grid_item_background" data-background-options='{"source": { "0px": "https://images.fastspot.com/new-college-of-florida/500x282/3", "500px": "https://images.fastspot.com/new-college-of-florida/740x416/3", "740px": "https://images.fastspot.com/new-college-of-florida/980x552/3"}, "lazy": true, "alt": ""}' aria-hidden="true">
<div class="media_grid_item_background_fallback" style="background-image: url(' https://images.fastspot.com/new-college-of-florida/300x129/3');"></div>
</div>
<div class="media_grid_item_caption">
<p>Siesta Key.</p>
</div>
</div>
<div class="media_grid_item img_type_wide js-checkpoint" data-checkpoint-offset="100">
<div class="js-background media_grid_item_background" data-background-options='{"source": { "0px": "https://images.fastspot.com/new-college-of-florida/500x282/4", "500px": "https://images.fastspot.com/new-college-of-florida/740x416/4", "740px": "https://images.fastspot.com/new-college-of-florida/980x552/4"}, "lazy": true, "alt": ""}' aria-hidden="true">
<div class="media_grid_item_background_fallback" style="background-image: url(' https://images.fastspot.com/new-college-of-florida/300x129/4');"></div>
</div>
<div class="media_grid_item_caption">
<p>Sarasota Beach.</p>
</div>
</div>
<div class="media_grid_item img_type_wide js-checkpoint" data-checkpoint-offset="100">
<div class="js-background media_grid_item_background" data-background-options='{"source": { "0px": "https://images.fastspot.com/new-college-of-florida/500x282/5", "500px": "https://images.fastspot.com/new-college-of-florida/740x416/5", "740px": "https://images.fastspot.com/new-college-of-florida/980x552/5"}, "lazy": true, "alt": ""}' aria-hidden="true">
<div class="media_grid_item_background_fallback" style="background-image: url(' https://images.fastspot.com/new-college-of-florida/300x129/5');"></div>
</div>
<div class="media_grid_item_caption">
<p>Crescent Beach.</p>
</div>
</div>
</div>
<div class="media_grid_row layout_30_70">
<div class="media_grid_item img_type_portraitFull js-checkpoint" data-checkpoint-offset="100">
<div class="js-background media_grid_item_background" data-background-options='{"source": { "0px": "https://images.fastspot.com/new-college-of-florida/375x500/3", "500px": "https://images.fastspot.com/new-college-of-florida/555x740/3"}, "lazy": true, "alt": ""}' aria-hidden="true">
<div class="media_grid_item_background_fallback" style="background-image: url(' https://images.fastspot.com/new-college-of-florida/300x129/3');"></div>
</div>
<div class="media_grid_item_caption">
<p>From fine dining to casual, Sarasota has a wealth of dining options.</p>
</div>
</div>
<div class="media_grid_item img_type_wide js-checkpoint" data-checkpoint-offset="100">
<div class="js-background media_grid_item_background" data-background-options='{"source": { "0px": "https://images.fastspot.com/new-college-of-florida/500x282/4", "500px": "https://images.fastspot.com/new-college-of-florida/740x416/4", "740px": "https://images.fastspot.com/new-college-of-florida/980x552/4"}, "lazy": true, "alt": ""}' aria-hidden="true">
<div class="media_grid_item_background_fallback" style="background-image: url(' https://images.fastspot.com/new-college-of-florida/300x129/4');"></div>
</div>
<div class="media_grid_item_caption">
<p>The Ringling Museum — a place of art, architecture, and circus in an environment that inspires, educates, and entertains.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{%
set layout_manifest = {
"70_30": [
"portraitFull",
"wide"
],
"30_70": [
"wide",
"portraitFull"
],
"50_50": [
"full",
"full"
],
"thirds": [
"wide",
"wide",
"wide"
]
}
%}
<div class="media_grid">
<div class="fs-row">
<div class="fs-cell fs-lg-11">
<div class="media_grid_inner">
{% if title or description %}
<header class="media_grid_head">
{% if title %}
<h2 class="media_grid_title">
{{ title }}
</h2>
{% endif %}
{% if description %}
<div class="media_grid_desc typography">
{{ description }}
</div>
{% endif %}
</header>
{% endif %}
{% if sections %}
<div class="media_grid_sections">
{% for section in sections %}
<div class="media_grid_section">
{% if section.title %}
<span class="media_grid_section_title">{{ section.title }}</span>
{% endif %}
{% if section.rows %}
<div class="media_grid_section_rows">
{% for row in section.rows %}
<div class="media_grid_row layout_{{ row.layout }}">
{% for item in row.items %}
{% set is_even = loop.index is even %}
{% set layout_type = attribute(layout_manifest, row.layout) %}
{% set img_type = is_even ? layout_type[0] : layout_type[1] %}
{%
set media_grid_item_classes = [
"media_grid_item",
"img_type_" ~ img_type,
"js-checkpoint"
]
%}
<div class="{{ media_grid_item_classes|join(' ') }}" data-checkpoint-offset="100">
{% if item.video %}
<div class="media_grid_item_iframe_wrap">
<iframe class="media_grid_item_iframe" title="{{ title|e("html_attr") }}" src="//player.vimeo.com/video/{{ item.video }}" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
{% elseif item.image %}
{% if img_type == "wide" %}
{% include "@partial-background" with {
class: "media_grid_item",
image: item.image,
alt: item.alt_text,
sources: {
"0px": img.wide.xsml,
"500px": img.wide.sml,
"740px": img.wide.med,
}
} %}
{% elseif img_type == "portraitFull" %}
{% include "@partial-background" with {
class: "media_grid_item",
image: item.image,
alt: item.alt_text,
sources: {
"0px": img.portraitFull.xsml,
"500px": img.portraitFull.sml,
}
} %}
{% else %}
{% include "@partial-background" with {
class: "media_grid_item",
image: item.image,
alt: item.alt_text,
sources: {
"0px": img.full.xsml,
"500px": img.full.sml,
"740px": img.full.med,
}
} %}
{% endif %}
{% endif %}
{% if item.caption %}
<div class="media_grid_item_caption">
{{ item.caption }}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
No notes defined.