Adminportal MLU

Bild-, Audio- und Videomodul @figure

Abgenommen

Bild @figure--image

HTML
Kontext

<!-- Bild -->
<figure class="figure js-figure" aria-labelledby="figure-5298-label">
  <div class="figure__media">
    <div class="image loading" style="padding-top: 75.05882352941177%;">
      <noscript>
        <img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
          width="850" />
      </noscript>
      <img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
        width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0</span>
      <a class="link link--external" href="https://creativecommons.org/licenses/by-nc/3.0/de/" title="Nutzungsrechte" rel="noopener noreferrer" target="_blank"></a>
      </span>
      </span>
    </div>
  </div>
  <figcaption class="figure__caption" id="figure-5298-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>

{
  "caption": "Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor",
  "image": {
    "alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
    "lazyload": true,
    "copyright": {
      "cc_link": true,
      "title": "Nutzungsrechte",
      "external": "external",
      "link": "https://creativecommons.org/licenses/by-nc/3.0/de/",
      "text": "Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0"
    },
    "src": "/images/dummy-images/850x638.jpg",
    "src2x": "/images/dummy-images/850x638@2x.jpg",
    "width": 850,
    "height": 638
  }
}

Bild mit CC @figure--image-pr

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Bild mit CC -->
<figure class="figure js-figure" aria-labelledby="figure-a206-label">
  <div class="figure__media">
    <div class="image image--not-responsive">
      <img class="image__img" src="/images/slider-images/570x570@1x.jpg" data-srcset="../images/slider-images/570x570@2x.jpg 2x, ../images/slider-images/570x570@1x.jpg 1x" width="570" height="570" alt="Neuen Methode zum Impfen von Pflanzen." />
    </div>
  </div>
  <figcaption class="figure__caption" id="figure-a206-label">Neuen Methode zum Impfen von Pflanzen.<span class="copy">Foto: Romy Berger | Uni Halle</span><span class="cc__caption"><button class="cc js-cc">| ©</button>
<div class="cc__container" role="tooltip">
  <a class="cc__link" href="https://creativecommons.org/licenses/by-nc/3.0/de/" rel="noopener noreferrer" target="_blank">
    <figure class="figure js-figure" aria-labelledby="figure-130d-label">
      <div class="figure__media">
        <div class="image image--not-responsive">
          <img class="image__img" src="/images/commons/by-nc.svg" data-srcset="../images/commons/by-nc.svg 2x, ../images/commons/by-nc.svg 1x" width="20rem" alt="BY NC" />
        </div>
      </div>
      <figcaption class="figure__caption" id="figure-130d-label">Namensnennung, nicht kommerzielle Verwendung</figcaption>
    </figure>
  </a>
</div></span><span class="download__caption"><a class="link link--download" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf">Download (JPG, 12KB, barrierefrei)</a></span></figcaption>
</figure>

{
  "caption": "Neuen Methode zum Impfen von Pflanzen.",
  "image": {
    "src": "/images/slider-images/570x570@1x.jpg",
    "src2x": "/images/slider-images/570x570@2x.jpg",
    "alt": "Neuen Methode zum Impfen von Pflanzen.",
    "width": 570,
    "height": 570,
    "notresponsive": true
  },
  "copy": "Foto: Romy Berger | Uni Halle",
  "cc": true,
  "download": true
}

Bild mit vergrößerung @figure--image-lightbox

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Bild mit vergrößerung -->
<figure class="figure js-figure" aria-labelledby="figure-a0e5-label">
  <a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/1200x800/e6e6e6/000&amp;text=lightbox+image+magnification" data-type="image" data-width="1200" data-height="800">
    <div class="image loading" style="padding-top: 75.05882352941177%;">
      <noscript>
        <img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
          width="850" />
      </noscript>
      <img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
        width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
      </span>
    </div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-plus"></use>
</svg></span></span>
  </a>
  <figcaption class="figure__caption" id="figure-a0e5-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>

{
  "caption": "Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor",
  "image": {
    "alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
    "lazyload": true,
    "copyright": {
      "text": "Foto: Romy Berger © MLU Halle-Wittenberg"
    },
    "src": "/images/dummy-images/850x638.jpg",
    "src2x": "/images/dummy-images/850x638@2x.jpg",
    "width": 850,
    "height": 638
  },
  "lightbox": {
    "type": "image",
    "href": "https://dummyimage.com/1200x800/e6e6e6/000&text=lightbox+image+magnification",
    "gallery": null,
    "width": 1200,
    "height": 800
  }
}

Bild mit Vergrößerung für material @figure--image-lightbox--thumbnail

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Bild mit Vergrößerung für material -->
<figure class="figure js-figure" aria-labelledby="figure-68d3-label">
  <a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&amp;text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
    <div class="image loading" style="padding-top: 144.44444444444443%;">
      <noscript>
        <img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
          width="90" />
      </noscript>
      <img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
        width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
      </span>
    </div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-plus"></use>
</svg></span></span>
  </a>
  <figcaption class="figure__caption" id="figure-68d3-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>

{
  "caption": "Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor",
  "image": {
    "alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
    "lazyload": true,
    "copyright": {
      "text": "Foto: Romy Berger © MLU Halle-Wittenberg"
    },
    "src": "/images/dummy-images/90x130.jpg",
    "src2x": "/images/dummy-images/90x130.jpg",
    "width": 90,
    "height": 130
  },
  "lightbox": {
    "type": "image",
    "href": "https://dummyimage.com/900x1300/e6e6e6/000&text=lightbox+image+magnification",
    "gallery": null,
    "width": 90,
    "height": 130
  }
}

Bild @figure--image-frame

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Bild -->
<figure class="figure js-figure figure--frame" aria-labelledby="figure-d907-label">
  <div class="figure__border figure__border--top-right"></div>
  <div class="figure__border figure__border--bottom-left"></div>
  <div class="figure__media">
    <div class="image loading" style="padding-top: 75.05882352941177%;">
      <noscript>
        <img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
          width="850" />
      </noscript>
      <img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
        width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0</span>
      <a class="link link--external" href="https://creativecommons.org/licenses/by-nc/3.0/de/" title="Nutzungsrechte" rel="noopener noreferrer" target="_blank"></a>
      </span>
      </span>
    </div>
  </div>
</figure>

{
  "caption": null,
  "frame": true,
  "image": {
    "alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
    "lazyload": true,
    "copyright": {
      "cc_link": true,
      "title": "Nutzungsrechte",
      "external": "external",
      "link": "https://creativecommons.org/licenses/by-nc/3.0/de/",
      "text": "Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0"
    },
    "src": "/images/dummy-images/850x638.jpg",
    "src2x": "/images/dummy-images/850x638@2x.jpg",
    "width": 850,
    "height": 638
  }
}

Externes Video @figure--external-video

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Externes Video -->
<figure class="figure js-figure" aria-labelledby="figure-0268-label">
  <div class="figure__media">
    <a class="figure__play" href="https://www.youtube.com/watch?v=dwyPdrTw9cE">
      <div class="image" style="padding-top: 56.25%;">
        <img class="image__img" src="/images/dummy-images/youtube_2.jpg" width="1920" height="1080" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Video beschreibt." />
      </div>
      <button class="icon-button icon-button--large figure__play-button" title="Video abspielen" type="button"><span class="icon-button__text u-hidden-visually">Video abspielen</span><span class="icon-button__circle"><svg class="icon icon--play icon-button__icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-play"></use>
</svg></span></button>
    </a>
  </div>
  <figcaption class="figure__caption" id="figure-0268-label">Hier steht eine Unterzeile (02:30)</figcaption>
</figure>

{
  "caption": "Hier steht eine Unterzeile (02:30)",
  "video": {
    "type": "external",
    "link": "https://www.youtube.com/watch?v=dwyPdrTw9cE"
  },
  "image": {
    "src": "/images/dummy-images/youtube_2.jpg",
    "alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Video beschreibt.",
    "width": 1920,
    "height": 1080
  }
}

Internes Video @figure--internal-video

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Internes Video -->
<figure class="figure js-figure" aria-labelledby="figure-e972-label">
  <div class="figure__media">
    <div class="figure__video-wrapper">
      <div class="figure__video">
        <video class="figure__video" poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" controls="controls" preload="metadata" crossorigin="crossorigin">
          <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" />
          <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm" />
          <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default="default" />
          <track kind="descriptions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" />
        </video>
      </div>
    </div>
  </div>
  <figcaption class="figure__caption" id="figure-e972-label">Hier steht eine Unterzeile (02:30)</figcaption>
</figure>

{
  "caption": "Hier steht eine Unterzeile (02:30)",
  "video": {
    "alt": "Das Video-Element soll einen alternativen Text enthalten, der den Inhalt der Datei beschreibt.",
    "type": "internal",
    "poster": "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",
    "sources": [
      {
        "src": "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4",
        "type": "video/mp4"
      },
      {
        "src": "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",
        "type": "video/webm"
      }
    ],
    "tracks": [
      {
        "kind": "captions",
        "label": "English",
        "srclang": "en",
        "src": "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",
        "default": true
      },
      {
        "kind": "descriptions",
        "label": "English",
        "srclang": "en",
        "src": "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
      }
    ]
  }
}

Audiodatei @figure--audio

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Audiodatei -->
<figure class="figure js-figure figure--audio" aria-labelledby="figure-6669-label">
  <figcaption class="figure__caption">
    <p class="figure__label" id="figure-6669-label">Titel der Audiodatei</p>
    <p class="figure__description">Optionaler Erklärtext. Zeichenanzahl ist auf 80 Zeichen begrenzt.</p>
  </figcaption>
  <audio class="figure__audio" controls="controls" preload="metadata" crossorigin="crossorigin">
    <source src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3" type="audio/mp3" />
    <source src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg" type="audio/ogg" />
  </audio>
</figure>

{
  "caption": "Optionaler Erklärtext. Zeichenanzahl ist auf 80 Zeichen begrenzt.",
  "label": "Titel der Audiodatei",
  "audio": {
    "alt": "Das Audio-Element soll einen alternativen Text enthalten, der den Inhalt der Datei beschreibt.",
    "sources": [
      {
        "src": "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",
        "type": "audio/mp3"
      },
      {
        "src": "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",
        "type": "audio/ogg"
      }
    ]
  }
}

Urheberrechtslizenz @figure--image-cc

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Urheberrechtslizenz -->
<figure class="figure js-figure" aria-labelledby="figure-6882-label">
  <div class="figure__media">
    <div class="image image--not-responsive">
      <img class="image__img" src="/images/commons/by-nc.svg" data-srcset="../images/commons/by-nc.svg 2x, ../images/commons/by-nc.svg 1x" width="20rem" alt="BY NC" />
    </div>
  </div>
  <figcaption class="figure__caption" id="figure-6882-label">Namensnennung, nicht kommerzielle Verwendung</figcaption>
</figure>

{
  "caption": "Namensnennung, nicht kommerzielle Verwendung",
  "image": {
    "src": "/images/commons/by-nc.svg",
    "src2x": "/images/commons/by-nc.svg",
    "width": "20rem",
    "alt": "BY NC",
    "notresponsive": true
  }
}

Bild-, Audio- und Videomodul @figure

# Bild @figure--image

# Bild mit CC @figure--image-pr

# Bild mit vergrößerung @figure--image-lightbox

# Bild mit Vergrößerung für material @figure--image-lightbox--thumbnail

# Bild @figure--image-frame

# Externes Video @figure--external-video

# Internes Video @figure--internal-video

# Audiodatei @figure--audio

# Urheberrechtslizenz @figure--image-cc

Bild @figure--image

Bild mit CC @figure--image-pr

Bild mit vergrößerung @figure--image-lightbox

Bild mit Vergrößerung für material @figure--image-lightbox--thumbnail

Bild @figure--image-frame

Externes Video @figure--external-video

Internes Video @figure--internal-video

Audiodatei @figure--audio

Urheberrechtslizenz @figure--image-cc