hkk Frontend 2017

Bild 

<!-- 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"
    }
  ]
}

There are no notes for this item.