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. Picturefill is implemented as a polyfill for browsers that not yet supports srcset.

<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

We use YouTube as our preferred video platform. We can embed a YouTube video anywhere we want with the figure tag.

10.2.1 - YouTube

Wrap the video in .flex-video to make the video responsive within the figure element. Note that we're not embedding via YouTube directly, but we're instead using our proxy-player which allows us to have more tracking, namely www.dagbladet.no/video/embed/{id}.

VISTE FINGEREN: Videoen av Tysklands visestatsminister Sigmar Gabriel, som viser fingeren til demonstranter, har vært et stort samtaleemne i Tyskland. Vis mer

<figure itemscope itemtype="http://schema.org/ImageObject">
  <div class="flex-video"> 
    <iframe src="//www.dagbladet.no/video/embed/qG8NBGZL9vA?autoplay=false" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe> 
  </div>
  <figcaption class="caption" itemprop="caption" data-expand="">
    <strong>VISTE FINGEREN:</strong> Videoen av Tysklands visestatsminister Sigmar Gabriel, som viser fingeren til demonstranter, har vært et stort samtaleemne i Tyskland. <a class="toggle">Vis mer</a> 
  </figcaption>
</figure>

10.2.2 - DBTV (deprecated)

Wrap the video in .flex-video to make the video responsive within 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. Foto: Jacques Hvistendahl / Dagbladet Vis mer

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

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. Foto: Jacques Hvistendahl / Dagbladet

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

<header>
<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>
</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.

<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

<figure itemscope itemtype="http://schema.org/ImageObject">
  <img class="border" itemprop="contentURL" src="http://gfx.dagbladet.no/labrador/330/330162/33016275/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.5.1 - Passepartout

Applies only to images inside the figure

<figure itemscope itemtype="http://schema.org/ImageObject">
  <img class="passepartout" itemprop="contentURL" src="http://gfx.dagbladet.no/labrador/330/330162/33016275/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 - Expanded

Requires javascript

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

<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://…;".

<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.8 - Group

Group figures together with a common caption

10.8.1 - Two

<figure class="group two" itemscope itemtype="http://schema.org/ImageObject">
  <img itemprop="contentURL" src="http://gfx.dagbladet.no/labrador/330/330162/33016275/jpg/active/978x.jpg">
  <img itemprop="contentURL" src="http://gfx.dagbladet.no/labrador/232/232278/23227870/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" tabindex="0">Vis mer</a>
  </figcaption>
</figure>

10.8.2 - Three

<figure class="group three" itemscope itemtype="http://schema.org/ImageObject">
  <img itemprop="contentURL" src="http://gfx.dagbladet.no/labrador/330/330162/33016275/jpg/active/978x.jpg">
  <img itemprop="contentURL" src="http://gfx.dagbladet.no/labrador/232/232278/23227870/jpg/active/978x.jpg">
  <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 class="toggle" tabindex="0">Vis mer</a>
  </figcaption>
</figure>

10.9 - Comparison

Requires javascript

Compare two images. Initial value is set as percentage data-image-comparison="value:50;"

<figure class="image-comparison" data-image-comparison="value:50;">
  <div class="comparison">
    <img itemprop="contentURL" src="http://gfx.dagbladet.no/labrador/330/330162/33016275/jpg/active/978x.jpg">
    <img itemprop="contentURL" src="http://gfx.dagbladet.no/labrador/232/232278/23227870/jpg/active/978x.jpg">
    <div class="handle">
      <span class="icon-Navigation-horizontal"></span>
    </div>
  </div>
  <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.10 - Collection

Requires javascript

Collection of image with lightbox

PÅ ELLE-FEST: Motocross-kjører Ailo Gaup og NRK-kjæresten Anne Rimmen. Foto: Tor Gunnar Berland / Stella Pictures

PÅ ELLE-FEST: Designer Fam Irvoll med venninne. Foto: Tor Gunnar Berland / Stella Pictures

PÅ ELLE-FEST: Ekteparet Thomas «Fingern» Gullestad og Jenny Skavlan. Foto: Tor Gunnar Berland / Stella Pictures

PÅ ELLE-FEST: Filmregissør Vibeke Løkkeberg. Foto: Tor Gunnar Berland / Stella Pictures

PÅ ELLE-FEST: Artist Elisabeth Carew. Foto: Tor Gunnar Berland / Stella Pictures

PÅ ELLE-FEST: Musiker Samsaya med ektemannen Andreas Grega. Foto: Tor Gunnar Berland / Stella Pictures

PÅ ELLE-FEST: Programleder Stian Blipp med samboeren Jamina Iversen. Foto: Tor Gunnar Berland / Stella Picture

PÅ ELLE-FEST: Øyvind «Vinni» Sauvik og kona Tone. Foto: Tor Gunnar Berland / Stella Pictures

PÅ ELLE-FEST: Katarina Flatland og kjæresten Harald Dobloug. Foto: Tor Gunnar Berland / Stella Pictures

PÅ ELLE-FEST: Artistparet Sandra Lyng Haugen og Martin Bjercke. Foto: Tor Gunnar Berland / Stella Picture

PÅ ELLE-FEST: Artist Tone Damli med kjæresten Markus Foss. Foto: Tor Gunnar Berland / Stella Pictures

PÅ ELLE-FEST: TV-profil Per Sundnes med følge. Foto: Tor Gunnar Berland / Stella Pictures

<div class="image-collection five-up" data-image-collection>
    <div class="item"  style="background-image: url(http:&#x2F;&#x2F;gfx.dagbladet.no&#x2F;labrador&#x2F;338&#x2F;338151&#x2F;33815163&#x2F;jpg&#x2F;active&#x2F;366x550.jpg);">
        <div class="caption">PÅ ELLE-FEST: Motocross-kjører Ailo Gaup og NRK-kjæresten Anne Rimmen. Foto: Tor Gunnar Berland &#x2F; Stella Pictures</div>
    </div>
    <div class="item"  style="background-image: url(http:&#x2F;&#x2F;gfx.dagbladet.no&#x2F;labrador&#x2F;338&#x2F;338149&#x2F;33814950&#x2F;jpg&#x2F;active&#x2F;366x550.jpg);">
        <div class="caption">PÅ ELLE-FEST: Designer Fam Irvoll med venninne. Foto: Tor Gunnar Berland &#x2F; Stella Pictures</div>
    </div>
    <div class="item"  style="background-image: url(http:&#x2F;&#x2F;gfx.dagbladet.no&#x2F;labrador&#x2F;338&#x2F;338149&#x2F;33814970&#x2F;jpg&#x2F;active&#x2F;366x550.jpg);">
        <div class="caption">PÅ ELLE-FEST: Ekteparet Thomas «Fingern» Gullestad og Jenny Skavlan. Foto: Tor Gunnar Berland &#x2F; Stella Pictures</div>
    </div>
    <div class="item"  style="background-image: url(http:&#x2F;&#x2F;gfx.dagbladet.no&#x2F;labrador&#x2F;338&#x2F;338149&#x2F;33814963&#x2F;jpg&#x2F;active&#x2F;366x550.jpg);">
        <div class="caption">PÅ ELLE-FEST: Filmregissør Vibeke Løkkeberg. Foto: Tor Gunnar Berland &#x2F; Stella Pictures</div>
    </div>
    <div class="item"  style="background-image: url(http:&#x2F;&#x2F;gfx.dagbladet.no&#x2F;labrador&#x2F;338&#x2F;338149&#x2F;33814960&#x2F;jpg&#x2F;active&#x2F;366x550.jpg);">
        <div class="caption">PÅ ELLE-FEST: Artist Elisabeth Carew. Foto: Tor Gunnar Berland &#x2F; Stella Pictures</div>
    </div>
    <div class="item"  style="background-image: url(http:&#x2F;&#x2F;gfx.dagbladet.no&#x2F;labrador&#x2F;338&#x2F;338149&#x2F;33814955&#x2F;jpg&#x2F;active&#x2F;366x550.jpg);">
        <div class="caption">PÅ ELLE-FEST: Musiker Samsaya med ektemannen Andreas Grega. Foto: Tor Gunnar Berland &#x2F; Stella Pictures</div>
    </div>
    <div class="item"  style="background-image: url(http:&#x2F;&#x2F;gfx.dagbladet.no&#x2F;labrador&#x2F;338&#x2F;338145&#x2F;33814578&#x2F;jpg&#x2F;active&#x2F;366x550.jpg);">
        <div class="caption">PÅ ELLE-FEST: Programleder Stian Blipp med samboeren Jamina Iversen. Foto: Tor Gunnar Berland &#x2F; Stella Picture</div>
    </div>
    <div class="item"  style="background-image: url(http:&#x2F;&#x2F;gfx.dagbladet.no&#x2F;labrador&#x2F;338&#x2F;338144&#x2F;33814430&#x2F;jpg&#x2F;active&#x2F;366x550.jpg);">
        <div class="caption">PÅ ELLE-FEST: Øyvind «Vinni» Sauvik og kona Tone. Foto: Tor Gunnar Berland &#x2F; Stella Pictures</div>
    </div>
    <div class="item" data-collection-more="+4" style="background-image: url(http:&#x2F;&#x2F;gfx.dagbladet.no&#x2F;labrador&#x2F;338&#x2F;338135&#x2F;33813592&#x2F;jpg&#x2F;active&#x2F;366x550.jpg);">
        <div class="caption">PÅ ELLE-FEST: Katarina Flatland og kjæresten Harald Dobloug. Foto: Tor Gunnar Berland &#x2F; Stella Pictures</div>
    </div>
    <div class="item"  style="background-image: url(http:&#x2F;&#x2F;gfx.dagbladet.no&#x2F;labrador&#x2F;338&#x2F;338136&#x2F;33813607&#x2F;jpg&#x2F;active&#x2F;366x550.jpg);">
        <div class="caption">PÅ ELLE-FEST: Artistparet Sandra Lyng Haugen og Martin Bjercke. Foto: Tor Gunnar Berland &#x2F; Stella Picture</div>
    </div>
    <div class="item"  style="background-image: url(http:&#x2F;&#x2F;gfx.dagbladet.no&#x2F;labrador&#x2F;338&#x2F;338136&#x2F;33813655&#x2F;jpg&#x2F;active&#x2F;366x550.jpg);">
        <div class="caption">PÅ ELLE-FEST: Artist Tone Damli med kjæresten Markus Foss. Foto: Tor Gunnar Berland &#x2F; Stella Pictures</div>
    </div>
    <div class="item"  style="background-image: url(http:&#x2F;&#x2F;gfx.dagbladet.no&#x2F;labrador&#x2F;338&#x2F;338144&#x2F;33814425&#x2F;jpg&#x2F;active&#x2F;366x550.jpg);">
        <div class="caption">PÅ ELLE-FEST: TV-profil Per Sundnes med følge. Foto: Tor Gunnar Berland &#x2F; Stella Pictures</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>