HIDA - Helmholtz Information and Data Science Academy

Picture 

<picture>
    <source srcset="https://placehold.co/1920x1920/A0A0A6/FFFFFF.webp?text=1920x1920-webp" type="image/webp" media="(min-width:78.75em)" />
    <source srcset="https://placehold.co/1920x1920/A0A0A6/FFFFFF.jpg?text=1920x1920-jpg" type="image/jpg" media="(min-width:78.75em)" />
    <source srcset="https://placehold.co/1259x1259/A0A0A6/FFFFFF.webp?text=1259x1259-webp" type="image/webp" media="(min-width:64em)" />
    <source srcset="https://placehold.co/1259x1259/A0A0A6/FFFFFF.jpg?text=1259x1259-jpg" type="image/jpg" media="(min-width:64em)" />
    <source srcset="https://placehold.co/1023x1023/A0A0A6/FFFFFF.webp?text=1023x1023-webp" type="image/webp" media="(min-width:48em)" />
    <source srcset="https://placehold.co/1023x1023/A0A0A6/FFFFFF.jpg?text=1023x1023-jpg" type="image/jpg" media="(min-width:48em)" />
    <source srcset="https://placehold.co/767x767/A0A0A6/FFFFFF.webp?text=767x767-webp" type="image/webp" media="(min-width:30em)" />
    <source srcset="https://placehold.co/767x767/A0A0A6/FFFFFF.jpg?text=767x767-jpg" type="image/jpg" media="(min-width:30em)" />
    <source srcset="https://placehold.co/479x479/A0A0A6/FFFFFF.webp?text=479x479-webp" type="image/webp" />
    <img src="https://picsum.photos/id/FFFFFF/479/479" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="479" height="479" loading="lazy" />
</picture>
 
-
  var imageSrc = src && src
  if (!src) {
    imageSrc = placeholderImage(width, height, 'FFFFFF', 'A0A0A6');
  }

  const baseSize = 16;

picture()&attributes(attr)
  if items
    each item in items
      source(
        srcset=item.src
        type=`image/${item.type}`
        media=item.breakpoint && `(min-width:${item.breakpoint / baseSize}em)`
      )
  = '\n'
  img(
    src=imageSrc,
    alt=alt || '',
    width=width,
    height=height,
    loading=lazyload && 'lazy',
    role=decorative && 'presentation',
    class=imageClass && `${imageClass}`,
  )
  = '\n'
 
{
  "src": null,
  "alt": "Das ist ein Alt-Text. Das ist ein Pflichtfeld.",
  "width": 479,
  "height": 479,
  "lazyload": true,
  "items": [
    {
      "src": "https://placehold.co/1920x1920/A0A0A6/FFFFFF.webp?text=1920x1920-webp",
      "type": "webp",
      "breakpoint": 1260
    },
    {
      "src": "https://placehold.co/1920x1920/A0A0A6/FFFFFF.jpg?text=1920x1920-jpg",
      "type": "jpg",
      "breakpoint": 1260
    },
    {
      "src": "https://placehold.co/1259x1259/A0A0A6/FFFFFF.webp?text=1259x1259-webp",
      "type": "webp",
      "breakpoint": 1024
    },
    {
      "src": "https://placehold.co/1259x1259/A0A0A6/FFFFFF.jpg?text=1259x1259-jpg",
      "type": "jpg",
      "breakpoint": 1024
    },
    {
      "src": "https://placehold.co/1023x1023/A0A0A6/FFFFFF.webp?text=1023x1023-webp",
      "type": "webp",
      "breakpoint": 768
    },
    {
      "src": "https://placehold.co/1023x1023/A0A0A6/FFFFFF.jpg?text=1023x1023-jpg",
      "type": "jpg",
      "breakpoint": 768
    },
    {
      "src": "https://placehold.co/767x767/A0A0A6/FFFFFF.webp?text=767x767-webp",
      "type": "webp",
      "breakpoint": 480
    },
    {
      "src": "https://placehold.co/767x767/A0A0A6/FFFFFF.jpg?text=767x767-jpg",
      "type": "jpg",
      "breakpoint": 480
    },
    {
      "src": "https://placehold.co/479x479/A0A0A6/FFFFFF.webp?text=479x479-webp",
      "type": "webp",
      "breakpoint": null
    }
  ]
}
  • Content: 
    .image {
  line-height: 0;
  position: relative;

  &.loading--finished {
    padding-top: 0 !important;
  }
}

.image__img,
.image__fallback {
  display: block;
  height: auto;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;

  .loading--finished & {
    position: static;
  }
}

.image--contain,
.image--cover {
  height: 100%;
  padding-top: 0 !important;

  .preview & {
    height: 30rem;
  }

  .image__img,
  .image__fallback {
    height: 100%;
  }
}

.image--cover .image__img,
.image--cover .image__fallback {
  object-fit: cover;
}

.image--contain .image__img,
.image--contain .image__fallback {
  object-fit: contain;
}
  • URL: /components/raw/picture/picture.scss
  • Filesystem Path: src/components/atoms/picture/picture.scss
  • Size: 657 Bytes

There are no notes for this item.