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.
<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.
<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.
<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.
<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.
<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>
Logo
