<!-- Figure mit Bild -->
<figure class="figure" aria-labelledby="figure-f9ff46-label">
<div class="figure__media">
<div class="image loading" style="padding-top: 52.68199233716475%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="1044" height="550" src="https://via.placeholder.com/1044x550/A0A0A6/FFFFFF.png?text=1044x550" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="1044" height="550" data-src="https://via.placeholder.com/1044x550/A0A0A6/FFFFFF.png?text=1044x550" /></div>
</div>
</figure>
<!-- Figure mit Bildunterschrift -->
<figure class="figure" aria-labelledby="figure-e6fef9-label">
<div class="figure__media">
<div class="image loading" style="padding-top: 52.68199233716475%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="1044" height="550" src="https://via.placeholder.com/1044x550/A0A0A6/FFFFFF.png?text=1044x550" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="1044" height="550" data-src="https://via.placeholder.com/1044x550/A0A0A6/FFFFFF.png?text=1044x550" /></div>
</div>
<figcaption class="figure__caption" id="figure-e6fef9-label"><span class="figure__caption__text">Ich bin eine Bildunterschrift elitr, sed diam nmy consetetur sadipscing elitreirmod tempor</span><span class="figure__caption__copyright">Foto: Name/Agentur</span></figcaption>
</figure>
<!-- External Video -->
<figure class="figure" aria-labelledby="figure-a6c307-label">
<div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/K5VYIgub8y8?rel=0" allowFullscreen="allowFullscreen" msAllowFullscreen="msAllowFullscreen" webkitAllowFullscreen="webkitAllowFullscreen" mozAllowFullscreen="mozAllowFullscreen"></iframe></div>
<figcaption class="figure__caption" id="figure-a6c307-label"><span class="figure__caption__text">Ich bin ein Videotitel elitr, sed diam</span></figcaption>
</figure>
<!-- Internal Video -->
<figure class="figure" aria-labelledby="figure-b9223e-label">
<div class="figure__video-wrapper"><video class="figure__video" controls="controls">
<source src="../images/content/video2.m4v" type="video/mp4" />
<source src="../images/content/video2.webm" type="video/webm" /></video></div>
<figcaption class="figure__caption" id="figure-b9223e-label"><span class="figure__caption__text">Ich bin ein Videotitel elitr, sed diam</span></figcaption>
</figure>
<!-- Image in Lightbox -->
<figure class="figure" aria-labelledby="figure-184227-label"><a class="figure__media figure__media--lightbox js-lightbox" href="https://via.placeholder.com/1044x550/F5F5F5/28281a.png?text=1044x550" data-size="1044x550">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="300" height="300" src="https://via.placeholder.com/300x300/A0A0A6/FFFFFF.png?text=300x300" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="300" height="300" data-src="https://via.placeholder.com/300x300/A0A0A6/FFFFFF.png?text=300x300" /></div><button class="figure__lightbox-button" aria-hidden="aria-hidden"><svg class="icon icon--plus" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></button>
</a></figure>
- const labelId = id && `${id}-label` || `figure-${randomString()}-label`;
#{tag || 'figure'}.figure(aria-labelledby=labelId)&attributes(attr)
if image && !video
#{lightbox && 'a' || 'div'}.figure__media(
class=classNames({
'figure__media--video': video && video.type === 'external',
'figure__media--lightbox js-lightbox': lightbox,
}),
href=lightbox && lightbox.src,
data-size=lightbox && `${lightbox.width}x${lightbox.height}`,
)
//- Image
+include('@image', image)
//- Copyright
if copyright
+include('@copyright', _.merge({
attr: {
class: 'figure__copyright',
},
}, copyright))
//- Lightbox icon
if lightbox
button.figure__lightbox-button(aria-hidden=true)
+include('@icon', { icon: 'plus' })
else if video && video.type === 'external'
.figure__video-wrapper
iframe.figure__video(
src= video.href && video.href,
allowFullscreen= true,
msAllowFullscreen= true,
webkitAllowFullscreen= true,
mozAllowFullscreen= true,
)
else if video && video.type === 'internal'
.figure__video-wrapper
video.figure__video(
controls= video.controls,
autoplay= video.autoplay,
loop= video.loop,
muted= video.muted,
playsinline= video.playsinline,
poster = video.poster
)
source(src=video.mp4 type='video/mp4')
source(src=video.webm type='video/webm')
//- Image/video caption
if (image || video) && caption
figcaption.figure__caption(id=labelId)
if caption.text
span.figure__caption__text !{render(caption.text, true)}
if caption.copyright
span.figure__caption__copyright !{render(caption.copyright, true)}
/* Figure mit Bild */
{
"image": {
"width": 1044,
"height": 550
}
}
/* Figure mit Bildunterschrift */
{
"image": {
"width": 1044,
"height": 550
},
"caption": {
"text": "Ich bin eine Bildunterschrift elitr, sed diam nmy consetetur sadipscing elitreirmod tempor",
"copyright": "Foto: Name/Agentur"
}
}
/* External Video */
{
"copyright": null,
"video": {
"type": "external",
"href": "https://www.youtube-nocookie.com/embed/K5VYIgub8y8?rel=0"
},
"caption": {
"text": "Ich bin ein Videotitel elitr, sed diam"
}
}
/* Internal Video */
{
"copyright": null,
"video": {
"type": "internal",
"controls": true,
"mp4": "../images/content/video2.m4v",
"webm": "../images/content/video2.webm"
},
"caption": {
"text": "Ich bin ein Videotitel elitr, sed diam"
}
}
/* Image in Lightbox */
{
"copyright": null,
"image": {
"width": 300,
"height": 300
},
"lightbox": {
"src": "https://via.placeholder.com/1044x550/F5F5F5/28281a.png?text=1044x550",
"width": 1044,
"height": 550
}
}
.figure {
position: relative;
}
.figure__media {
display: block;
line-height: 1;
position: relative;
transition: 0.5s ease-in-out;
}
.figure__video-wrapper {
height: 0;
padding-top: 56.25%;
position: relative;
}
.figure__video {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.figure__lightbox-button {
position: absolute;
right: 1.7rem;
top: 1.7rem;
z-index: 2;
}
.figure__caption {
// border-bottom: 1px solid lighten($color-gray, 20%);
font-size: 1.5rem;
line-height: calc(2 / 1.5);
padding-top: 1.8rem;
}
.figure__caption__text {
font-weight: $font-weight-bold;
&:not(:only-child) {
display: inline;
padding-right: 0.5rem;
}
}
.figure__caption__copyright {
display: inline;
}
There are no notes for this item.