<picture class="image" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
<source srcset="https://bildermangel.de/1380x776/fe7c09/130f26.webp?text=+++M:+690x388@2x+++ 2x, https://bildermangel.de/690x388/fe7c09/130f26.webp?text=+++M:+690x388@1x+++ 1x" media="(min-width: 512px) and (max-width: 767px)">
<source srcset="https://bildermangel.de/1760x990/fe7c09/130f26.webp?text=+++L:+880x495@2x+++ 2x, https://bildermangel.de/880x495/fe7c09/130f26.webp?text=+++L:+880x495@1x+++ 1x" media="(min-width: 768px) and (max-width: 1023px)">
<source srcset="https://bildermangel.de/2048x1152/fe7c09/130f26.webp?text=+++XL:+1024x576@2x+++ 2x, https://bildermangel.de/1024x576/fe7c09/130f26.webp?text=+++XL:+1024x576@1x+++ 1x" media="(min-width: 1024px)">
<img class="image__img" src="https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++" srcset="https://bildermangel.de/940x528/fe7c09/130f26.webp?text=+++S:+470x264@2x+++ 2x" width="470" height="264" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
{% set lazy = lazy ?? true %}
{% set decorative = decorative ?? false %}
{% set alt = alt ?? null %}
{% set placeholder = disablePlaceholder|default ? false : (placeholder ?? false) -%}
<picture {{ html_attributes({
class: 'image',
style: placeholder ? "background-image: url(#{placeholder})",
'data-image-cover': cover ?? false,
}, attrs ?? {}) }}>
{% for source in sources|default %}
<source {{ html_attributes({
srcset: source.srcset2x|default ? "#{source.srcset2x} 2x, #{source.srcset} 1x" : source.srcset,
media: source.media ?? false,
type: source.type ?? false,
width: source.width ?? false,
height: source.height ?? false,
sizes: source.sizes ?? false,
}) }}>
{% endfor -%}
<img {{ html_attributes({
class: 'image__img',
src: src,
srcset: src2x|default ? "#{src2x} 2x" : (srcset ?? false),
sizes: sizes ?? false,
width: width ?? false,
height: height ?? false,
alt: decorative ? '' : alt,
loading: lazy ? 'lazy' : null,
fetchpriority: fetchpriority ?? false,
role: decorative ? 'presentation' : null,
}) }} />
</picture>
{
"src": "https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++",
"width": 470,
"height": 264,
"alt": "Das ist ein Platzhalter-Bild",
"src2x": "https://bildermangel.de/940x528/fe7c09/130f26.webp?text=+++S:+470x264@2x+++",
"placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC",
"sources": [
{
"srcset": "https://bildermangel.de/690x388/fe7c09/130f26.webp?text=+++M:+690x388@1x+++",
"srcset2x": "https://bildermangel.de/1380x776/fe7c09/130f26.webp?text=+++M:+690x388@2x+++",
"media": "(min-width: 512px) and (max-width: 767px)"
},
{
"srcset": "https://bildermangel.de/880x495/fe7c09/130f26.webp?text=+++L:+880x495@1x+++",
"srcset2x": "https://bildermangel.de/1760x990/fe7c09/130f26.webp?text=+++L:+880x495@2x+++",
"media": "(min-width: 768px) and (max-width: 1023px)"
},
{
"srcset": "https://bildermangel.de/1024x576/fe7c09/130f26.webp?text=+++XL:+1024x576@1x+++",
"srcset2x": "https://bildermangel.de/2048x1152/fe7c09/130f26.webp?text=+++XL:+1024x576@2x+++",
"media": "(min-width: 1024px)"
}
]
}
.image {
background-repeat: no-repeat;
background-size: cover;
border-radius: var(--image-border-radius, 0);
display: block;
flex-grow: 1;
line-height: 0;
max-block-size: var(--image-max-block-size, none);
max-inline-size: var(--image-max-inline-size, none);
overflow: clip;
position: relative;
&:is([data-image-cover]) {
--image-block-size: 100%;
--image-inset: 0;
--image-object-fit: cover;
--image-position: absolute;
}
.js &:is(:not([data-image-loaded])) {
--image-opacity: 0;
}
}
.image__img {
block-size: var(--image-block-size, auto);
display: block;
font-size: 1.4rem;
inline-size: var(--image-inline-size, 100%);
inset: var(--image-inset, auto);
object-fit: var(--image-object-fit, contain);
object-position: var(--image-object-position, 50% 50%);
opacity: var(--image-opacity, 1);
position: var(--image-position, static);
scale: var(--image-zoom, 1);
transition: opacity var(--duration-long), scale var(--duration-default);
}
import onLoad from '../../../javascripts/utils/onLoad';
const setLoaded = ($image: HTMLImageElement) => {
if (!$image.complete || $image.naturalHeight === 0) {
return;
}
const $container = $image.closest<HTMLElement>('.image');
if ($container) {
$image.addEventListener(
'transitionend',
() => {
$container.style.backgroundImage = '';
},
{ once: true },
);
$container.setAttribute('data-image-loaded', 'data-image-loaded');
}
};
onLoad<HTMLImageElement>('.image__img', setLoaded);
document.addEventListener(
'load',
({ target: $image }) => {
if ($image instanceof HTMLImageElement && $image.matches('.image__img')) {
setLoaded($image);
}
},
{ capture: true },
);
No notes defined.