Adminportal MLU

Bild mit Copyright @image

Abgenommen

Für den Webauftritt der MLU kommen Bilder in verschiedenen Bildformaten zum Einsatz.

Standard-Bild (Artikel) @image

HTML
Kontext

<!-- Standard-Bild (Artikel) -->
<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>

{
  "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
}

Bild für das Material @image--thumbnail

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Bild für das Material -->
<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>

{
  "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
}

Standard-Bild mit CC (Artikel) @image--default-cc

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Standard-Bild mit CC (Artikel) -->
<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>

{
  "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
}

Cover @image--cover

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Cover -->
<div class="image image--cover loading">
  <noscript>
    <img class="image__fallback" srcset="../images/dummy-images/720x360@2x.jpg 2x, ../images/dummy-images/720x360.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="360" src="/images/dummy-images/720x360.jpg"
      width="720" />
  </noscript>
  <img class="image__img js-lazyload" data-src="../images/dummy-images/720x360.jpg" data-srcset="../images/dummy-images/720x360@2x.jpg 2x, ../images/dummy-images/720x360.jpg 1x" srcset="../images/dummy-images/720x360@2x.jpg 2x, ../images/dummy-images/720x360.jpg 1x"
    width="720" height="360" 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>

{
  "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/720x360.jpg",
  "src2x": "/images/dummy-images/720x360@2x.jpg",
  "cover": true,
  "width": 720,
  "height": 360
}

Bühnenheader Onepager (2:1) @image--header

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Bühnenheader Onepager (2:1) -->
<div class="image loading" style="padding-top: 50%;">
  <noscript>
    <img class="image__fallback" srcset="../images/dummy-images/720x360@2x.jpg 2x, ../images/dummy-images/stage.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="360" src="/images/dummy-images/stage.jpg"
      width="720" />
  </noscript>
  <img class="image__img js-lazyload" data-src="../images/dummy-images/stage.jpg" data-srcset="../images/dummy-images/720x360@2x.jpg 2x, ../images/dummy-images/stage.jpg 1x" srcset="../images/dummy-images/720x360@2x.jpg 2x, ../images/dummy-images/stage.jpg 1x"
    width="720" height="360" 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>

{
  "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/stage.jpg",
  "src2x": "/images/dummy-images/720x360@2x.jpg",
  "width": 720,
  "height": 360
}

Bühnenheader Startseite (5:3) @image--frontpage-header

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Bühnenheader Startseite (5:3) -->
<div class="image loading" style="padding-top: 60%;">
  <noscript>
    <img class="image__fallback" srcset="../images/dummy-images/stage.jpg 2x, ../images/dummy-images/stage.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="486" src="/images/dummy-images/stage.jpg"
      width="810" />
  </noscript>
  <img class="image__img js-lazyload" data-src="../images/dummy-images/stage.jpg" data-srcset="../images/dummy-images/stage.jpg 2x, ../images/dummy-images/stage.jpg 1x" srcset="../images/dummy-images/stage.jpg 2x, ../images/dummy-images/stage.jpg 1x"
    width="810" height="486" 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>

{
  "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/stage.jpg",
  "src2x": "/images/dummy-images/stage.jpg",
  "width": 810,
  "height": 486
}

Kupferstichgrafik (1:1) @image--copper-engraving

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Kupferstichgrafik (1:1) -->
<div class="image loading" style="padding-top: 100%;">
  <noscript>
    <img class="image__fallback" srcset="../images/dummy-images/kupferstich.png 2x, ../images/dummy-images/kupferstich.png 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="448" src="/images/dummy-images/kupferstich.png"
      width="448" />
  </noscript>
  <img class="image__img js-lazyload" data-src="../images/dummy-images/kupferstich.png" data-srcset="../images/dummy-images/kupferstich.png 2x, ../images/dummy-images/kupferstich.png 1x" srcset="../images/dummy-images/kupferstich.png 2x, ../images/dummy-images/kupferstich.png 1x"
    width="448" height="448" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--left"><span class="copyright copyright--inverted"><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>

{
  "alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
  "lazyload": true,
  "src": "/images/dummy-images/kupferstich.png",
  "src2x": "/images/dummy-images/kupferstich.png",
  "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",
    "inverted": true,
    "position": "left"
  },
  "width": 448,
  "height": 448
}

Teaser (5:3) @image--teaser

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Teaser (5:3) -->
<div class="image loading" style="padding-top: 60.22727272727273%;">
  <noscript>
    <img class="image__fallback" srcset="../images/dummy-images/440x265@2x.jpg 2x, ../images/dummy-images/440x265.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="265" src="/images/dummy-images/440x265.jpg"
      width="440" />
  </noscript>
  <img class="image__img js-lazyload" data-src="../images/dummy-images/440x265.jpg" data-srcset="../images/dummy-images/440x265@2x.jpg 2x, ../images/dummy-images/440x265.jpg 1x" srcset="../images/dummy-images/440x265@2x.jpg 2x, ../images/dummy-images/440x265.jpg 1x"
    width="440" height="265" 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>

{
  "alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
  "lazyload": true,
  "src": "/images/dummy-images/440x265.jpg",
  "src2x": "/images/dummy-images/440x265@2x.jpg",
  "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"
  },
  "width": 440,
  "height": 265
}

Teaser (5:3) @image--teaser-horizontal

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Teaser (5:3) -->
<div class="image loading image--not-responsive">
  <noscript>
    <img class="image__fallback" srcset="../images/dummy-images/720x360@2x.jpg 2x, ../images/dummy-images/720x360.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="360" src="/images/dummy-images/720x360.jpg"
      width="720" />
  </noscript>
  <img class="image__img js-lazyload" data-src="../images/dummy-images/720x360.jpg" data-srcset="../images/dummy-images/720x360@2x.jpg 2x, ../images/dummy-images/720x360.jpg 1x" srcset="../images/dummy-images/720x360@2x.jpg 2x, ../images/dummy-images/720x360.jpg 1x"
    width="720" height="360" 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>

{
  "alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
  "lazyload": true,
  "src": "/images/dummy-images/720x360.jpg",
  "src2x": "/images/dummy-images/720x360@2x.jpg",
  "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"
  },
  "width": 720,
  "height": 360,
  "notresponsive": true
}

Teaser (5:3) @image--teaser-horizontal-small

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Teaser (5:3) -->
<div class="image loading image--not-responsive">
  <noscript>
    <img class="image__fallback" srcset="../images/dummy-images/320x200@2x.jpg 2x, ../images/dummy-images/320x200.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="200" src="/images/dummy-images/320x200.jpg"
      width="320" />
  </noscript>
  <img class="image__img js-lazyload" data-src="../images/dummy-images/320x200.jpg" data-srcset="../images/dummy-images/320x200@2x.jpg 2x, ../images/dummy-images/320x200.jpg 1x" srcset="../images/dummy-images/320x200@2x.jpg 2x, ../images/dummy-images/320x200.jpg 1x"
    width="320" height="200" 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>

{
  "alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
  "lazyload": true,
  "src": "/images/dummy-images/320x200.jpg",
  "src2x": "/images/dummy-images/320x200@2x.jpg",
  "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"
  },
  "width": 320,
  "height": 200,
  "notresponsive": true
}

Teaser (3:5) @image--teaser-vertical

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Teaser (3:5) -->
<div class="image loading image--not-responsive">
  <noscript>
    <img class="image__fallback" srcset="../images/dummy-images/265x440@2x.jpg 2x, ../images/dummy-images/265x440.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="440" src="/images/dummy-images/265x440.jpg"
      width="265" />
  </noscript>
  <img class="image__img js-lazyload" data-src="../images/dummy-images/265x440.jpg" data-srcset="../images/dummy-images/265x440@2x.jpg 2x, ../images/dummy-images/265x440.jpg 1x" srcset="../images/dummy-images/265x440@2x.jpg 2x, ../images/dummy-images/265x440.jpg 1x"
    width="265" height="440" 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>

{
  "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/265x440.jpg",
  "src2x": "/images/dummy-images/265x440@2x.jpg",
  "width": 265,
  "height": 440,
  "notresponsive": true
}

Overlay @image--overlay

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Overlay -->
<div class="image loading" style="padding-top: 113.4020618556701%;">
  <noscript>
    <img class="image__fallback" srcset="../images/dummy-images/lion.svg 2x, ../images/dummy-images/lion.svg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="550" src="/images/dummy-images/lion.svg" width="485"
    />
  </noscript>
  <img class="image__img js-lazyload" data-src="../images/dummy-images/lion.svg" data-srcset="../images/dummy-images/lion.svg 2x, ../images/dummy-images/lion.svg 1x" srcset="../images/dummy-images/lion.svg 2x, ../images/dummy-images/lion.svg 1x" width="485"
    height="550" 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">Franz Schünzel © MLU | CC BY-SA 4.0</span>
  <a class="link link--external" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de" title="Nutzungsrechte" rel="noopener noreferrer" target="_blank"></a>
  </span>
  </span>
</div>

{
  "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-sa/4.0/deed.de",
    "text": "Franz Schünzel © MLU | CC BY-SA 4.0"
  },
  "src": "/images/dummy-images/lion.svg",
  "src2x": "/images/dummy-images/lion.svg",
  "width": 485,
  "height": 550,
  "responsive": true
}

Bild mit Copyright @image

# Standard-Bild (Artikel) @image

# Bild für das Material @image--thumbnail

# Standard-Bild mit CC (Artikel) @image--default-cc

# Cover @image--cover

# Bühnenheader Onepager (2:1) @image--header

# Bühnenheader Startseite (5:3) @image--frontpage-header

# Kupferstichgrafik (1:1) @image--copper-engraving

# Teaser (5:3) @image--teaser

# Teaser (5:3) @image--teaser-horizontal

# Teaser (5:3) @image--teaser-horizontal-small

# Teaser (3:5) @image--teaser-vertical

# Overlay @image--overlay

Standard-Bild (Artikel) @image

Bild für das Material @image--thumbnail

Standard-Bild mit CC (Artikel) @image--default-cc

Cover @image--cover

Bühnenheader Onepager (2:1) @image--header

Bühnenheader Startseite (5:3) @image--frontpage-header

Kupferstichgrafik (1:1) @image--copper-engraving

Teaser (5:3) @image--teaser

Teaser (5:3) @image--teaser-horizontal

Teaser (5:3) @image--teaser-horizontal-small

Teaser (3:5) @image--teaser-vertical

Overlay @image--overlay