<!-- Default -->
<img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/500x200/cccaca/333333.png?text=Image+default-src" />
<!-- Lazyload -->
<img class="image lazyload" alt="Alt Text sieht anders aus" data-src="https://via.placeholder.com/500x200/cccaca/333333.png?text=Image+default-src" />
<!-- Responsive Image -->
<img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/1000x540/cccaca/333333.png?text=Image+header+home+default-src" sizes="(min-width: 1000px) 1400px, (min-width: 740px) 865px, (min-width: 375px) 480px, 100vw" srcset="https://via.placeholder.com/1400x540/789693/333333.png?text=Image+header+home+1400w 1400w, https://via.placeholder.com/865x334/7bbbbc/333333.png?text=Image+header+home+865w 865w, https://via.placeholder.com/480x185/76c0e4/333333.png?text=Image+header+home+480w 480w"
/>
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
attr.src = image;
if (modifier) {
attr.class.push(`image--${modifier}`);
}
if (sizes) {
attr.sizes = '';
for (i = 0; i < sizes.length; i += 1) {
attr.sizes += `${sizes[i]['query']} ${sizes[i]['w']}, `;
}
attr.sizes += '100vw';
}
if (srcset) {
attr.srcset = '';
for (i = 0; i < srcset.length; i += 1) {
const delim = !(i == srcset.length-1) ? ', ' : '';
attr.srcset += `${srcset[i]['src']} ${srcset[i]['w']}${delim}`;
}
}
if (lazyload) {
attr.class.push('lazyload');
attr['data-src'] = attr.src;
delete attr.src;
if (attr.sizes) {
attr['data-sizes'] = attr.sizes;
delete attr.sizes;
}
if (attr.srcset) {
attr['data-srcset'] = attr.srcset;
delete attr.srcset;
}
}
img.image(alt=alt, width=width, height=height)&attributes(attr)
/* Default */
{
"lazyload": null,
"image": "https://via.placeholder.com/500x200/cccaca/333333.png?text=Image+default-src",
"alt": "Alt Text sieht anders aus"
}
/* Lazyload */
{
"lazyload": true,
"image": "https://via.placeholder.com/500x200/cccaca/333333.png?text=Image+default-src",
"alt": "Alt Text sieht anders aus"
}
/* Responsive Image */
{
"lazyload": null,
"image": "https://via.placeholder.com/1000x540/cccaca/333333.png?text=Image+header+home+default-src",
"alt": "Alt Text sieht anders aus",
"sizes": [
{
"query": "(min-width: 1000px)",
"w": "1400px"
},
{
"query": "(min-width: 740px)",
"w": "865px"
},
{
"query": "(min-width: 375px)",
"w": "480px"
}
],
"srcset": [
{
"w": "1400w",
"src": "https://via.placeholder.com/1400x540/789693/333333.png?text=Image+header+home+1400w"
},
{
"w": "865w",
"src": "https://via.placeholder.com/865x334/7bbbbc/333333.png?text=Image+header+home+865w"
},
{
"w": "480w",
"src": "https://via.placeholder.com/480x185/76c0e4/333333.png?text=Image+header+home+480w"
}
]
}
.image {
height: auto;
width: 100%;
}
There are no notes for this item.