JHU Carey Centers Component Library

Media Grid: Accent Purple (Dark) 

<!-- Gallery -->
<div class="gallery theme_site_theme">
    <div class="gallery_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="gallery_header_inner">
                    <h2 class="gallery_title">JHU Carey Experience</h2>
                    <div class="gallery_description">
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et felis mollis. Curabitur blandit tempus porttitor 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 gallery_item_size_classic">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/generic/1440x960/6 1440w, https://images.fastspot.com/generic/1220x814/6 1220w, https://images.fastspot.com/generic/980x654/6 980w, https://images.fastspot.com/generic/740x494/6 740w, https://images.fastspot.com/generic/500x334/6 500w, https://images.fastspot.com/generic/300x200/6 300w" sizes="(min-width: 1400px) 861px, (min-width: 1220px) 752px, (min-width: 980px) 601px, (min-width: 740px) 451px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x200/6" alt="Fall scenic shot of the Drillfield" loading="lazy" width="300" height="200">

                                    </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 gallery_item_size_classic">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/generic/1440x960/1 1440w, https://images.fastspot.com/generic/1220x814/1 1220w, https://images.fastspot.com/generic/980x654/1 980w, https://images.fastspot.com/generic/740x494/1 740w, https://images.fastspot.com/generic/500x334/1 500w, https://images.fastspot.com/generic/300x200/1 300w" sizes="(min-width: 1400px) 403px, (min-width: 1220px) 352px, (min-width: 980px) 282px, (min-width: 740px) 211px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x200/1" alt="a bright pink and orange sunrise sky behind campus clock tower" loading="lazy" width="300" height="200">

                                    </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_30_70">

                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <div class="gallery_item_media gallery_item_size_classic">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/generic/1440x960/3 1440w, https://images.fastspot.com/generic/1220x814/3 1220w, https://images.fastspot.com/generic/980x654/3 980w, https://images.fastspot.com/generic/740x494/3 740w, https://images.fastspot.com/generic/500x334/3 500w, https://images.fastspot.com/generic/300x200/3 300w" sizes="(min-width: 1400px) 403px, (min-width: 1220px) 352px, (min-width: 980px) 282px, (min-width: 740px) 211px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x200/3" alt="Homecoming parade" loading="lazy" width="300" height="200">

                                    </div>
                                    <figcaption class="gallery_item_caption">
                                        <p>Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper <a href="#">nulla non metus</a> auctor fringilla.</p>
                                    </figcaption>
                                </figure>
                            </div>

                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <div class="gallery_item_media gallery_item_size_classic">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/generic/1440x960/2 1440w, https://images.fastspot.com/generic/1220x814/2 1220w, https://images.fastspot.com/generic/980x654/2 980w, https://images.fastspot.com/generic/740x494/2 740w, https://images.fastspot.com/generic/500x334/2 500w, https://images.fastspot.com/generic/300x200/2 300w" sizes="(min-width: 1400px) 861px, (min-width: 1220px) 752px, (min-width: 980px) 601px, (min-width: 740px) 451px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x200/2" alt="" loading="lazy" width="300" height="200">

                                        <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">
                                                <svg class="icon icon_video_play">
                                                    <use href="/images/icons.svg#video_play" />
                                                </svg>
                                            </a>
                                            <div class="lazy_video_iframe_wrap">
                                                <div class="lazy_video_iframe_target js-iframe-target"></div>
                                            </div>
                                        </div>
                                    </div>
                                </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 gallery_item_size_classic">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/generic/980x654/1 980w, https://images.fastspot.com/generic/740x494/1 740w, https://images.fastspot.com/generic/500x334/1 500w, https://images.fastspot.com/generic/300x200/1 300w" sizes="(min-width: 1400px) 632px, (min-width: 1220px) 552px, (min-width: 980px) 442px, (min-width: 740px) 331px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x200/1" alt="Homecoming parade" loading="lazy" width="300" height="200">

                                    </div>
                                    <figcaption class="gallery_item_caption">
                                        <p>Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper <a href="#">nulla non metus</a> auctor fringilla.</p>
                                    </figcaption>
                                </figure>
                            </div>

                            <div class="gallery_item">
                                <figure class="gallery_item_figure">
                                    <div class="gallery_item_media gallery_item_size_classic">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/generic/980x654/2 980w, https://images.fastspot.com/generic/740x494/2 740w, https://images.fastspot.com/generic/500x334/2 500w, https://images.fastspot.com/generic/300x200/2 300w" sizes="(min-width: 1400px) 632px, (min-width: 1220px) 552px, (min-width: 980px) 442px, (min-width: 740px) 331px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x200/2" alt="" loading="lazy" width="300" height="200">

                                        <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">
                                                <svg class="icon icon_video_play">
                                                    <use href="/images/icons.svg#video_play" />
                                                </svg>
                                            </a>
                                            <div class="lazy_video_iframe_wrap">
                                                <div class="lazy_video_iframe_target js-iframe-target"></div>
                                            </div>
                                        </div>
                                    </div>
                                </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 gallery_item_size_wide">

                                        <img class="gallery_item_image" srcset="https://images.fastspot.com/generic/735x980/1 735w, https://images.fastspot.com/generic/555x740/1 555w, https://images.fastspot.com/generic/375x500/1 375w, https://images.fastspot.com/generic/225x300/1 225w" sizes="(min-width: 1400px) 1318px, (min-width: 1220px) 1151px, (min-width: 980px) 921px, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/225x300/1" alt="Homecoming parade" loading="lazy" width="225" height="300">

                                    </div>
                                    <figcaption class="gallery_item_caption">
                                        <p>Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper <a href="#">nulla non metus</a> auctor fringilla.</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: '',
						video: {
							type: '',
							id: '',
							title: ''
						},
						caption: 'caption'
					}
				]
			}
		]
	} %}
#}

{%
	set layout_sizes = {
		"70_30": [
			{
				crop: "classic",
				sizes: [
					'(min-width: 1400px) 861px',
					'(min-width: 1220px) 752px',
					'(min-width: 980px) 601px',
					'(min-width: 740px) 451px',
					'(min-width: 380px) calc(95.88vw - 38px)',
					'calc(31.67vw + 193px)',
				]
			},
			{
				crop: "classic",
				sizes: [
					'(min-width: 1400px) 403px',
					'(min-width: 1220px) 352px',
					'(min-width: 980px) 282px',
					'(min-width: 740px) 211px',
					'(min-width: 380px) calc(95.88vw - 38px)',
					'calc(31.67vw + 193px)',
				]
			}
		],
		"30_70": [
			{
				crop: "classic",
				sizes: [
					'(min-width: 1400px) 403px',
					'(min-width: 1220px) 352px',
					'(min-width: 980px) 282px',
					'(min-width: 740px) 211px',
					'(min-width: 380px) calc(95.88vw - 38px)',
					'calc(31.67vw + 193px)',
				]
			},
			{
				crop: "classic",
				sizes: [
					'(min-width: 1400px) 861px',
					'(min-width: 1220px) 752px',
					'(min-width: 980px) 601px',
					'(min-width: 740px) 451px',
					'(min-width: 380px) calc(95.88vw - 38px)',
					'calc(31.67vw + 193px)',
				]
			}
		],
		"50_50": [
			{
				crop: "classic",
				sizes: [
					'(min-width: 1400px) 632px',
					'(min-width: 1220px) 552px',
					'(min-width: 980px) 442px',
					'(min-width: 740px) 331px',
					'(min-width: 380px) calc(95.88vw - 38px)',
					'calc(31.67vw + 193px)',
				]
			},
			{
				crop: "classic",
				sizes: [
					'(min-width: 1400px) 632px',
					'(min-width: 1220px) 552px',
					'(min-width: 980px) 442px',
					'(min-width: 740px) 331px',
					'(min-width: 380px) calc(95.88vw - 38px)',
					'calc(31.67vw + 193px)',
				]
			}
		],
		"100": [
			{
				crop: "wide",
				sizes: [
					'(min-width: 1400px) 1318px',
					'(min-width: 1220px) 1151px',
					'(min-width: 980px) 921px',
					'(min-width: 780px) 691px',
					'(min-width: 380px) calc(96.05vw - 39px)',
					'calc(31.67vw + 193px)',
				]
			}
		]
	}
%}

<!-- Gallery -->
<div class="gallery theme_{{ page.theme == 'dark' ? 'site_theme' : 'accent_lighter' }}">
	{% if title or description %}
		<div class="gallery_header">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="gallery_header_inner">
						{% 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 gallery_row_layout_{{ row.layout }}">
								{% for item in row.items %}
									{% set img_size = attribute(layout_sizes, row.layout)[ loop.index0 ].crop %}

									<div class="gallery_item">
										<figure class="gallery_item_figure">
											<div class="gallery_item_media gallery_item_size_{{ img_size }}">
												{% if img_size == "classic" %}
													{% if row.layout == "50_50" %}
														{% include '@partial-image' with {
															class: 'gallery_item',
															alt: item.alt,
															image: item.image,
															loading: 'lazy',
															crop: 'classic',
															max: 'med',
															sizes: attribute(layout_sizes, row.layout)[ loop.index0 ].sizes
														} %}
													{% else %}
														{% include '@partial-image' with {
															class: 'gallery_item',
															alt: item.alt,
															image: item.image,
															loading: 'lazy',
															crop: 'classic',
															max: 'xlrg',
															sizes: attribute(layout_sizes, row.layout)[ loop.index0 ].sizes
														} %}
													{% endif %}
												{% else %}
													{% include '@partial-image' with {
														class: 'gallery_item',
														alt: item.alt,
														image: item.image,
														loading: 'lazy',
														crop: 'portraitFull',
														max: 'med',
														sizes: attribute(layout_sizes, row.layout)[ loop.index0 ].sizes
													} %}
												{% endif %}

												{% if item.video.id %}
													{% 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: {}
													} %}
												{% endif %}
											</div>
											{% if item.caption and not item.video.id %}
												<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.