Styleguide 0.1.0

10 - Figure

The figure element is a wrapper for images, video or other graphical elements.

10.1 - Images

10.1.1 - Responsive images

Loading images in a responsive layout at its simplest is just using the srcset-attribute.

<figure itemscope itemtype="http://schema.org/ImageObject">
  <img itemprop="image" itemprop="contentURL" sizes="100vw" srcset="/assets/test/small-q60.jpg 320w, /assets/test/medium-q60.jpg 640w, /assets/test/large-q60.jpg 1024w">
</figure>

10.1.2 - Responsive images forced

Requires javascript

For some layouts we need to force a specific image for each layout. We use the same syntax as srcset but prefix srcset with data. A small javascript will choose the correct image for each layout. The size specified for each image should match the breakpoint targeted. Note that only one image for each preakpoint should be specified.

<figure itemscope itemtype="http://schema.org/ImageObject">
  <img itemprop="image" itemprop="contentURL" data-srcset="/assets/test/small-q60.jpg 320w, /assets/test/medium-q60.jpg 640w, /assets/test/large-q60.jpg 1024w">
</figure>

10.1.3 - Lazyload

Requires javascript

Images can be lazyloaded in two ways and works both with data-src and data-srcset. See documentation for db.libs.imageDefer.

  • data-defer="load" defers loading of the image untill the onload event is fired or app.js is loaded, whatever comes last. This is because app.js is loaded async and the onload event can be fired before app.js is loaded.
  • data-defer="view" defers loading untill til image is about to enter the viewable part of the screen.
<figure itemscope itemtype="http://schema.org/ImageObject">
  <img itemprop="image" itemprop="contentURL" data-defer="load" data-srcset="/assets/test/small-q60.jpg 320w, /assets/test/medium-q60.jpg 640w, /assets/test/large-q60.jpg 1024w">
</figure>
<figure itemscope itemtype="http://schema.org/ImageObject">
  <img itemprop="image" itemprop="contentURL" data-defer="view" data-src="/assets/test/large-q60.jpg">
</figure>

10.2 - Video

Wrap the video in .flex-video to make the video responsive wihtin the figure element.

FANT KONTANTER: Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. Vis mer 
<figure itemscope itemtype="http://schema.org/ImageObject">
  <div class="flex-video">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/CVke__4OZ-0" frameborder="0" allowfullscreen></iframe>
  </div>
  <figcaption class="caption" itemprop="caption" data-expand>
    <strong>FANT KONTANTER:</strong> Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. <span itemprop="author" class="credit">Foto: Jacques Hvistendahl / Dagbladet</span>
    <a class="toggle">Vis mer</a>
  </figcaption>
</figure>

10.4 - Caption

FANT KONTANTER: Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. 
<figure itemscope itemtype="http://schema.org/ImageObject">
  <img itemprop="contentURL" src="/assets/test/buster-large.jpg">
  <figcaption class="caption" itemprop="caption"><strong>FANT KONTANTER:</strong> Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. <span itemprop="author" class="credit">Foto: Jacques Hvistendahl / Dagbladet</span></figcaption>
</figure>

10.4.1 - Header figure caption

Requires javascript

(Only tiggered for small viewports) For small screens we can show only parts of the caption, and let the user toggle the visiability. Add data-expand attribute to the figure element to enable.

FANT KONTANTER: Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. Vis mer
FANT KONTANTER: Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. Vis mer 
<header>
<figure itemscope itemtype="http://schema.org/ImageObject">
  <img itemprop="contentURL" src="/assets/test/buster-large.jpg">
  <figcaption class="caption" itemprop="caption" data-expand>
    <strong>FANT KONTANTER:</strong> Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. <span itemprop="author" class="credit">Foto: Jacques Hvistendahl / Dagbladet</span>
    <a href="#" class="toggle">Vis mer</a>
  </figcaption>
</figure>
</header>
<header>
<figure itemscope itemtype="http://schema.org/ImageObject">
  <div class="flex-video">
    <iframe src="//www.dbtv.no/player/1824660370001?autoplay=false&amp;vpShares=nyheter&amp;vpNoCompanion=true" width="480" height="270" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
  </div>
  <figcaption class="caption" itemprop="caption" data-expand>
    <strong>FANT KONTANTER:</strong> Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. <span itemprop="author" class="credit">Foto: Jacques Hvistendahl / Dagbladet</span>
    <a class="toggle">Vis mer</a>
  </figcaption>
</figure>
</header>

10.4.2 - Expandable

Requires javascript

(Only tiggered for small viewports) For small screens we can show only parts of the caption, and let the user toggle the visiability. Add data-expand attribute to the figure element to enable.

FANT KONTANTER: Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. Vis mer 
<figure itemscope itemtype="http://schema.org/ImageObject">
  <img itemprop="contentURL" src="http://gfx.dagbladet.no/labrador/330/330162/33016275/jpg/active/978x.jpg">
  <figcaption class="caption" itemprop="caption" data-expand>
    <strong>FANT KONTANTER:</strong> Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. <span itemprop="author" class="credit">Foto: Jacques Hvistendahl / Dagbladet</span>
    <a href="#" class="toggle">Vis mer</a>
  </figcaption>
</figure>

10.5 - Border

Applies only to images inside the figure

FANT KONTANTER: Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. 
<figure itemscope itemtype="http://schema.org/ImageObject">
  <img class="border" itemprop="contentURL" src="/assets/test/buster-large.jpg">
  <figcaption class="caption" itemprop="caption"><strong>FANT KONTANTER:</strong> Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. <span itemprop="author" class="credit">Foto: Jacques Hvistendahl / Dagbladet</span></figcaption>
</figure>

10.6 - Expanded

Requires javascript

Make the figure expand the full width of the page. Add data-image-expand to the figure tag to enable.

FANT KONTANTER: Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. 
<figure itemscope itemtype="http://schema.org/ImageObject" data-image-expand>
  <img itemprop="contentURL" src="http://gfx.dagbladet.no/labrador/269/269931/26993179/jpg/active/978x.jpg">
  <figcaption class="caption" itemprop="caption">
    <strong>FANT KONTANTER:</strong> Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. <span itemprop="author" class="credit">Foto: Jacques Hvistendahl / Dagbladet</span>
  </figcaption>
</figure>

10.6.1 - Fixed

Requires javascript

Makes the image act as background fixed scoll.

<figure itemscope itemtype="http://schema.org/ImageObject" data-image-fixed>
  <img itemprop="contentURL" src="http://gfx.dagbladet.no/labrador/330/330162/33016275/jpg/active/978x.jpg">
</figure>

10.7 - Lightbox

Requires javascript

Lightbox that displays a image as large as possible in the viewport. Add data-image-lightbox to the figure-tag to enable. A different image, e.g. a larger image, that should load when the lightbox opens can se specified using the data-options="src:http://…;".

FANT KONTANTER: Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. Vis mer 
<figure itemscope itemtype="http://schema.org/ImageObject" data-image-lightbox data-options="src:http://gfx.dagbladet.no/labrador/269/269931/26993179/jpg/active/0.jpg;">
  <img itemprop="contentURL" src="http://gfx.dagbladet.no/labrador/269/269931/26993179/jpg/active/978x.jpg">
  <figcaption class="caption" itemprop="caption" data-expand>
    <strong>FANT KONTANTER:</strong> Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. <span itemprop="author" class="credit">Foto: Jacques Hvistendahl / Dagbladet</span>
    <a class="toggle">Vis mer</a>
  </figcaption>
</figure>

10.10 - Collection

Requires javascript

Collection of images in a slideshow.

Frodo Baggins
Gandalf The Grey
Chuck Norris
Samwise Gamgee
Merry
Pippin
Gimli 
<div class="image-collection small-12 medium-12 large-12" data-image-collection>
	<div class="item" style="background-image: url(https://s-media-cache-ak0.pinimg.com/originals/30/d9/a0/30d9a05706acee026c7372459708f8aa.jpg);">
	    <div class="caption">
	        Frodo Baggins
	    </div>
	</div>

	<div class="item" style="background-image: url(http://www.mckellen.com/images/1257.jpg);">
	    <div class="caption">
	        Gandalf The Grey
	    </div>
	</div>

	<div class="item" style="background-image: url(http://cdn.business2community.com/wp-content/uploads/2016/03/Vd3MJo.jpg);">
	    <div class="caption">
	        Chuck Norris
	    </div>
	</div>

	<div class="item" style="background-image: url(https://s-media-cache-ak0.pinimg.com/736x/f3/8f/f0/f38ff01fde4f248cba48524e929f59a1.jpg);">
	    <div class="caption">
	        Samwise Gamgee
	    </div>
	</div>

	<div class="item" style="background-image: url(https://s-media-cache-ak0.pinimg.com/originals/0d/16/2b/0d162b2a315a96263c658e08d4b9fcd9.jpg);">
	    <div class="caption">
	        Merry
	    </div>
	</div>

	<div class="item" style="background-image: url(http://vignette1.wikia.nocookie.net/lotr/images/4/4b/Pippin.jpg/revision/latest?cb=20070623124032);">
	    <div class="caption">
	        Pippin
	    </div>
	</div>

	<div class="item" style="background-image: url(https://s-media-cache-ak0.pinimg.com/736x/46/ba/a7/46baa7cff1a6b4bf68ce4b3c9e416841.jpg);">
	    <div class="caption">
	        Gimli
	    </div>
	</div>
    <a class="close" title="Lukk"><span class="icon-Close"></span></a>
    <a class="prev" title="Forrige"><span class="icon-Arrow-alt-left"></span></a>
    <a class="next" title="Neste"><span class="icon-Arrow-alt-right"></span></a>
</div>