Media

Documentation and examples for how to use Orangeline’s media components.

Figure

Figures should include a credit and a caption as two seperate elements.

A generic square placeholder image
John Doe
A caption for the above image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.
				
<figure>
	<img src="http://knightlab.northwestern.edu/wp-content/uploads/2015/03/students.jpg" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image">
	<figcaption class="credit">John Doe</figcaption>
	<figcaption>
		A caption for the above image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.
	</figcaption>
</figure>
				
			

Figure Image

Figures should include a credit and a caption as two seperate elements. We recommend using the lazy load feature to save viewer's loading in images they might not see. To use lazy loading, add the .lazyload class and change src to data-src like the example below.

A generic placeholder image
John Doe
A caption for the above image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.
				
<figure>
    <img data-src="http://knightlab.northwestern.edu/wp-content/uploads/2015/03/students.jpg" class="lazyload" alt="A generic square placeholder image">
    <figcaption class="credit">John Doe</figcaption>
    <figcaption>
        A caption for the above image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.
    </figcaption>
</figure>
				
			

Figure Video

Videos should also be placed under a figure tag, and it should include a credit and a caption as two seperate elements. Under figure tags, videos will automatically expand to 100% of the container's width. We recommend using the lazy load feature to save viewer's loading in videos they might not see. To use lazy loading, add the .lazyload class and change src to data-src like the example below.

John Doe
A caption for the above video. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.
				
<figure>
	<video controls poster="poster.png">
		<source src="videofile.webm" />
		<source src="videofile.mp4" />
	</video>
	<figcaption class="credit">John Doe</figcaption>
	<figcaption>Description of video content.</figcaption>
</figure>
				
			

Images

Add classes to an <img> element to easily style images in any project.

A generic square placeholder image
A generic square placeholder image
A generic square placeholder image
A generic square placeholder image
				

<img src="https://c2.staticflickr.com/8/7281/27370659520_911432c69e_z.jpg" class="img-rounded" alt="A generic square placeholder image">
<img src="https://c2.staticflickr.com/8/7281/27370659520_911432c69e_z.jpg" class="img-circle" alt="A generic square placeholder image">
<img src="https://c2.staticflickr.com/8/7281/27370659520_911432c69e_z.jpg" class="img-thumbnail" alt="A generic square placeholder image">
<img src="https://c2.staticflickr.com/8/7281/27370659520_911432c69e_z.jpg" class="img-shadow" alt="A generic square placeholder image">

				
			

Embed

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device. Options for both 16x9 ratio embed embed16by9 and 4x3 ratio embed embed4by3. It is best to include embeds in a <figure> element with a credit <figcaption class="credit"> and a caption <figcaption>. We recommend using the lazy load feature to save viewer's loading in embeds they might not see. To use lazy loading, add the .lazyload class and change src to data-src like the example below.

Northwestern University Knight Lab
This is a step-by-step video tutorial on how to use TimelineJS.
				
<figure>
    <div class="embed embed-16by9">
        <iframe class="embed-item lazyload" class="lazyload" frameborder="0" allowfullscreen data-src="https://player.vimeo.com/video/143407878"></iframe>
    </div>
    <figcaption class="credit">
        Northwestern University Knight Lab
    </figcaption>
    <figcaption>
        This is a step-by-step video tutorial on how to use TimelineJS.
    </figcaption>
</figure>