HIDA - Helmholtz Information and Data Science Academy

Figure: Image in Lightbox 

<figure class="figure" aria-labelledby="figure-9a23b8-label"><a class="figure__media figure__media--lightbox js-lightbox" href="https://via.placeholder.com/1044x550/F5F5F5/28281a.png?text=1044x550" data-size="1044x550">
        <div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="300" height="300" src="https://via.placeholder.com/300x300/A0A0A6/FFFFFF.png?text=300x300" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="300" height="300" data-src="https://via.placeholder.com/300x300/A0A0A6/FFFFFF.png?text=300x300" /></div><button class="figure__lightbox-button" aria-hidden="aria-hidden"><svg class="icon icon--plus" viewBox="0 0 200 200" role="presentation">
                <use xlink:href="#icon-plus"></use>
            </svg></button>
    </a></figure>
 
- const labelId = id && `${id}-label` || `figure-${randomString()}-label`;
#{tag || 'figure'}.figure(aria-labelledby=labelId)&attributes(attr)

  if image && !video
    #{lightbox && 'a' || 'div'}.figure__media(
      class=classNames({
        'figure__media--video': video && video.type === 'external',
        'figure__media--lightbox js-lightbox': lightbox,
      }),
      href=lightbox && lightbox.src,
      data-size=lightbox && `${lightbox.width}x${lightbox.height}`,
      )

      //- Image
      +include('@image', image)

      //- Copyright
      if copyright
        +include('@copyright', _.merge({
          attr: {
            class: 'figure__copyright',
          },
        }, copyright))

      //- Lightbox icon
      if lightbox
        button.figure__lightbox-button(aria-hidden=true)
          +include('@icon', { icon: 'plus' })

  else if video && video.type === 'external'
    .figure__video-wrapper
      iframe.figure__video(
        src= video.href && video.href,
        allowFullscreen= true,
        msAllowFullscreen= true,
        webkitAllowFullscreen= true,
        mozAllowFullscreen= true,
      )

  else if video && video.type === 'internal'
    .figure__video-wrapper
      video.figure__video(
        controls= video.controls,
        autoplay= video.autoplay,
        loop= video.loop,
        muted= video.muted,
        playsinline= video.playsinline,
        poster = video.poster
      )
        source(src=video.mp4 type='video/mp4')
        source(src=video.webm type='video/webm')

  //- Image/video caption
  if (image || video) && caption
    figcaption.figure__caption(id=labelId)
      if caption.text
        span.figure__caption__text !{render(caption.text, true)}
      if caption.copyright
        span.figure__caption__copyright !{render(caption.copyright, true)}
 
{
  "copyright": null,
  "image": {
    "width": 300,
    "height": 300
  },
  "lightbox": {
    "src": "https://via.placeholder.com/1044x550/F5F5F5/28281a.png?text=1044x550",
    "width": 1044,
    "height": 550
  }
}
  • Content: 
    .figure {
  position: relative;
}

.figure__media {
  display: block;
  line-height: 1;
  position: relative;
  transition: 0.5s ease-in-out;
}

.figure__video-wrapper {
  height: 0;
  padding-top: 56.25%;
  position: relative;
}

.figure__video {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.figure__lightbox-button {
  position: absolute;
  right: 1.7rem;
  top: 1.7rem;
  z-index: 2;
}

.figure__caption {
  // border-bottom: 1px solid lighten($color-gray, 20%);
  font-size: 1.5rem;
  line-height: calc(2 / 1.5);
  padding-top: 1.8rem;
}

.figure__caption__text {
  font-weight: $font-weight-bold;

  &:not(:only-child) {
    display: inline;
    padding-right: 0.5rem;
  }
}

.figure__caption__copyright {
  display: inline;
}
  • URL: /components/raw/figure/figure.scss
  • Filesystem Path: src/components/molecules/figure/figure.scss
  • Size: 778 Bytes

There are no notes for this item.