Responsive Bilder
letzte Aktualisierung der Seite: Version 2.17.1
Der Styleguide definiert eine Webseite im responsiven Design. Hierzu zählt auch die Darstellung von Bildinhalten. Die Responsive Bilder-Komponente definiert ein Markup, das zur Laufzeit ausgewertet wird, um Bilder nach responsiven Design-Vorgaben darzustellen. So kann bspw. für verschiedene Endgeräte und damit verschiedene Größen und Auflösungen die optimale Bildquelle bzw. Bildgröße bestimmt werden.
Responsive Bilder und damit diese Komponente kommt dann zum Einsatz, wenn einzelne Bilder auf der Webseite dargestellt werden sollen. Die Darstellung erfolgt unter anderem im Inhaltsbereich, in Teaserboxen oder auch in Slides. Bilder in einer Galeriedarstellung verwenden einen eigenen Mechanismus und greifen nicht auf diese hier beschriebene Komponente zurück.
Je nach Einsatzbereich variiert die Funktionalität dieser Komponente und erfordert die Angabe oder das Weglassen von Attributen und Elementen. Wird ein Bild im Highlight-Slider verwendet, so kann dieses Bild zu einer klickbaren Fläche werden, über welche zu einer Detailseite gesprungen werden kann. Ein Bild, welches in einem Content-Slider verwendet wird, verfügt über eine Vollbild-Funktion. Bilder die statisch in die Seite eingebunden werden, bieten keine weiteren Funktionen.
Die Größe der Bilder hängt grundsätzlich von der Stelle ab, wo diese eingebunden werden. Es sind drei Stellen definiert, an denen Bilder eingebunden werden können: Inhaltsbereich, Highlight-Slider und Teaser.
Inhaltsbereich
Im Styleguide werden verschiedene Breakpoints definiert. Diese Breakpoints dienen der Ausrichtung von Webseitenelementen auf verschiedenen Endgeräten. Es werden vier Größen unterschieden, aufsteigend von klein nach groß:
- xs
- sm
- md
- lg
Wird ein Bild im Inhaltsbereich eingefügt, so hängt die Bildgröße von jeweiligen Breakpoint ab.
Im Inhaltsbereich kann das Bild den vollständigen Bereich einnehmen oder nur einen Teilbereich. Weiterhin kann angegeben werden, ob das Bild den Bereich vom linken oder rechten Rand aus ausfüllt. Die Steuerung hierzu folgt über CSS-Regeln. Ein Bild kann wie folgt ausgerichtet werden:
- Der komplette Inhaltsbereich wird genutzt (full, half-2, quarter-4)
- Der Inhaltsbereich wird halbiert und das Bild darin zu Teilen ausgerichtet (half-1, half-2)
- Der Inhaltsbereich wird gevierteilt und das Bild darin zu Teilen ausgerichtet (quarter-1, quarter-2, quarter-3, quarter-4)
Die CSS-Regel zur Ausrichtung des Bildes lautet size-<Größe>-<Teiler>-<genutzte Teile>. Nachstehende Grafik soll den Aufbau der Regel verdeutlichen:
Die Höhe des Bildes muss mit dem Anlegen der verschiedenen Bildgrößen proportional berechnet werden, damit keine Verzerrungen entstehen. Für jeden Breakpoint kann eine solche Größenangabe definiert werden. Damit ist es möglich, ein Bild auf kleinen Displaygrößen über die gesamte Inhaltsbreite zu erstrecken, bei großen Displays jedoch nur über die Hälfte. Die CSS-Regel hierfür würde demnach wie folgt lauten: size-xs-full size-sm-half-1.
Für die Ausrichtung des Bildes gibt es noch zwei weitere Werte figure-col-left um das Bild vom linken Rand her auszurichten und figure-col-right zur Ausrichtung vom rechten Rand her.
Teaser und Highlight-Slider
Teaser sind Elemente, die sich aus zwei Teilen zusammensetzen können, einem Bild und einem dazugehörigen Text. Bei Bildern wird lediglich unterschieden, ob diese "klein" oder "groß" eingebunden werden. Die Auslieferung des responsiven Bildes erfolgt automatisiert.
Einbindung - HTML-Beschreibung eines responsiven Bildes
Innerhalb der Definition werden alle zur Verfügung stehenden Bilder, durch Kommata getrennt, für die unterschiedlichen Auflösungen aufgeführt. Zunächst erfolgt die Angabe der URL unter der das Bild abgerufen werden kann, nachfolgend, durch ein Leerzeichen getrennt, die reale Breite des zuvor angegebenen Bildes. Die Browser entscheiden selbständig, welches Bild zur Anzeige kommt. Ist eine Abstufung nicht enthalten, so skaliert der Browser eines der gewählten Bilder entsprechend.
Quellcode
<noscript>
<img class="media-object rsImg"
src="https://www.sachsen.de/img/beispiel_bild.jpg"
alt="Alternativtext zum Bild" title="Titel des Bildes"
style="width: 100%" />
</noscript>
<img class="media-object hidden-no-js"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
alt="Alternativtext zum Bild" title="Titel des Bildes"
data-src="https://www.sachsen.de/img/beispiel_bild_570x368.jpg"
data-src-maxwidth="1450"
data-srcset="https://www.sachsen.de/img/beispiel_bild_365x236.jpg 365w,
https://www.sachsen.de/img/beispiel_bild_440x284.jpg 440w,
https://www.sachsen.de/img/beispiel_bild_570x368.jpg 570w,
https://www.sachsen.de/img/beispiel_bild_855x552.jpg 855w,
https://www.sachsen.de/img/beispiel_bild_1050x678.jpg 1050w,
https://www.sachsen.de/img/beispiel_bild_1250x807.jpg 1250w,
https://www.sachsen.de/img/beispiel_bild.jpg 1450w"
data-grid-image="false"
data-grid-covering
data-size="size-xs-full" />
Erläuterung
- In Zeile 1 findet die Definition des Bildes statt, wenn JavaScript im Browser deaktiviert ist. Hierbei findet keine responsive Darstellung statt.
- Mit Zeile 7 beginnt die Definition des eigentlichen Bildes.
Parameter und Attribute
IMG-Tag - Zeile 7:
| Name | Bedeutung | Werte | Obligatorisch |
|---|---|---|---|
class |
Die CSS-Regeln zur Definition des Aussehens. Es sind immer die CSS-Regeln media-object hidden-no-js anzugeben. |
CSS-Regel | JA |
src |
Pixel, das als Platzhalter dient. Dieses muss immer den Wert aus dem Beispiel annehmen. | Base64 | JA |
data-src |
Verweis auf das Bild, das als Fallback genutzt wird, wenn die responsiven Bilder des Attributs data-srcset nicht korrekt ausgewertet werden kann. |
URL | NEIN |
data-src-maxwidth |
Maximale Breite des größten Bildes. | numerischer Wert | JA |
data-srcset |
Liste von Bildern für unterschiedliche Auflösungen, mit Angabe des Breakpoints, ab wann diese Bilder genutzt werden. | URL mit Breakpoint | JA |
data-grid-image |
Befindet sich das Bild innerhalb eines Containers, der ein Padding aufweist, so muss dieser Wert auf true gesetzt werden. Weist der umgebene Container kein Padding auf, so ist der Wert auf false zu belassen. |
true | false |
JA |
data-grid-covering |
Dieses Attribut ist ein Marker, der angibt, dass weder Bild noch Container ein Padding aufweisen. Wird bspw. für die Highlight-Slider-Komponente verwendet. | -- | NEIN |
data-size |
Bezieht sich auf die CSS-Klasse des umgebenden Containers. Beinhaltet der umgebende Container das Attribut class="size-xs-full size-sm-quarter-1" so muss dieser Wert size-xs-full size-sm-quarter-1 ebenfalls in dem hier definierten Attribut hinterlegt werden. |
CSS-Regel | JA |
data-clickable |
Nur in Zusammenhang mit der Slider-Komponente zu verwenden: Selektor über welchen der Link angewählt wird, der beim Klicken auf das Bild aufgerufen wird |
Selektor | NEIN |
Einbindung - HTML-Beschreibung für ein Bild im Inhaltsbereich
Quellcode
<div class="box">
<div class="box-body">
<div class="box-media">
<div class="row">
<figure class="figure-col figure-col-right size-xs-half-1">
<!-- -->
<!-- Responsives Bild -->
<!-- -->
<figcaption>
<span class="media-caption">
Bildunterschrift
</span>
<span class="media-copy">
© Copyright-Information
</span>
</figcaption>
</figure>
<div class="text-col">
<p>Teaser-Text, der den Teil des Containers ausfüllt, der nicht vom Bild ausgefüllt wird</p>
</div>
</div>
</div>
</div>
</div>
Erläuterung
- In Zeile 5 wird der Container beschrieben, der das Bild- + Text-Element beinhaltet.
- Ab Zeile 6 erfolgt die Einbindung des responsiven Bildes.
- In Zeile 10 beginnt die Definition der optionalen Bildunterschrift.
- In Zeile 13 werden Copyright-Informationen zum Bild angegeben.
- Ab Zeile 18 soll zusammen mit dem Bild textueller Inhalt angezeigt werden, zum Beispiel rechts oder links vom Bild, so ist dieser Text hier zu definieren
Parameter und Attribute
FIGURE-Tag - Zeile 5:
| Name | Bedeutung | Werte | Obligatorisch |
|---|---|---|---|
class |
CSS-Regeln zur Beschreibung der Anordnung von Bild und Text. Zum einen muss die Ausrichtung des Bildes definiert werden. Dies erfolgt über die CSS-Regeln figure-col-right (Bild wird rechtsbündig ausgerichtet) oder figure-col-left (Bild wird linksbündig ausgerichtet). Zum anderen müssen die Bildausmaße entsprechend der Endgerätegröße definiert werden. Hierzu gilt die eingangs erwähnte Definition size-<Größe>-<Anordnung>-<Zähler>. |
CSS-Regel | JA |
Einbindung - HTML-Beschreibung für ein Bild als Teaser
Quellcode
<div class="media media-teaser" id="teaser-8">
<figure class="media-figure media-figure-teaser media-left media-figure-small">
<!-- -->
<!-- Responsives Bild -->
<!-- -->
<figcaption>
<span class="media-caption">
Bildunterschrift
</span>
<span class="media-copy">
© Copyright-Information
</span>
</figure>
<!-- -->
<!-- Teaser Text -->
<!-- -->
</div>
Parameter und Attribute
FIGURE-Tag - Zeile 2:
| Name | Bedeutung | Werte | Obligatorisch |
|---|---|---|---|
class |
CSS-Regeln zur Beschreibung der Anordnung von Bild und Text. Zum einen muss die Ausrichtung des Bildes definiert werden. Die Anordnung des Bildes auf der linken Seite wird mittels |
CSS-Regel | JA |
