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/kramer-large.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/kramer-large.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 sh.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/kramer-large.jpg 1024w">
</figure>
<figure itemscope itemtype="http://schema.org/ImageObject">
  <img itemprop="image" itemprop="contentURL" data-defer="view" data-src="/assets/test/kramer-large.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/george-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/george-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/george-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.5.1 - Passepartout

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="passepartout" itemprop="contentURL" src="/assets/test/george-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.8.2 - Long read images

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="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.9 - Comparison

Requires javascript

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

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 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 images in a slideshow.

PÅ ELLE-FEST: Anne Rimmen og Mikkel Gaup. Foto: Tor Gunnar Berland / Stella Pictures
PÅ ELLE-FEST: Ekteparet Thomas «Fingern» Gullestad og Jenny Skavlan. Foto: Tor Gunnar Berland / Stella Pictures
75% mener hot
PÅ ELLE-FEST: Designer Fam Irvoll med venninne. Foto: Tor Gunnar Berland / Stella Pictures
PÅ ELLE-FEST: Filmregissør Vibeke Løkkeberg. Foto: Tor Gunnar Berland / Stella Pictures

Lesernes terningkast

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 has-vote"  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: Anne Rimmen og Mikkel Gaup. Foto: Tor Gunnar Berland &#x2F; Stella Pictures
        </div>

	    	<div class="vote-container">
				<span class="icon-Thumb-up"></span>
				<span class="icon-Thumb-down"></span>
	    	</div>



    </div>
    <div class="item has-vote"  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 class="vote-container">
				<div class="progress with-text primary">
					<span class="meter" style="width: 75%">75% mener hot</span>
				</div>
	    	</div>


    </div>
    <div class="item has-vote"  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 class="vote-container">
				<span class="icon-Dice-1"></span>
				<span class="icon-Dice-2"></span>
				<span class="icon-Dice-3"></span>
				<span class="icon-Dice-4"></span>
				<span class="icon-Dice-5"></span>
				<span class="icon-Dice-6"></span>
	    	</div>

    </div>
    <div class="item has-vote"  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 class="vote-container">
	    			<span class="icon-Dice-4"></span>
	    			<p>Lesernes terningkast</p>
	    		</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="+3" 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>