hkk Frontend 2017

Bild 

<!-- Default -->
<div class="image-wrap">
    <img class="image" alt="Alt Text sieht anders aus" 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-de51" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</div>


<!-- Lazyload -->
<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-a02c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</div>


<!-- Responsive Image -->
<div class="image-wrap">
    <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"
    />
    <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-6c32" 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)
 
/* Default */
{
  "lazyload": null,
  "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"
}


/* Lazyload */
{
  "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"
}


/* Responsive Image */
{
  "lazyload": null,
  "copyright": "Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann",
  "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"
    }
  ]
}
  • Content: 
    .image {
  height: auto;
  width: 100%;
}

.image-wrap {
  position: relative;
}

.image__copyright {
  bottom: 0;
  position: absolute;
  right: 0;
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/components/atoms/image/image.scss
  • Size: 151 Bytes

There are no notes for this item.