VCUarts Component Library

Gallery 

<!-- Gallery -->
<div class="gallery">
    <div class="gallery_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="gallery_header_inner">
                    <div class="gallery_title">
                        <h2 class="gallery_title_primary">Campus Life</h2>
                        <p class="gallery_title_secondary">Ipsum Consectetur Pharetra Purus</p>
                    </div>
                    <div class="gallery_description">
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
                    </div>
                </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 gallery_row_layout_70_30">
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <div class="gallery_item_media">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/vcuarts/1440x810/1 1440w, https://images.fastspot.com/vcuarts/1220x686/1 1220w, https://images.fastspot.com/vcuarts/980x552/1 980w, https://images.fastspot.com/vcuarts/740x416/1 740w, https://images.fastspot.com/vcuarts/500x282/1 500w, https://images.fastspot.com/vcuarts/300x169/1 300w" sizes="(min-width: 740px) 48vw, 98vw" src="https://images.fastspot.com/vcuarts/300x169/1" alt="" loading="lazy" width="300" height="169">

                                        <div class="gallery_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"XPjQhvjQbSM","type":"youtube","title":"Fastspot, Our Methodology","display":"inline","autoplay":false,"playerVars":{}}'>
                                            <a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=XPjQhvjQbSM" aria-label="Play Fastspot, Our Methodology">
                                                <span class="lazy_video_toggle_btn_icon">
                                                    <svg class="icon icon_play">
                                                        <use href="/images/icons.svg#play" />
                                                    </svg>
                                                </span>
                                            </a>
                                            <div class="lazy_video_iframe_wrap">
                                                <div class="lazy_video_iframe_target js-iframe-target"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <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">
                                    <div class="gallery_item_media">

                                        <img class="gallery_image" srcset="https://images.fastspot.com/vcuarts/1024x1024/2 1024w, https://images.fastspot.com/vcuarts/768x768/2 740w, https://images.fastspot.com/vcuarts/300x300/2 300w" sizes="(min-width: 740px) 25vw, 98vw" src="https://images.fastspot.com/vcuarts/300x300/2" alt="a bright pink and orange sunrise sky behind campus clock tower" loading="lazy" width="300" height="300">
                                    </div>
                                    <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 gallery_row_layout_50_50">
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <div class="gallery_item_media">

                                        <img class="gallery_image" srcset="https://images.fastspot.com/vcuarts/1024x1024/3 1024w, https://images.fastspot.com/vcuarts/768x768/3 740w, https://images.fastspot.com/vcuarts/300x300/3 300w" sizes="(min-width: 740px) 36vw, 98vw" src="https://images.fastspot.com/vcuarts/300x300/3" alt="a full stadium" loading="lazy" width="300" height="300">
                                    </div>
                                </figure>
                            </div>
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <div class="gallery_item_media">

                                        <img class="gallery_image" srcset="https://images.fastspot.com/vcuarts/1024x1024/4 1024w, https://images.fastspot.com/vcuarts/768x768/4 740w, https://images.fastspot.com/vcuarts/300x300/4 300w" sizes="(min-width: 740px) 36vw, 98vw" src="https://images.fastspot.com/vcuarts/300x300/4" alt="A student sits on a leaf-littered Drillfield, adorned by the colors of autumn" loading="lazy" width="300" height="300">
                                    </div>
                                    <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 gallery_row_layout_100">
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <div class="gallery_item_media">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/vcuarts/1440x810/5 1440w, https://images.fastspot.com/vcuarts/1220x686/5 1220w, https://images.fastspot.com/vcuarts/980x552/5 980w, https://images.fastspot.com/vcuarts/740x416/5 740w, https://images.fastspot.com/vcuarts/500x282/5 500w, https://images.fastspot.com/vcuarts/300x169/5 300w" sizes="(min-width: 740px) 76vw, 98vw" src="https://images.fastspot.com/vcuarts/300x169/5" alt="red neon sign of Fastspot logo" loading="lazy" width="300" height="169">

                                        <div class="gallery_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"258133523","type":"vimeo","title":"Fastspot Moments","display":"inline","autoplay":false,"playerVars":{}}'>
                                            <a class="lazy_video_toggle_btn js-play-btn" href="https://vimeo.com/258133523" aria-label="Play Fastspot Moments">
                                                <span class="lazy_video_toggle_btn_icon">
                                                    <svg class="icon icon_play">
                                                        <use href="/images/icons.svg#play" />
                                                    </svg>
                                                </span>
                                            </a>
                                            <div class="lazy_video_iframe_wrap">
                                                <div class="lazy_video_iframe_target js-iframe-target"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <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 gallery_row_layout_30_30_30">
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <div class="gallery_item_media">

                                        <img class="gallery_image" srcset="https://images.fastspot.com/vcuarts/1024x1024/9 1024w, https://images.fastspot.com/vcuarts/768x768/9 740w, https://images.fastspot.com/vcuarts/300x300/9 300w" sizes="(min-width: 740px) 25vw, 98vw" src="https://images.fastspot.com/vcuarts/300x300/9" alt="Homecoming parade" loading="lazy" width="300" height="300">
                                    </div>
                                    <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">
                                    <div class="gallery_item_media">

                                        <img class="gallery_image" srcset="https://images.fastspot.com/vcuarts/1024x1024/10 1024w, https://images.fastspot.com/vcuarts/768x768/10 740w, https://images.fastspot.com/vcuarts/300x300/10 300w" sizes="(min-width: 740px) 25vw, 98vw" src="https://images.fastspot.com/vcuarts/300x300/10" alt="Fall scenic shot of the Drillfield" loading="lazy" width="300" height="300">
                                    </div>
                                    <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">
                                    <div class="gallery_item_media">

                                        <img class="gallery_image" srcset="https://images.fastspot.com/vcuarts/1024x1024/11 1024w, https://images.fastspot.com/vcuarts/768x768/11 740w, https://images.fastspot.com/vcuarts/300x300/11 300w" sizes="(min-width: 740px) 25vw, 98vw" src="https://images.fastspot.com/vcuarts/300x300/11" alt="Fall scenic shot of the Drillfield" loading="lazy" width="300" height="300">
                                    </div>
                                </figure>
                            </div>
                        </div>
                        <div class="gallery_row gallery_row_layout_30_70">
                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <div class="gallery_item_media">

                                        <img class="gallery_image" srcset="https://images.fastspot.com/vcuarts/1024x1024/6 1024w, https://images.fastspot.com/vcuarts/768x768/6 740w, https://images.fastspot.com/vcuarts/300x300/6 300w" sizes="(min-width: 740px) 25vw, 98vw" src="https://images.fastspot.com/vcuarts/300x300/6" alt="Homecoming parade" loading="lazy" width="300" height="300">
                                    </div>
                                    <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">
                                    <div class="gallery_item_media">

                                        <img class="gallery_image" srcset="https://images.fastspot.com/vcuarts/1024x1024/8 1024w, https://images.fastspot.com/vcuarts/768x768/8 740w, https://images.fastspot.com/vcuarts/300x300/8 300w" sizes="(min-width: 740px) 50vw, 98vw" src="https://images.fastspot.com/vcuarts/300x300/8" alt="Fall scenic shot of the Drillfield" loading="lazy" width="300" height="300">
                                    </div>
                                    <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 {
		page_nav_id: '',
		title: 'Title Primary',
		secondary_title: 'Title Secondary',
		description: 'Description',
		rows: [
			{
				layout: '100',
				items: [
					{
						image: '1',
						alt: '',
						video: {
							type: '',
							id: '',
							title: ''
						},
						caption: 'caption'
					}
				]
			}
		]
	} %}
#}

{%
	set layout_sizes = {
		"70_30": [
			"70",
			"30"
		],
		"30_70": [
			"30",
			"70"
		],
		"30_30_30": [
			"30",
			"30",
			"30"
		],
		"50_50": [
			"50",
			"50"
		],
		"100": [
			"100"
		]
	}
%}

<!-- Gallery -->
<div class="{% if page_nav_id %}js-page-nav-component {% endif %}gallery"{% if page_nav_id %} id="{{ page_nav_id }}"{% endif %}>
	<div class="gallery_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="gallery_header_inner">
					<div class="gallery_title">
						<h2 class="gallery_title_primary">{{ title }}</h2>
						{% if secondary_title %}
							<p class="gallery_title_secondary">{{ secondary_title }}</p>
						{% endif %}
					</div>
					{% if description %}
						<div class="gallery_description">
							<p>{{ description }}</p>
						</div>
					{% endif %}
				</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">
						{% for row in rows %}
							<div class="gallery_row gallery_row_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">
											<div class="gallery_item_media">
												{% if item.video.id %}
													{% if row.layout == "50_50" %}
														{% include '@partial-image' with {
															class: 'gallery_item',
															alt: item.alt,
															image: item.image,
															loading: 'lazy',
															sources: [
																img.wide.med,
																img.wide.sml,
																img.wide.xsml,
																img.wide.xxsml
															],
															sizes: [
																"(min-width: 740px) 36vw",
																"98vw"
															]
														} %}
													{% elseif row.layout == "100" %}
														{% include '@partial-image' with {
															class: 'gallery_item',
															alt: 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
															],
															sizes: [
																"(min-width: 740px) 76vw",
																"98vw"
															]
														} %}
													{% else %}
														{% include '@partial-image' with {
															class: 'gallery_item',
															alt: 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
															],
															sizes: [
																"(min-width: 740px) 48vw",
																"98vw"
															]
														} %}
													{% endif %}
													{% include "@partial-lazy-video" with {
														class: "gallery",
														id: item.video.id,
														type: item.video.type,
														autoplay: item.video.autoplay|default(false),
														title: item.video.title,
														playerVars: {}
													} %}
												{% else %}
													{% if img_size == "30" %}
														{% include '@partial-image--no-crop' with {
															class: 'gallery',
															alt: item.alt,
															image: item.image,
															loading: 'lazy',
															sizes: [
																"(min-width: 740px) 25vw",
																"98vw"
															]
														} %}
													{% elseif img_size == "50" %}
														{% include '@partial-image--no-crop' with {
															class: 'gallery',
															alt: item.alt,
															image: item.image,
															loading: 'lazy',
															sizes: [
																"(min-width: 740px) 36vw",
																"98vw"
															]
														} %}
													{% elseif img_size == "70" %}
														{% include '@partial-image--no-crop' with {
															class: 'gallery',
															alt: item.alt,
															image: item.image,
															loading: 'lazy',
															sizes: [
																"(min-width: 740px) 50vw",
																"98vw"
															]
														} %}
													{% elseif img_size == "100" %}
														{% include '@partial-image--no-crop' with {
															class: 'gallery',
															alt: item.alt,
															image: item.image,
															loading: 'lazy',
															sizes: [
																"(min-width: 740px) 76vw",
																"98vw"
															]
														} %}
													{% endif %}
												{% endif %}
											</div>
											{% 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.