Responsive Images

1. Zentrale Bildgrößen-Einstellungen

Die zentralen Bildgrößen haben erst mal nichts mit responsive zu tun. Sie sind vor allem praktisch, weil für verschiedene Stellen im Layout eine Bildgröße definiert und hinterlegt werden kann. UND Contao berechnet das Bild, um es in dieser Größe ausliefern zu können (Stichwort Daten sparen - insb. für Mobilversionen).

Man kann nur eine Angabe (Breite oder Höhe) machen oder beides angeben. Gibt man beide Werte an, muss man zusätzlich den Größenänderungsmodus setzen.

Caution

Der Größenänderungsmodus kommt NUR zur Anwendung, wenn BREITE UND HÖHE angegeben sind!
Wird nur eine Bildgröße angegeben (Breite ODER Höhe) ist es EGAL, welcher Modus gerade “aktiv” ist.

Fall 1:

Das Layout sieht entweder eine fixe Breite oder eine fixe Höhe vor:

Breite: 200 Höhe: 0 > Breite des Bildes = 200px, Höhe proportional (Hoch- und Querformat)
Breite: 0 Höhe: 200 > Höhe des Bildes = 200px, Breite proportional (Hoch- und Querformat)

Alles easy.

Fall 2:

Kommen wir zum Größenänderungsmodus. Gibt man Breite UND Höhe ein, kann man mit dem Größenänderungsmodus die Anpassung steuern.

Die Bezeichnungen scheinen etwas unglücklich gewählt, weil sowohl “Proportional” als auch “An Rahmen anpassen” proportional verkleinern.

(Aus momentaner Sicht ist dieser Modus nur dann wirklich sinnvoll, wenn ein exaktes Format gebraucht wird)

Größenänderungsmodus
Proportional	Die längere Seite des Bildes wird an die vorgegebenen Abmessungen angepasst und das Bild proportional verkleinert.
An Rahmen anpassen	Die kürzere Seite des Bildes wird an die vorgegebenen Abmessungen angepasst und das Bild proportional verkleinert.
Exaktes Format	Das Bild wird an die vorgegebene Größe angepasst und gegebenenfalls beschnitten.

Anwendungsbeispiel:

1. Bild im Querformat (800 x 500)

Bildgrößen-Einstellungen: Breite 200px Höhe 100px

Größenänderungsmodus:

• Proportional: Bildbreite 200px, Bildhöhe proportional (längere Seite = Breite als Basis)
• an Rahmen anpassen: Bildhöhe 100px, Bildbreite proportional (kürzere Seite = Höhe als Basis)
• exaktes Format: Bildbreite 200px, Bildhöhe 100px, Bild wird beschnitten

2. Bild im Hochformat (500 x 800)

Bildgrößen-Einstellungen: Breite 200px Höhe 100px

Größenänderungsmodus:

• Proportional: Bildhöhe 100px, Bildbreite proportional (längere Seite = Höhe als Basis)
• an Rahmen anpassen: Bildbreite 200px, Bildhöhe proportional (kürzere Seite = Breite als Basis) - sollte man meinen, aber tatsächlich sieht es so aus: Bildhöhe 100px, Bildbreite proportional (längere Seite = Höhe als Basis) - also gleiches Verhalten wie bei Proportional!
• exaktes Format: Bildbreite 200px, Bildhöhe 100px, Bild wird beschnitten

Im Forum gibt’s schon einen Thread dazu, scheint aber niemanden wirklich aufzuregen: klick

2. Responsive Images

Sizes-Attribut

Hilfe-Text in Contao:
Das HTML-Attribut sizes definiert die angezeigte Breite des Bildes, optional in Kombination mit einem Media-Query. Sie können einen beliebigen CSS-Wert für die Breite verwenden.

Z.B. bedeutet (max-width: 600px) 100vw, 50 vw, dass das Bild auf kleinen Bildschirmen (bis maximal 600 Pixel Breite) 100% der Breite des Viewports einnimmt und auf großen Bildschirmen 50% der Breite des Viewports.

Und (max-width: 600px) calc(100vw - 20px), 500px bedeutet, dass das Bild auf kleinen Bildschirmen 20 Pixel schmaler ist als der Viewport und auf großen Bildschirmen 500 Pixel breit.

Für Contao ist das Sizes-Attribut meistens nicht relevant.

Pixeldichte/Skalierungsfaktor (Source-Set Attribut)

Ist das sizes-Attribut nicht definiert, legt diese Einstellung einfach die Pixeldichten fest, die unterstützt werden sollen. Die Bildgrößen werden automatisch angeapsst. Z.B. generiert 1x, 1.5x, 2x folgenden HTML-Code: <img srcset="img-a.jpg 1x, img-b.jpg 1.5x, img-c.jpg 2x">.

Ist das sizes-Attribut definiert, werden dieselben Bildgrößen erstellt, jedoch werden für das srcset-Attribut Breitenbeschreibungen verwendet. Z.B. generiert ein 200 Pixel breites Bild mit den Pixeldichten 1x, 1.5x, 2x folgenden HTML-Code: <img srcset="img-a.jpg 200vw, img-b.jpg 300w, img-c.jpg 400w">

Bildgrößen-Media-Query

Beitrag im Forum - Frage von tofo
Responsive Images und das Picture-Element - Rocksolid-Themes

Responsive Image in einem RSCE-Element ausgeben

<?php if ($image = $this->getImageObject($this->image, $this->size)): ?>
  <?php $this->insert('picture_default', $image->picture) ?>
<?php endif ?>

feld image -> Bild (Bezeichnung in der rsce_xx_config.php)
feld size -> Bildgröße

$image = $this->getImageObject($this->size)
$image = $this->getImageObject($this->image, ID) // ID der Bildgröße

neu:
$image = $this->getImageObject($this->image[null, null, ID]