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/trinni-sus.jpg 1024w"> </figure>
10.1.2 - Responsive images forced
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/trinni-sus.jpg 1024w"> </figure>
10.1.3 - Lazyload
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 theonload
event is fired orapp.js
is loaded, whatever comes last. This is becauseapp.js
is loaded async and theonload
event can be fired beforeapp.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/trinni-sus.jpg 1024w"> </figure> <figure itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" itemprop="contentURL" data-defer="view" data-src="/assets/test/trinni-sus.jpg"> </figure>
10.2 - Video
Wrap the video in .flex-video
to make the video responsive wihtin the figure element.
<figure itemscope itemtype="http://schema.org/ImageObject"> <div class="flex-video"> <iframe width="420" height="315" src="https://www.youtube.com/embed/94rM2qhi0VQ" 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
<figure itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="contentURL" src="https://dbstatic.no/70519007.jpg?imageId=70519007&x=0&y=2.1857923497268&cropw=100&croph=80.464480874317&width=980&height=590"> <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
(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="https://dbstatic.no/70519007.jpg?imageId=70519007&x=0&y=2.1857923497268&cropw=100&croph=80.464480874317&width=980&height=590"> <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&vpShares=nyheter&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
(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="https://dbstatic.no/70485266.jpg?imageId=70485266&width=1024&height=615"> <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="https://dbstatic.no/70519007.jpg?imageId=70519007&x=0&y=2.1857923497268&cropw=100&croph=80.464480874317&width=980&height=590"> <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="https://dbstatic.no/70519007.jpg?imageId=70519007&x=0&y=2.1857923497268&cropw=100&croph=80.464480874317&width=980&height=590"> <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
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="https://dbstatic.no/70485266.jpg?imageId=70485266&width=1024&height=615"> <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
Makes the image act as background fixed scoll.
<figure itemscope itemtype="http://schema.org/ImageObject" data-image-fixed> <img itemprop="contentURL" src="https://dbstatic.no/70485266.jpg?imageId=70485266&width=1024&height=615"> </figure>
10.7 - Lightbox
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="https://dbstatic.no/70485266.jpg?imageId=70485266&width=1024&height=615"> <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
<figure itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="contentURL" src="https://dbstatic.no/70485266.jpg?imageId=70485266&width=1024&height=615"> <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
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="https://dbstatic.no/70485266.jpg?imageId=70485266&width=1024&height=615"> <img itemprop="contentURL" src="https://dbstatic.no/70485222.jpg?imageId=70485222&x=14.200477326969&y=2.6881720430108&cropw=76.73031026253&croph=69.175627240143&width=643&height=387"> <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
Collection of images in a slideshow.
<div class="image-collection five-up" data-image-collection> <div class="item has-vote" style="background-image: url(http://gfx.dagbladet.no/labrador/338/338151/33815163/jpg/active/366x550.jpg);"> <div class="caption"> PÅ ELLE-FEST: Anne Rimmen og Mikkel Gaup. Foto: Tor Gunnar Berland / 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://gfx.dagbladet.no/labrador/338/338149/33814970/jpg/active/366x550.jpg);"> <div class="caption"> PÅ ELLE-FEST: Ekteparet Thomas «Fingern» Gullestad og Jenny Skavlan. Foto: Tor Gunnar Berland / 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://gfx.dagbladet.no/labrador/338/338149/33814950/jpg/active/366x550.jpg);"> <div class="caption"> PÅ ELLE-FEST: Designer Fam Irvoll med venninne. Foto: Tor Gunnar Berland / 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://gfx.dagbladet.no/labrador/338/338149/33814963/jpg/active/366x550.jpg);"> <div class="caption"> PÅ ELLE-FEST: Filmregissør Vibeke Løkkeberg. Foto: Tor Gunnar Berland / 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://gfx.dagbladet.no/labrador/338/338149/33814960/jpg/active/366x550.jpg);"> <div class="caption"> PÅ ELLE-FEST: Artist Elisabeth Carew. Foto: Tor Gunnar Berland / Stella Pictures </div> </div> <div class="item " style="background-image: url(http://gfx.dagbladet.no/labrador/338/338149/33814955/jpg/active/366x550.jpg);"> <div class="caption"> PÅ ELLE-FEST: Musiker Samsaya med ektemannen Andreas Grega. Foto: Tor Gunnar Berland / Stella Pictures </div> </div> <div class="item " style="background-image: url(http://gfx.dagbladet.no/labrador/338/338145/33814578/jpg/active/366x550.jpg);"> <div class="caption"> PÅ ELLE-FEST: Programleder Stian Blipp med samboeren Jamina Iversen. Foto: Tor Gunnar Berland / Stella Picture </div> </div> <div class="item " style="background-image: url(http://gfx.dagbladet.no/labrador/338/338144/33814430/jpg/active/366x550.jpg);"> <div class="caption"> PÅ ELLE-FEST: Øyvind «Vinni» Sauvik og kona Tone. Foto: Tor Gunnar Berland / Stella Pictures </div> </div> <div class="item " data-collection-more="+3" style="background-image: url(http://gfx.dagbladet.no/labrador/338/338135/33813592/jpg/active/366x550.jpg);"> <div class="caption"> PÅ ELLE-FEST: Katarina Flatland og kjæresten Harald Dobloug. Foto: Tor Gunnar Berland / Stella Pictures </div> </div> <div class="item " style="background-image: url(http://gfx.dagbladet.no/labrador/338/338136/33813607/jpg/active/366x550.jpg);"> <div class="caption"> PÅ ELLE-FEST: Artistparet Sandra Lyng Haugen og Martin Bjercke. Foto: Tor Gunnar Berland / Stella Picture </div> </div> <div class="item " style="background-image: url(http://gfx.dagbladet.no/labrador/338/338136/33813655/jpg/active/366x550.jpg);"> <div class="caption"> PÅ ELLE-FEST: Artist Tone Damli med kjæresten Markus Foss. Foto: Tor Gunnar Berland / Stella Pictures </div> </div> <div class="item " style="background-image: url(http://gfx.dagbladet.no/labrador/338/338144/33814425/jpg/active/366x550.jpg);"> <div class="caption"> PÅ ELLE-FEST: TV-profil Per Sundnes med følge. Foto: Tor Gunnar Berland / 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>