<div class="image-wrap">
<img class="image lazyload" alt="Alt Text sieht anders aus" data-src="https://via.placeholder.com/500x200/cccaca/333333.png?text=Image+default-src" />
<button class="copyright js-tooltip image__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-ad2c" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-copyright"></use>
</svg>
</button>
</div>
-
//- 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;
}
}
if copyright
.image-wrap
img.image(alt=alt, width=width, height=height)&attributes(attr)
!= include('@copyright', {title: copyright, attr: {class: 'image__copyright'}})
else
img.image(alt=alt, width=width, height=height)&attributes(attr)
{
"lazyload": true,
"copyright": "Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann",
"image": "https://via.placeholder.com/500x200/cccaca/333333.png?text=Image+default-src",
"alt": "Alt Text sieht anders aus"
}
.image {
height: auto;
width: 100%;
}
.image-wrap {
position: relative;
}
.image__copyright {
bottom: 0;
position: absolute;
right: 0;
}
There are no notes for this item.