Media

Image

With Caption

photo description — Lorem ipsum dolor sit amet, consectetur adipiscing semper.

With Photo Credit

With Caption and Photo Credit

With Text Wrapping

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet dictum sit amet justo donec enim diam. Sem et tortor consequat id porta nibh venenatis cras sed.

Massa eget egestas purus viverra accumsan. Sit amet justo donec enim diam vulputate ut pharetra. Accumsan lacus vel facilisis volutpat. Convallis posuere morbi leo urna molestie at.

At elementum eu facilisis sed odio morbi quis. Enim nec dui nunc mattis. Diam quam nulla porttitor massa id neque. Hac habitasse platea dictumst vestibulum. Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat. Elit ullamcorper dignissim cras tincidunt lobortis. Amet dictum sit amet justo donec enim diam. Feugiat pretium nibh ipsum consequat nisl vel. Massa eget egestas purus viverra. Nunc aliquet bibendum enim facilisis gravida. Morbi tristique senectus et netus et malesuada fames.

Photo Grid

Square Corners

Torrey Pines Golf Course

Slightly Rounded Corners

Apply class rounded-corners to <img>.

Torrey Pines Golf Course

Rounder Corners

Apply class rounded-corners-large to <img>.

Torrey Pines Golf Course

Image Gallery

Default Usage

Lorem ipsum dolor sit amet, consectetur adipiscing semper.
Lorem ipsum dolor sit amet, consectetur adipiscing semper.
Lorem ipsum dolor sit amet, consectetur adipiscing semper.
Lorem ipsum dolor sit amet, consectetur adipiscing semper.

Notes
Code

Image galleries utilize Flexslider. For default usage, wrap a <ul> with class slides within a <div> with classes flexslider and flexslider--default. Each <li> contains a single slide. Add a <span> with flex-caption for descriptions. Additional configuration can be found through Flexslider documentation.

Thumbnail Navigation

Lorem ipsum dolor sit amet, consectetur adipiscing semper.
Lorem ipsum dolor sit amet, consectetur adipiscing semper.
Lorem ipsum dolor sit amet, consectetur adipiscing semper.
Lorem ipsum dolor sit amet, consectetur adipiscing semper.
Lorem ipsum dolor sit amet, consectetur adipiscing semper.
Lorem ipsum dolor sit amet, consectetur adipiscing semper.
Lorem ipsum dolor sit amet, consectetur adipiscing semper.
Lorem ipsum dolor sit amet, consectetur adipiscing semper.

Notes
Code

A gallery with thumbnail navigation requires two Flexsliders. The second Flexslider acts as the navigation for the first.

The first Flexslider <div> will have classes flexslider and flexslider--thumbnails. The second <div> will have classes flexslider and flexslider--thumbnails-nav.

The number and order of list items must be the same for both Flexsliders.

<div class="flex-container l-margin-bm">
    <div class="flexslider flexslider--thumbnails">
        <ul class="slides">
			<li><img src="/images/balboapark1.jpg" alt=""><span class="flex-caption">Lorem ipsum dolor sit amet, consectetur adipiscing semper.</span></li>
			<li><img src="/images/balboapark2.jpg" alt=""><span class="flex-caption">Lorem ipsum dolor sit amet, consectetur adipiscing semper.</span></li>
			<li><img src="/images/balboaparkgolfcourse.jpg" alt=""><span class="flex-caption">Lorem ipsum dolor sit amet, consectetur adipiscing semper.</span></li>
			<li><img src="/images/sandiegoskyline.jpg" alt=""><span class="flex-caption">Lorem ipsum dolor sit amet, consectetur adipiscing semper.</span></li>
			<li><img src="/images/balboapark1.jpg" alt=""><span class="flex-caption">Lorem ipsum dolor sit amet, consectetur adipiscing semper.</span></li>
			<li><img src="/images/balboapark2.jpg" alt=""><span class="flex-caption">Lorem ipsum dolor sit amet, consectetur adipiscing semper.</span></li>
			<li><img src="/images/balboaparkgolfcourse.jpg" alt=""><span class="flex-caption">Lorem ipsum dolor sit amet, consectetur adipiscing semper.</span></li>
			<li><img src="/images/sandiegoskyline.jpg" alt=""><span class="flex-caption">Lorem ipsum dolor sit amet, consectetur adipiscing semper.</span></li>
        </ul>
    </div>

Mobile Gallery

Add class flexslider--mobile alongside class flexslider to enable Flexslider on mobile devices. In mobile view, the photos below will display in a Flexslider.

Staff Photos

Use square photos and apply class img-circle to the photo circular on the page. This will ensure sharp edges when the page is zoomed in. Maximum resolution of photo is 300 x 300. Photo can be scaled down.

Name of staffmember must be stated as alternative text.

Info on bottom

Jane Doe
Council Representative
janedoe@sandiego.gov

Info on right

Desktop view only. The info will appear below the photo on mobile view.

Jane Doe

Jane Doe
Council Representative
janedoe@sandiego.gov

Biography Page

In biography pages, the staff photo should be placed on the top right of the text. Use class img-right to ensure proper placement on mobile devices.

Jane Doe

Massa eget egestas purus viverra accumsan. Sit amet justo donec enim diam vulputate ut pharetra. Accumsan lacus vel facilisis volutpat. Convallis posuere morbi leo urna molestie at.

Video

Embedded Video

Notes
Code

Class video-wrapper maintains a responsive 16:9 aspect ratio.

With YouTube videos, add ?rel=0&wmode=transparent after the video ID.

rel=0 prevents Suggested Videos from appearing after the video is over
wmode=transparent allows z-indexed elements to appear above the video

Pop-Up Embedded Video

Name of this Video

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in nunc mauris.

Notes
Code

Videos can utilize Magnific Popup to play the video in a pop-up box. To do this, add class popup-modal to the <a> tag. The href value is the ID of the popup <div>. Paste the YouTube embed code in the popup <div>.

When generating the embed code from YouTube, select video size 853 x 480 and uncheck "Show suggested videos when the video finishes". The src URL must end with ?rel=0&autoplay=0.

<div class="grid-x grid-margin-x">
	<div class="cell medium-4">
		<div class="card card--video">
			<a href="#sd-popup-video" class="popup-modal">
				<i class="icon-play"></i>
				<span class="overlay"></span>
				<img src="../images/video-1.jpg" alt="Video Title" width="400" height="250">
			</a>
		</div>
	</div>
	<div class="cell medium-auto">
		<h6 class="l-margin-tn"><strong>Name of this Video</strong></h6>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in nunc mauris.</p>
		<a href="#sd-popup-video" class="popup-modal">Watch Video</a>
	</div>
</div>

<script type="text/javascript">
jQuery( document ).ready(function() {

jQuery(".popup-modal").click(function() {
		var href = jQuery(this).attr('href');
		jQuery(href+" iframe").attr("src", jQuery(href+" iframe").attr("src").replace("autoplay=0", "autoplay=1")); //make the video autoplay after popup
	});
	
	$.magnificPopup.instance.close = function () {
	  jQuery(".mfp-container iframe").attr("src", jQuery(".mfp-container iframe").attr("src").replace("autoplay=1", "autoplay=0")); //remove autoplay when popup is closed
       // "proto" variable holds MagnificPopup class prototype
       // The above change that we did to instance is not applied to the prototype, 
       // which allows us to call parent method:
       $.magnificPopup.proto.close.call(this);
	};	
});
</script>