Media

Image

With caption

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

With photo credit

photo description

Photo by John Doe

With caption and photo credit

photo description

Photo by John Doe

Lorem ipsum dolor sit amet, consectetur adipiscing semper.

Wrapped by text

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

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.

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

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.

Notes

Additionally, use the .flexslider--mobile class to enable Flexslider on mobile viewports (480px and below). Preview this on a small screen to see it enabled.

Staff Photos

Staff photos must be circular. Maximum resolution is 200 x 200. Can be scaled down.

Name of staffmember must be stated as alternative text.

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

Info on bottom

Jane Doe
Jane Doe
Council Representative
janedoe@sandiego.gov

Info on right

Jane Doe

Jane Doe
Council Representative
janedoe@sandiego.gov


Biography page

Jane Doe

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.

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.

Video

Popup Embedded Video

Name of this Video

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

Watch Video

Videos can utilize Magnific Popup to play the video in a modal box. To do this, add the class of popup-modal to the <a> tag. The href value is the ID of the popup <div>. Paste the YouTube embed code (see Notes for additional info) 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.

Embedded Video

The video-wrapper class 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