Johns Hopkins University Component Library

Gallery 

<!-- Gallery -->
<div class="gallery">
    <div class="gallery_header">
        <div class="gallery_header_inner">
            <h2 class="gallery_title">Ipsum Fermentum Tristique</h2>
            <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 class="gallery_body">
        <div class="gallery_body_inner">
            <div class="gallery_items">
                <div class="gallery_row grid_layout_50_50">
                    <div class="gallery_item">
                        <figure class="gallery_item_figure">
                            <div class="gallery_item_media gallery_item_size_full">

                                <img class="gallery_item_image" srcset="https://images.fastspot.com/framework/980x735/1 980w, https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">

                            </div>
                            <figcaption class="gallery_item_caption">
                                <p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="gallery_item">
                        <figure class="gallery_item_figure">
                            <div class="gallery_item_media gallery_item_size_full">

                                <img class="gallery_item_image" srcset="https://images.fastspot.com/framework/980x735/2 980w, https://images.fastspot.com/framework/740x555/2 740w, https://images.fastspot.com/framework/500x375/2 500w, https://images.fastspot.com/framework/300x225/2 300w" src="https://images.fastspot.com/framework/300x225/2" alt="" loading="lazy" width="300" height="225">

                            </div>
                            <figcaption class="gallery_item_caption">
                                <p>Caption lorem ipsum dolor sit amet, <a href>consectetur adipiscing elit</a>. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
                            </figcaption>
                        </figure>
                    </div>
                </div>
                <div class="gallery_row grid_layout_70_30">
                    <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/framework/1440x810/1 1440w, https://images.fastspot.com/framework/1220x686/1 1220w, https://images.fastspot.com/framework/980x552/1 980w, https://images.fastspot.com/framework/740x416/1 740w, https://images.fastspot.com/framework/500x282/1 500w, https://images.fastspot.com/framework/300x169/1 300w" src="https://images.fastspot.com/framework/300x169/1" alt="" loading="lazy" width="300" height="169">

                            </div>
                            <figcaption class="gallery_item_caption">
                                <p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="gallery_item">
                        <figure class="gallery_item_figure">
                            <div class="gallery_item_media gallery_item_size_portrait">

                                <img class="gallery_item_image" srcset="https://images.fastspot.com/framework/735x980/2 735w, https://images.fastspot.com/framework/555x740/2 555w, https://images.fastspot.com/framework/375x500/2 375w, https://images.fastspot.com/framework/225x300/2 225w" src="https://images.fastspot.com/framework/225x300/2" alt="" loading="lazy" width="225" height="300">

                            </div>
                            <figcaption class="gallery_item_caption">
                                <p>Caption lorem ipsum dolor sit amet, <a href>consectetur adipiscing elit</a>. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
                            </figcaption>
                        </figure>
                    </div>
                </div>
                <div class="gallery_row grid_layout_30_70">
                    <div class="gallery_item">
                        <figure class="gallery_item_figure">
                            <div class="gallery_item_media gallery_item_size_portrait">

                                <img class="gallery_item_image" srcset="https://images.fastspot.com/framework/735x980/1 735w, https://images.fastspot.com/framework/555x740/1 555w, https://images.fastspot.com/framework/375x500/1 375w, https://images.fastspot.com/framework/225x300/1 225w" src="https://images.fastspot.com/framework/225x300/1" alt="" loading="lazy" width="225" height="300">

                            </div>
                            <figcaption class="gallery_item_caption">
                                <p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
                            </figcaption>
                        </figure>
                    </div>
                    <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/framework/1440x810/2 1440w, https://images.fastspot.com/framework/1220x686/2 1220w, https://images.fastspot.com/framework/980x552/2 980w, https://images.fastspot.com/framework/740x416/2 740w, https://images.fastspot.com/framework/500x282/2 500w, https://images.fastspot.com/framework/300x169/2 300w" src="https://images.fastspot.com/framework/300x169/2" alt="" loading="lazy" width="300" height="169">

                            </div>
                            <figcaption class="gallery_item_caption">
                                <p>Caption lorem ipsum dolor sit amet, <a href>consectetur adipiscing elit</a>. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
                            </figcaption>
                        </figure>
                    </div>
                </div>
                <div class="gallery_row grid_layout_33_33_33">
                    <div class="gallery_item">
                        <figure class="gallery_item_figure">
                            <div class="gallery_item_media gallery_item_size_full">

                                <img class="gallery_item_image" srcset="https://images.fastspot.com/framework/980x735/3 980w, https://images.fastspot.com/framework/740x555/3 740w, https://images.fastspot.com/framework/500x375/3 500w, https://images.fastspot.com/framework/300x225/3 300w" src="https://images.fastspot.com/framework/300x225/3" alt="" loading="lazy" width="300" height="225">

                            </div>
                            <figcaption class="gallery_item_caption">
                                <p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="gallery_item">
                        <figure class="gallery_item_figure">
                            <div class="gallery_item_media gallery_item_size_full">

                                <img class="gallery_item_image" srcset="https://images.fastspot.com/framework/980x735/4 980w, https://images.fastspot.com/framework/740x555/4 740w, https://images.fastspot.com/framework/500x375/4 500w, https://images.fastspot.com/framework/300x225/4 300w" src="https://images.fastspot.com/framework/300x225/4" alt="" loading="lazy" width="300" height="225">

                            </div>
                            <figcaption class="gallery_item_caption">
                                <p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="gallery_item">
                        <figure class="gallery_item_figure">
                            <div class="gallery_item_media gallery_item_size_full">

                                <img class="gallery_item_image" srcset="https://images.fastspot.com/framework/980x735/1 980w, https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">

                            </div>
                            <figcaption class="gallery_item_caption">
                                <p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
                            </figcaption>
                        </figure>
                    </div>
                </div>
                <div class="gallery_row grid_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/framework/1440x810/1 1440w, https://images.fastspot.com/framework/1220x686/1 1220w, https://images.fastspot.com/framework/980x552/1 980w, https://images.fastspot.com/framework/740x416/1 740w, https://images.fastspot.com/framework/500x282/1 500w, https://images.fastspot.com/framework/300x169/1 300w" src="https://images.fastspot.com/framework/300x169/1" alt="" loading="lazy" width="300" height="169">

                            </div>
                            <figcaption class="gallery_item_caption">
                                <p>Caption lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis mauris nec dui consectetur, non ultrices mi vehicula.</p>
                            </figcaption>
                        </figure>
                    </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": [
			"wide",
			"portrait"
		],
		"30_70": [
			"portrait",
			"wide"
		],
		"50_50": [
			"full",
			"full"
		],
		"33_33_33": [
			"full",
			"full",
			"full"
		],
		"100": [
			"wide"
		]
	}
%}

<!-- Gallery -->
<div class="gallery">
	{% if title or description %}
		<div class="gallery_header">
			<div class="gallery_header_inner">
				{% if title %}
					<h2 class="gallery_title{% if alternateFont %} alternate_font{% endif %}">{{ title }}</h2>
				{% endif %}
				{% if description %}
					<div class="gallery_description">
						<p>{{ description }}</p>
					</div>
				{% endif %}
			</div>
		</div>
	{% endif %}
	<div class="gallery_body">
		<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">
									<div class="gallery_item_media gallery_item_size_{{ img_size }}">
										{% if img_size == "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 == "full" %}
											{% include '@partial-image' with {
												class: 'gallery_item',
												alt: '',
												image: item.image,
												loading: 'lazy',
												sources: [
													img.full.med,
													img.full.sml,
													img.full.xsml,
													img.full.xxsml
												]
											} %}
										{% else %}
											{% 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 %}

										{% 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 %}
										<figcaption class="gallery_item_caption">
											<p>{{ item.caption }}</p>
										</figcaption>
									{% endif %}
								</figure>
							</div>
						{% endfor %}
					</div>
				{% endfor %}
			</div>
		</div>
	</div>
</div>
<!-- END: Gallery -->

No notes defined.