<figure class="figure" aria-labelledby="figure-318af3-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-318af3-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>
- 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)}
{
"image": {
"width": 1044,
"height": 550
},
"caption": {
"text": "Ich bin eine Bildunterschrift elitr, sed diam nmy consetetur sadipscing elitreirmod tempor",
"copyright": "Foto: Name/Agentur"
}
}
.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.