<div class="image image--contain loading" style="padding-top: 46.875%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="640" height="300" src="https://via.placeholder.com/640x300/A0A0A6/FFFFFF.png?text=640x300" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="640" height="300" data-src="https://via.placeholder.com/640x300/A0A0A6/FFFFFF.png?text=640x300" /></div>
-
var imageSrc = src && src
if (!src) {
imageSrc = placeholderImage(width, height, 'FFFFFF', 'A0A0A6');
}
else {
imageSrc = path(imageSrc)
}
.image(
class=classList({ 'image--cover': cover, 'image--contain': contain, 'loading': lazyload }),
style=(((!cover && width && height) && `padding-top: ${(height / width) * 100}%;`)),
)&attributes(attr)
//- Fallback and placeholder for lazyloading
if lazyload
noscript
img.image__fallback(
alt=alt || '',
width=width,
height=height,
src=imageSrc,
role=decorative && 'presentation',
)
//- Image
img.image__img(
alt=alt || '',
width=width,
height=height,
class=lazyload && 'js-lazyload',
src=!lazyload && imageSrc,
'data-src'=lazyload ? imageSrc : null,
role=decorative && 'presentation',
)
{
"src": null,
"alt": "Das ist ein Alt-Text. Das ist ein Pflichtfeld.",
"width": 640,
"height": 300,
"lazyload": true,
"cover": null,
"contain": true
}
.image {
line-height: 0;
position: relative;
&.loading--finished {
padding-top: 0 !important;
}
}
.image__img,
.image__fallback {
display: block;
height: auto;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
.loading--finished & {
position: static;
}
}
.image--contain,
.image--cover {
height: 100%;
padding-top: 0 !important;
.preview & {
height: 30rem;
}
.image__img,
.image__fallback {
height: 100%;
}
}
.image--cover .image__img,
.image--cover .image__fallback {
object-fit: cover;
}
.image--contain .image__img,
.image--contain .image__fallback {
object-fit: contain;
}
There are no notes for this item.