Washington National Cathedral Component Library

Gallery 

<!-- Gallery -->
<div class="gallery">
    <div class="gallery_header">
        <div class="fs-row">
            <div class="fs-cell fs-lg-8 fs-lg-justify-center">
                <div class="gallery_header_inner">
                    <span class="gallery_header_subhead">Gallery</span>
                    <span class="gallery_header_divider">
                        <svg class="icon icon_pattern">
                            <use href="/images/icons.svg#pattern" />
                        </svg>
                    </span>
                    <h2 class="gallery_title">Explore the Great Organ</h2>
                </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_70_30">
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <span class="gallery_item_media gallery_item_size_wide">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/1440x810/1 1440w, https://images.fastspot.com/washington-national-cathedral/1220x686/1 1220w, https://images.fastspot.com/washington-national-cathedral/980x552/1 980w, https://images.fastspot.com/washington-national-cathedral/740x416/1 740w, https://images.fastspot.com/washington-national-cathedral/500x282/1 500w, https://images.fastspot.com/washington-national-cathedral/300x169/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x169/1" alt="" loading="lazy" width="300" height="169">
                                        <a class="gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/1" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/1" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x/1" data-crop="wide" data-lightbox-group="explore-the-great-organ" data-lightbox-caption="Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec <a href='#'>ullamcorper nulla non metus auctor fringilla</a>.">
                                            <span class="gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                        </a>
                                    </span>
                                    <figcaption class="gallery_item_caption">
                                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec <a href='#'>ullamcorper nulla non metus auctor fringilla</a>.</p>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <span class="gallery_item_media gallery_item_size_portrait">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/735x980/2 735w, https://images.fastspot.com/washington-national-cathedral/555x740/2 555w, https://images.fastspot.com/washington-national-cathedral/375x500/2 375w, https://images.fastspot.com/washington-national-cathedral/225x300/2 225w" src="https://images.fastspot.com/washington-national-cathedral/225x300/2" alt="" loading="lazy" width="225" height="300">
                                        <a class="gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/814x1220/2" data-url="https://images.fastspot.com/washington-national-cathedral/814x1220/2" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/494x/2" data-crop="portrait" data-lightbox-group="explore-the-great-organ" data-lightbox-caption="Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.">
                                            <span class="gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                        </a>
                                    </span>
                                    <figcaption class="gallery_item_caption">
                                        <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
                                    </figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="gallery_row grid_layout_50_50">
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <span class="gallery_item_media gallery_item_size_wide">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/980x552/3 980w, https://images.fastspot.com/washington-national-cathedral/740x416/3 740w, https://images.fastspot.com/washington-national-cathedral/500x282/3 500w, https://images.fastspot.com/washington-national-cathedral/300x169/3 300w" src="https://images.fastspot.com/washington-national-cathedral/300x169/3" alt="" loading="lazy" width="300" height="169">
                                        <a class="gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/3" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/3" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x/3" data-crop="wide" data-lightbox-group="explore-the-great-organ">
                                            <span class="gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                        </a>
                                    </span>
                                </figure>
                            </div>
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <span class="gallery_item_media gallery_item_size_wide">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/980x552/4 980w, https://images.fastspot.com/washington-national-cathedral/740x416/4 740w, https://images.fastspot.com/washington-national-cathedral/500x282/4 500w, https://images.fastspot.com/washington-national-cathedral/300x169/4 300w" src="https://images.fastspot.com/washington-national-cathedral/300x169/4" alt="" loading="lazy" width="300" height="169">
                                        <a class="gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/4" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/4" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x/4" data-crop="wide" data-lightbox-group="explore-the-great-organ" data-lightbox-caption="Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.">
                                            <span class="gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                        </a>
                                    </span>
                                    <figcaption class="gallery_item_caption">
                                        <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
                                    </figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="gallery_row grid_layout_100">
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <span class="gallery_item_media gallery_item_size_wide">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/1440x810/5 1440w, https://images.fastspot.com/washington-national-cathedral/1220x686/5 1220w, https://images.fastspot.com/washington-national-cathedral/980x552/5 980w, https://images.fastspot.com/washington-national-cathedral/740x416/5 740w, https://images.fastspot.com/washington-national-cathedral/500x282/5 500w, https://images.fastspot.com/washington-national-cathedral/300x169/5 300w" src="https://images.fastspot.com/washington-national-cathedral/300x169/5" alt="" loading="lazy" width="300" height="169">
                                        <a class="gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/5" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/5" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x/5" data-crop="wide" data-lightbox-group="explore-the-great-organ" data-lightbox-caption="Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.">
                                            <span class="gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                        </a>
                                    </span>
                                    <figcaption class="gallery_item_caption">
                                        <p>Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
                                    </figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="gallery_row grid_layout_30_70">
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <span class="gallery_item_media gallery_item_size_portrait">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/735x980/6 735w, https://images.fastspot.com/washington-national-cathedral/555x740/6 555w, https://images.fastspot.com/washington-national-cathedral/375x500/6 375w, https://images.fastspot.com/washington-national-cathedral/225x300/6 225w" src="https://images.fastspot.com/washington-national-cathedral/225x300/6" alt="" loading="lazy" width="225" height="300">
                                        <a class="gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/814x1220/6" data-url="https://images.fastspot.com/washington-national-cathedral/814x1220/6" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/494x/6" data-crop="portrait" data-lightbox-group="explore-the-great-organ" data-lightbox-caption="Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec <a href='#'>ullamcorper nulla non metus auctor fringilla</a>.">
                                            <span class="gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                        </a>
                                    </span>
                                    <figcaption class="gallery_item_caption">
                                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec <a href='#'>ullamcorper nulla non metus auctor fringilla</a>.</p>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <span class="gallery_item_media gallery_item_size_wide">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/1440x810/7 1440w, https://images.fastspot.com/washington-national-cathedral/1220x686/7 1220w, https://images.fastspot.com/washington-national-cathedral/980x552/7 980w, https://images.fastspot.com/washington-national-cathedral/740x416/7 740w, https://images.fastspot.com/washington-national-cathedral/500x282/7 500w, https://images.fastspot.com/washington-national-cathedral/300x169/7 300w" src="https://images.fastspot.com/washington-national-cathedral/300x169/7" alt="" loading="lazy" width="300" height="169">
                                        <a class="gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/7" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/7" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x/7" data-crop="wide" data-lightbox-group="explore-the-great-organ" data-lightbox-caption="Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.">
                                            <span class="gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                        </a>
                                    </span>
                                    <figcaption class="gallery_item_caption">
                                        <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
                                    </figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="gallery_row grid_layout_quarters">
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <span class="gallery_item_media gallery_item_size_classic">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/980x654/8 980w, https://images.fastspot.com/washington-national-cathedral/740x494/8 740w, https://images.fastspot.com/washington-national-cathedral/500x334/8 500w, https://images.fastspot.com/washington-national-cathedral/300x200/8 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/8" alt="" loading="lazy" width="300" height="200">
                                        <a class="gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x960/8" data-url="https://images.fastspot.com/washington-national-cathedral/1440x960/8" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x/8" data-crop="classic" data-lightbox-group="explore-the-great-organ" data-lightbox-caption="Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec <a href='#'>ullamcorper nulla non metus auctor fringilla</a>.">
                                            <span class="gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                        </a>
                                    </span>
                                    <figcaption class="gallery_item_caption">
                                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec <a href='#'>ullamcorper nulla non metus auctor fringilla</a>.</p>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <span class="gallery_item_media gallery_item_size_classic">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/980x654/9 980w, https://images.fastspot.com/washington-national-cathedral/740x494/9 740w, https://images.fastspot.com/washington-national-cathedral/500x334/9 500w, https://images.fastspot.com/washington-national-cathedral/300x200/9 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/9" alt="" loading="lazy" width="300" height="200">
                                        <a class="gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x960/9" data-url="https://images.fastspot.com/washington-national-cathedral/1440x960/9" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x/9" data-crop="classic" data-lightbox-group="explore-the-great-organ" data-lightbox-caption="Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.">
                                            <span class="gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                        </a>
                                    </span>
                                    <figcaption class="gallery_item_caption">
                                        <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <span class="gallery_item_media gallery_item_size_classic">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/980x654/10 980w, https://images.fastspot.com/washington-national-cathedral/740x494/10 740w, https://images.fastspot.com/washington-national-cathedral/500x334/10 500w, https://images.fastspot.com/washington-national-cathedral/300x200/10 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/10" alt="" loading="lazy" width="300" height="200">
                                        <a class="gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x960/10" data-url="https://images.fastspot.com/washington-national-cathedral/1440x960/10" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x/10" data-crop="classic" data-lightbox-group="explore-the-great-organ" data-lightbox-caption="Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec <a href='#'>ullamcorper nulla non metus auctor fringilla</a>.">
                                            <span class="gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                        </a>
                                    </span>
                                    <figcaption class="gallery_item_caption">
                                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec <a href='#'>ullamcorper nulla non metus auctor fringilla</a>.</p>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <span class="gallery_item_media gallery_item_size_classic">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/980x654/11 980w, https://images.fastspot.com/washington-national-cathedral/740x494/11 740w, https://images.fastspot.com/washington-national-cathedral/500x334/11 500w, https://images.fastspot.com/washington-national-cathedral/300x200/11 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/11" alt="" loading="lazy" width="300" height="200">
                                        <a class="gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x960/11" data-url="https://images.fastspot.com/washington-national-cathedral/1440x960/11" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x/11" data-crop="classic" data-lightbox-group="explore-the-great-organ" data-lightbox-caption="Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.">
                                            <span class="gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                        </a>
                                    </span>
                                    <figcaption class="gallery_item_caption">
                                        <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
                                    </figcaption>
                                </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: '',
						caption: 'caption'
					}
				]
			}
		]
	} %}
#}

{%
	set layout_sizes = {
		"70_30": [
			"wide",
			"portrait"
		],
		"30_70": [
			"portrait",
			"wide"
		],
		"50_50": [
			"wide",
			"wide"
		],
		"100": [
			"wide"
		],
		"quarters": [
			"classic",
			"classic",
			"classic",
			"classic"
		]
	}
%}

<!-- Gallery -->
<div class="gallery">
	{% if title or description %}
		<div class="gallery_header">
			<div class="fs-row">
				<div class="fs-cell fs-lg-8 fs-lg-justify-center">
					<div class="gallery_header_inner">
						<span class="gallery_header_subhead">Gallery</span>
						<span class="gallery_header_divider">{{ icon("pattern") }}</span>
						{% 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 %}
							<div class="gallery_row grid_layout_{{ row.layout }}">
								{% for item in row.items %}
									{% set img_size = attribute(layout_sizes, row.layout)[ loop.index0 ] %}
									<div class="gallery_item">
										<figure class="gallery_item_figure">
											<span class="gallery_item_media gallery_item_size_{{ img_size }}">
												{% if img_size == "wide" %}
													{% set href = "https://images.fastspot.com/washington-national-cathedral/" ~ img.wide.xlrg.width ~ 'x' ~ img.wide.xlrg.height ~ '/' ~ item.image %}
													{% set mobile_url = "https://images.fastspot.com/washington-national-cathedral/" ~ img.wide.sml.width ~ 'x' ~ item.wide.sml.height ~ '/' ~ item.image %}
													{% set crop = "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 %}
												{% elseif img_size == "classic" %}
													{% set href = "https://images.fastspot.com/washington-national-cathedral/" ~ img.classic.xlrg.width ~ 'x' ~ img.classic.xlrg.height ~ '/' ~ item.image %}
													{% set mobile_url = "https://images.fastspot.com/washington-national-cathedral/" ~ img.classic.sml.width ~ 'x' ~ item.classic.sml.height ~ '/' ~ item.image %}
													{% set crop = "classic" %}
													{% include '@partial-image' with {
														class: 'gallery_item',
														alt: '',
														image: item.image,
														loading: 'lazy',
														sources: [
															img.classic.med,
															img.classic.sml,
															img.classic.xsml,
															img.classic.xxsml
														]
													} %}
												{% else %}
													{% set href = "https://images.fastspot.com/washington-national-cathedral/" ~ img.portraitClassic.lrg.width ~ 'x' ~ img.portraitClassic.lrg.height ~ '/' ~ item.image %}
													{% set mobile_url = "https://images.fastspot.com/washington-national-cathedral/" ~ img.portraitClassic.sml.width ~ 'x' ~ item.portraitClassic.sml.height ~ '/' ~ item.image %}
													{% set crop = "portrait" %}
													{% 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 %}
												<a class="gallery_item_lightbox_link js-lightbox" href="{{ href }}" data-url="{{ href }}" data-mobile-url="{{ mobile_url }}" data-crop="{{ crop }}" data-lightbox-group="{{ title|lower|replace({ ' ': '-' }) }}"{% if item.title %} data-title="{{ item.title }}"{% endif %}{% if item.caption %} data-lightbox-caption="{{ item.caption }}"{% endif %}>
													<span class="gallery_item_lightbox_link_icon">{{ icon("images") }}</span>
												</a>
											</span>
											{% if item.caption %}
												<figcaption class="gallery_item_caption">
													<p>{{ item.caption }}</p>
												</figcaption>
											{% endif %}
										</figure>
									</div>
								{% endfor %}
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Gallery -->

No notes defined.