Washington National Cathedral Component Library

Feature Gallery 

<div class="js-feature-gallery feature_gallery">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="feature_gallery_inner">
                <div class="feature_gallery_header">
                    <h2 class="feature_gallery_label">Explore</h2>
                    <span class="feature_gallery_divider">
                        <svg class="icon icon_pattern">
                            <use href="/images/icons.svg#pattern" />
                        </svg>
                    </span>
                    <h3 class="feature_gallery_title">Interior & Exterior Features</h3>
                    <div class="feature_gallery_caption">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus.</div>
                </div>
                <div class="feature_gallery_carousel_wrapper">
                    <div class="js-carousel feature_gallery_items" data-carousel-options='{"contained":false,"controls":true,"pagination":false,"show":{"980px":3,"1220px":4}}'>
                        <div class="feature_gallery_item">
                            <figure class="feature_gallery_item_figure">
                                <span class="feature_gallery_item_media_wrapper">
                                    <span class="feature_gallery_item_media gallery_item_size_">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x740/1 740w, https://images.fastspot.com/washington-national-cathedral/500x500/1 500w, https://images.fastspot.com/washington-national-cathedral/300x300/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x300/1" alt="" loading="lazy" width="300" height="300">
                                    </span>

                                    <a class="feature_gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/2" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/2" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x416/2" data-crop="wide" data-lightbox-group="space-window" data-title="Title 1" data-lightbox-caption="group 1, image 1 Donec id elit non mi porta gravida at eget metus.">
                                        <span class="feature_gallery_item_lightbox_link_inner">
                                            <span class="feature_gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                            <span class="feature_gallery_item_lightbox_link_label">4</span>
                                        </span>
                                    </a>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/814x1220/3" data-url="https://images.fastspot.com/washington-national-cathedral/814x1220/3" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/494x740/3" data-crop="portrait" data-lightbox-group="space-window" data-lightbox-caption="group 1 image 2 Nullam id dolor id nibh ultricies vehicula ut id elit."></span>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" 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/740x416/4" data-crop="wide" data-lightbox-group="space-window" data-title="Title 3" data-lightbox-caption="group 1 image 3 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."></span>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/814x1220/5" data-url="https://images.fastspot.com/washington-national-cathedral/814x1220/5" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/494x740/5" data-crop="portrait" data-lightbox-group="space-window" data-lightbox-caption="group 1 image 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit."></span>

                                </span>
                                <figcaption class="feature_gallery_item_caption">
                                    <span class="feature_gallery_item_caption_link">
                                        Space Window
                                    </span>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="feature_gallery_item">
                            <figure class="feature_gallery_item_figure">
                                <span class="feature_gallery_item_media_wrapper">
                                    <span class="feature_gallery_item_media gallery_item_size_">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x740/6 740w, https://images.fastspot.com/washington-national-cathedral/500x500/6 500w, https://images.fastspot.com/washington-national-cathedral/300x300/6 300w" src="https://images.fastspot.com/washington-national-cathedral/300x300/6" alt="" loading="lazy" width="300" height="300">
                                    </span>

                                    <a class="feature_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/740x416/7" data-crop="wide" data-lightbox-group="great-choir-wood-carvings" data-lightbox-caption="group 2 image 1 Donec id elit non mi porta gravida at eget metus.">
                                        <span class="feature_gallery_item_lightbox_link_inner">
                                            <span class="feature_gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                            <span class="feature_gallery_item_lightbox_link_label">4</span>
                                        </span>
                                    </a>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/814x1220/3" data-url="https://images.fastspot.com/washington-national-cathedral/814x1220/3" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/494x740/3" data-crop="portrait" data-lightbox-group="great-choir-wood-carvings" data-title="Title 2" data-lightbox-caption="group 2 image 2 Nullam id dolor id nibh ultricies vehicula ut id elit."></span>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/1440x810/9" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/9" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x416/9" data-crop="wide" data-lightbox-group="great-choir-wood-carvings" data-lightbox-caption="group 2 image 3 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."></span>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/814x1220/10" data-url="https://images.fastspot.com/washington-national-cathedral/814x1220/10" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/494x740/10" data-crop="portrait" data-lightbox-group="great-choir-wood-carvings" data-lightbox-caption="group 2 image 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit."></span>

                                </span>
                                <figcaption class="feature_gallery_item_caption">
                                    <span class="feature_gallery_item_caption_link">
                                        Great Choir Wood Carvings
                                    </span>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="feature_gallery_item">
                            <figure class="feature_gallery_item_figure">
                                <span class="feature_gallery_item_media_wrapper">
                                    <span class="feature_gallery_item_media gallery_item_size_">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x740/11 740w, https://images.fastspot.com/washington-national-cathedral/500x500/11 500w, https://images.fastspot.com/washington-national-cathedral/300x300/11 300w" src="https://images.fastspot.com/washington-national-cathedral/300x300/11" alt="" loading="lazy" width="300" height="300">
                                    </span>

                                    <a class="feature_gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/12" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/12" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x416/12" data-crop="wide" data-lightbox-group="civic-sculpture" data-lightbox-caption="Donec id elit non mi porta gravida at eget metus.">
                                        <span class="feature_gallery_item_lightbox_link_inner">
                                            <span class="feature_gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                            <span class="feature_gallery_item_lightbox_link_label">4</span>
                                        </span>
                                    </a>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/814x1220/13" data-url="https://images.fastspot.com/washington-national-cathedral/814x1220/13" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/494x740/13" data-crop="portrait" data-lightbox-group="civic-sculpture" data-lightbox-caption="Nullam id dolor id nibh ultricies vehicula ut id elit."></span>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/1440x810/14" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/14" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x416/14" data-crop="wide" data-lightbox-group="civic-sculpture" data-lightbox-caption="Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."></span>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/814x1220/15" data-url="https://images.fastspot.com/washington-national-cathedral/814x1220/15" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/494x740/15" data-crop="portrait" data-lightbox-group="civic-sculpture" data-title="Title 4" data-lightbox-caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></span>

                                </span>
                                <figcaption class="feature_gallery_item_caption">
                                    <span class="feature_gallery_item_caption_link">
                                        Civic Sculpture
                                    </span>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="feature_gallery_item">
                            <figure class="feature_gallery_item_figure">
                                <span class="feature_gallery_item_media_wrapper">
                                    <span class="feature_gallery_item_media gallery_item_size_">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x740/16 740w, https://images.fastspot.com/washington-national-cathedral/500x500/16 500w, https://images.fastspot.com/washington-national-cathedral/300x300/16 300w" src="https://images.fastspot.com/washington-national-cathedral/300x300/16" alt="" loading="lazy" width="300" height="300">
                                    </span>

                                    <a class="feature_gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/17" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/17" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x416/17" data-crop="wide" data-lightbox-group="human-rights-porch" data-title="Title 1" data-lightbox-caption="Donec id elit non mi porta gravida at eget metus.">
                                        <span class="feature_gallery_item_lightbox_link_inner">
                                            <span class="feature_gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                            <span class="feature_gallery_item_lightbox_link_label">4</span>
                                        </span>
                                    </a>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/814x1220/18" data-url="https://images.fastspot.com/washington-national-cathedral/814x1220/18" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/494x740/18" data-crop="portrait" data-lightbox-group="human-rights-porch" data-lightbox-caption="Nullam id dolor id nibh ultricies vehicula ut id elit."></span>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/1440x810/19" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/19" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x416/19" data-crop="wide" data-lightbox-group="human-rights-porch" data-lightbox-caption="Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."></span>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/814x1220/20" data-url="https://images.fastspot.com/washington-national-cathedral/814x1220/20" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/494x740/20" data-crop="portrait" data-lightbox-group="human-rights-porch" data-lightbox-caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></span>

                                </span>
                                <figcaption class="feature_gallery_item_caption">
                                    <span class="feature_gallery_item_caption_link">
                                        Human Rights Porch
                                    </span>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="feature_gallery_item">
                            <figure class="feature_gallery_item_figure">
                                <span class="feature_gallery_item_media_wrapper">
                                    <span class="feature_gallery_item_media gallery_item_size_">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x740/21 740w, https://images.fastspot.com/washington-national-cathedral/500x500/21 500w, https://images.fastspot.com/washington-national-cathedral/300x300/21 300w" src="https://images.fastspot.com/washington-national-cathedral/300x300/21" alt="" loading="lazy" width="300" height="300">
                                    </span>

                                    <a class="feature_gallery_item_lightbox_link js-lightbox" href="https://images.fastspot.com/washington-national-cathedral/1440x810/22" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/22" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x416/22" data-crop="wide" data-lightbox-group="rose-window" data-lightbox-caption="Donec id elit non mi porta gravida at eget metus.">
                                        <span class="feature_gallery_item_lightbox_link_inner">
                                            <span class="feature_gallery_item_lightbox_link_icon">
                                                <svg class="icon icon_images">
                                                    <use href="/images/icons.svg#images" />
                                                </svg>
                                            </span>
                                            <span class="feature_gallery_item_lightbox_link_label">4</span>
                                        </span>
                                    </a>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/814x1220/23" data-url="https://images.fastspot.com/washington-national-cathedral/814x1220/23" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/494x740/23" data-crop="portrait" data-lightbox-group="rose-window" data-title="Title 2" data-lightbox-caption="Nullam id dolor id nibh ultricies vehicula ut id elit."></span>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/1440x810/24" data-url="https://images.fastspot.com/washington-national-cathedral/1440x810/24" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/740x416/24" data-crop="wide" data-lightbox-group="rose-window" data-lightbox-caption="Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."></span>

                                    <span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="https://images.fastspot.com/washington-national-cathedral/814x1220/25" data-url="https://images.fastspot.com/washington-national-cathedral/814x1220/25" data-mobile-url="https://images.fastspot.com/washington-national-cathedral/494x740/25" data-crop="portrait" data-lightbox-group="rose-window" data-lightbox-caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></span>

                                </span>
                                <figcaption class="feature_gallery_item_caption">
                                    <span class="feature_gallery_item_caption_link">
                                        Rose Window
                                    </span>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                </div>
                <div class="feature_gallery_more">
                    <button class="js-swap feature_gallery_more_button" type="button" data-swap-target=".feature_gallery">More</button>
                </div>
            </div>
        </div>
    </div>
</div>
 
{%
	set carousel_options = {
		contained: false,
		controls: true,
		pagination: false,
		show: {
			"980px": 3,
			"1220px": 4,
		}
	}
%}

{% set carousel_options = carousel_options|json_encode %}

<div class="js-feature-gallery feature_gallery">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="feature_gallery_inner">
				<div class="feature_gallery_header">
					<h2 class="feature_gallery_label">{{ label }}</h2>
					<span class="feature_gallery_divider">{{ icon("pattern") }}</span>
					<h3 class="feature_gallery_title">{{ title }}</h3>
					<div class="feature_gallery_caption">{{ description }}</div>
				</div>
				<div class="feature_gallery_carousel_wrapper">
					<div class="js-carousel feature_gallery_items" data-carousel-options='{{ carousel_options }}'>
					{% for item in items %}
						<div class="feature_gallery_item">
							<figure class="feature_gallery_item_figure">
								<span class="feature_gallery_item_media_wrapper">
									<span class="feature_gallery_item_media gallery_item_size_{{ img_size }}">
										{% include '@partial-image' with {
										class: 'gallery_item',
										alt: '',
										image: item.cover_image,
										loading: 'lazy',
										sources: [
											img.square.sml,
											img.square.xsml,
											img.square.xxsml
										]
										} %}
									</span>
									{% for image in item.images %}
										{% if image.crop == 'wide' %}
											{% set href = "https://images.fastspot.com/washington-national-cathedral/" ~ img.wide.xlrg.width ~ 'x' ~ img.wide.xlrg.height ~ '/' ~ image.image %}
											{% set mobile_url = "https://images.fastspot.com/washington-national-cathedral/" ~ img.wide.sml.width ~ 'x' ~ img.wide.sml.height ~ '/' ~ image.image %}
										{% else %}
											{% set href = "https://images.fastspot.com/washington-national-cathedral/" ~ img.portraitClassic.lrg.width ~ 'x' ~ img.portraitClassic.lrg.height ~ '/' ~ image.image %}
											{% set mobile_url = "https://images.fastspot.com/washington-national-cathedral/" ~ img.portraitClassic.sml.width ~ 'x' ~ img.portraitClassic.sml.height ~ '/' ~ image.image %}
										{% endif %}

										{% if loop.index == 1 %}
											<a class="feature_gallery_item_lightbox_link js-lightbox" href="{{ href }}" data-url="{{ href }}" data-mobile-url="{{ mobile_url }}" data-crop="{{ image.crop }}" data-lightbox-group="{{ item.title|lower|replace({ ' ': '-' }) }}"{% if image.title %} data-title="{{ image.title }}"{% endif %}{% if image.caption %} data-lightbox-caption="{{ image.caption }}"{% endif %}>
												<span class="feature_gallery_item_lightbox_link_inner">
													<span class="feature_gallery_item_lightbox_link_icon">{{ icon("images") }}</span>
													<span class="feature_gallery_item_lightbox_link_label">{{ item.images|length }}</span>
												</span>
											</a>
										{% else %}
											<span class="feature_gallery_item_lightbox_item_hidden js-lightbox" aria-hidden="true" href="{{ href }}" data-url="{{ href }}" data-mobile-url="{{ mobile_url }}" data-crop="{{ image.crop }}" data-lightbox-group="{{ item.title|lower|replace({ ' ': '-' }) }}"{% if image.title %} data-title="{{ image.title }}"{% endif %}{% if image.caption %} data-lightbox-caption="{{ image.caption }}"{% endif %}></span>
										{% endif %}

									{% endfor %}
								</span>
								<figcaption class="feature_gallery_item_caption">
									<span class="feature_gallery_item_caption_link">
										{{ item.title }}
									</span>
								</figcaption>
							</figure>
						</div>
					{% endfor %}
					</div>
				</div>
				<div class="feature_gallery_more">
					<button class="js-swap feature_gallery_more_button" type="button" data-swap-target=".feature_gallery">More</button>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.