Figure @figure
Default @figure
<figure class="figure" aria-labelledby="figure-7fbc-label">
<div class="figure__media" data-gallery="lightbox-5bc2">
<div class="image loading" style="padding-top: 52.68199233716475%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="550" src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" height="550" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div>
<figcaption class="figure__caption" id="figure-7fbc-label">Hier steht eine Bildunterschrift (Foto: Vorname Name)</figcaption>
</figure>{
"caption": "Hier steht eine Bildunterschrift (Foto: Vorname Name)",
"image": {
"width": 1044,
"height": 550
}
}
Figure-Copyright @figure--copyright
<figure class="figure" aria-labelledby="figure-f2d7-label">
<div class="figure__media" data-gallery="lightbox-003c">
<div class="image loading" style="padding-top: 52.68199233716475%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="550" src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" height="550" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div><button class="copyright js-tooltip figure__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen"><svg class="icon icon--copyright" viewBox="0 0 200 200">
<use xlink:href="#icon-copyright"></use>
</svg></button>
</div>
</figure>{
"caption": null,
"image": {
"width": 1044,
"height": 550
},
"copyrightText": null,
"copyright": {
"title": "Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann"
}
}
Image in Lightbox @figure--lightbox
<figure class="figure" aria-labelledby="figure-0782-label"><a class="figure__media figure__media--lightbox js-lightbox" href="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" data-size="1044x550" data-gallery="lightbox-6928">
<div class="image loading" style="padding-top: 52.68199233716475%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="550" src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550" width="1044" height="550" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-52b5-title">
<title id="icon-52b5-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-0782-label">Hier steht eine Bildunterschrift (Foto: Vorname Name)</figcaption>
</figure>{
"caption": "Hier steht eine Bildunterschrift (Foto: Vorname Name)",
"image": {
"width": 1044,
"height": 550
},
"copyright": null,
"lightbox": {
"src": "https://bildermangel.de/1044x550/F5F5F5/28281a.png?text=1044x550",
"width": 1044,
"height": 550
}
}
External Video @figure--external-video
<figure class="figure" aria-labelledby="figure-b053-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0" allow="fullscreen"></iframe></div>
<figcaption class="figure__caption" id="figure-b053-label"><b>Titel des Videos</b><br /><span class="u-hidden-visually">Dauer: </span>01:23</figcaption>
</figure>{
"caption": "#[b Titel des Videos]#[br]#[span.u-hidden-visually Dauer: ]01:23",
"image": {
"width": 1440,
"height": 810,
"src": null
},
"copyright": null,
"video": {
"type": "external",
"href": "https://www.youtube-nocookie.com/embed/5qYSoZSPYdI?rel=0"
}
}
Internal Video @figure--internal-video
<figure class="figure" aria-labelledby="figure-c912-label">
<div class="video loading" style="padding-top: 56.25%;"><video class="video__video js-lazyload lazyload" width="640" height="360" preload="none" poster="https://bildermangel.de/640x360/6E7180/8E919B.png?text=640x360 Poster" muted="muted" autoplay="autoplay" loop="loop" id="video--fbc6" playsinline="playsinline">
<source src="/images/video/big_buck_bunny.mp4" type="video/mp4" />
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />Ihr Browser unterstützt kein HTML5 video.</video><button class="icon-button video__button" type="button" aria-controls="video--fbc6"><svg class="icon icon--play icon-button__icon video__play" viewBox="0 0 200 200" role="img" aria-labelledby="icon-21c4-title">
<title id="icon-21c4-title">Video abspielen</title>
<use xlink:href="#icon-play"></use>
</svg><svg class="icon icon--pause icon-button__icon video__pause" viewBox="0 0 200 200" role="img" aria-labelledby="icon-43b1-title">
<title id="icon-43b1-title">Video pausieren</title>
<use xlink:href="#icon-pause"></use>
</svg></button></div>
<figcaption class="figure__caption" id="figure-c912-label"><b>Titel des internen Videos</b><br /><span class="u-hidden-visually">Dauer: </span>01:23</figcaption>
</figure>{
"caption": "#[b Titel des internen Videos]#[br]#[span.u-hidden-visually Dauer: ]01:23",
"image": {
"width": 1044,
"height": 550
},
"video": {
"type": "internal",
"settings": {
"autoplay": true,
"sources": [
{
"src": "/images/video/big_buck_bunny.mp4",
"type": "video/mp4"
},
{
"src": "https://www.w3schools.com/html/mov_bbb.ogg",
"type": "video/ogg"
}
],
"width": 640,
"height": 360,
"poster": "https://bildermangel.de/640x360/6E7180/8E919B.png?text=640x360 Poster",
"alt": "Video Alt",
"lazyload": true
}
}
}