Bitte um Hilfe zur Anleitung Responsive Images, Rocksolid Themes

Hallo Contao Experten,

bisher habe ich responsive Images über ein html Modul eingebunden und die verschiedenen Dateigrößen selbst erstellt und hochgeladen.

Nun muss ich mich endlich mal mit der Contao-eigenen Möglichkeit beschäftigen und habe mich durch diese Seite durchgearbeitet, auf die hier im Forum immer wieder verlinkt wird:
http://rocksolidthemes.com/de/contao...picture-contao

Leider komme ich mit dieser Anleitung nicht so besonders gut klar, siehe Protokoll meines Versuches:

Zitat:

---

Um eine neue Bildgröße anzulegen navigieren Sie im Backend zu Layout › Themes › Bildgrößen. Dort können Sie einen Namen vergeben und die üblichen Einstellungen (Breite, Höhe, Modus) setzen.

---

Ok, Formular für "neue Bildgröße" gefunden und einen Namen vergeben.

Zitat:

---

Hier können Sie die Breite in Pixeln angeben.

---

Wieso in Pixeln? Die Einheit für das srcset lautet doch "w"? Ausserdem will ich ja mehrere Breiten vergeben, das ist doch der Sinn eines srcsets?
Lasse das Feld also frei.

Lese weiter, dass der Größenänderungsmodus nun unrelevant sei, da Breite und Höhe nicht angegeben wurden.

Nächstes Eingabefeld ist "Zoom":

Zitat:

---

0 = das ganze Bild is sichtbar, 100 = nur der wichtige Teil des Bildes ist sichtbar.

---

Nun bin ich schon wieder ratlos. Ein Zoomfaktor macht ohne Media-Queries doch keinen Sinn?

Nun weiter zu "Sizes Attribut"

Zitat:

---

Hier können Sie die anzuzeigende(n) Bildbreite(n) angeben, z.B. (max-width: 600px) 100vw 50vw.

---

Kapier ich nicht: Ich soll hier schon die ganzen Sizes angeben, obwohl das System die verschiedenen "W" Werte für das Srcset noch gar nicht kennt?
Außerdem: Gehört da nicht ein Komma nach 100vw?
Na gut, dann probiere ich das einfach aus und kopiere das vorgegebene Beispiel hinein.

Letztes Feld ist die Pixeldichte

Zitat:

---

Hier können Sie die Pixeldichten definieren, z.B. 1x, 1.5x, 2x.

---

Hier trage ich 1x, 2x ein.


Als nächstes gehe ich in die Dateiverwaltung und möchte mein Bild hochladen. Ich überlege, dass es sinnvoll sein müsste, das Bild in der höchsten Qualität hochzuladen, damit es keine pixelige Darstellung auf HiDPI Geräten gibt.

Als nächstes binde ich das Bild ein und weise dem Inhaltselement "Bild" die soeben erstellte Bildgröße zu.


Das ist nun das Ergebnis im Quelltext:

HTML-Code:

---

<img src="pfad/dateiname.jpg" sizes="(max-width: 600px) 100vw 50vw" alt="">

---

Nicht gerade das, was ich mir vorgestellt hatte. Das srcset fehlt, ebenso wie die @2x Datei.

Dann habe ich wild herumprobiert und alle möglichen Kombis eingetragen, aber immer kommt Quatsch als Quelltext raus...

Wer kann mir helfen?
Gibt es irgendwo eine gute Anleitung?

Ich hatte dann noch das hier gefunden:
https://www.youtube.com/watch?v=nZOUziwodhk

Aber leider verstehe ich die Referentin kaum, weil der Ton so schlecht ist :-(

Über eure Hilfe würde ich mich sehr freuen, danke!

Viele Grüße, B.

Da du keine Größe angegeben hast, wird einfach die Original Datei ausgegeben und es können auch keine verschiedenen Varianten für das Bild generiert werden.

Ja das verstehe ich eben nicht - welche der Größen muss ich angeben?

Es sollen ja am Ende mehrere Größen rauskommen, zB img srcset=" large.jpg 600w, medium.jpg 400w, small.jpg 300w" usw

Die normale Desktop Größe gibst du dort an. (Oder irgendeine andere, kommt dann auf deine Media Queries an, wenn du welche benutzt, aber üblicherweise nimmt man die "72"dpi Desktop Größe als Ausgangspunkt.)

Also was im Detail passiert, wenn man irgendwelche Werte eingibt, kann ich dir auch nicht sagen. Ganz verstanden habe ich das auch noch nicht, aber wenigstens teilweise. Und ich kann dir zumindest mal ein Beispiel geben, das bei mir funktioniert wie von mir gewünscht. Es handelt sich dabei um eine Bildgröße für ein Headerbild, das im Original mit 2560x640 Pixel vorliegt. Es wird über die volle Viewportbreite angezeigt.

Meine Eingaben:
Breite: 640
Höhe: nichts eingegeben, da steht aber dann nachher 0 drin.
Größenänderungsmodus: proportional
Zoom: 0 (ganzes Bild)
Sizes: 100vw
Pixeldichte: 1x,2x,4x

Es werden von Contao Bilder in Größe 640x160 und 1280x320 erzeugt und im srcset eingebunden, für 2560x640 wird das Originalbild ausgegeben. So sieht das dann im HTML-Output aus:

HTML-Code:

---

<img src="assets/images/7/IMG_3446Header-4aa435e7.jpg" srcset="assets/images/7/IMG_3446Header-4aa435e7.jpg 640w, assets/images/0/IMG_3446Header-75b9d520.jpg 1280w, files/themes/my_theme/IMG_3446Header.jpg 2560w" sizes="100vw" alt="Mein Alternativtext">

---

Im Ergebnis wird dann dargestellt:
für Viewportbreite <= 640px: Das 640er Bild
für Viewportbreite <= 1280px: Das 1280er Bild
für Viewportbreite > 1280px: Das 2560er Bild

sizes kannst du in so einem Fall einfach weglassen ;)

Ok, wann macht das sizes dann Sinn? Nur wenn ich auch entsprechende media queries angebe? Das Beispiel unter dem "Sizes-Attribut Eingabefeld ist falsch, oder? Da fehlt das Komma, das in der ausführlichen Hilfe drinsteht :confused:. Die "sizes" ändern auch nichts dran, welche Bildgrößen (in Pixel) generiert werden, oder? Soviel kann ich der Hilfe noch entnehmen. Wenn ich die 100vw weglasse, dann fehlt mir im srcset die Breitenangabe nach dem Bildpfad und in meinem Beispiel wird dann das 640er Bild hergenomen und hochskaliert. Da müsste ich dann wohl eher als Breite 2560 eingeben und die Pixeldichte mit 1x,0.5x,0.25x angeben?:confused:
Also nur das sizes-Attribut wegzulassen erzeugt in meinem Beispiel ein unerwünschtes Resultat.

sizes brauchst du dann, wenn du verschiedene Bildgrößen (im Sinne der Darstellungsgröße) brauchst. Ob und warum bei dir dann das falsche Bild genommen wird hängt vielleicht noch von anderen Faktoren ab (wenn du das Bild bspw. per CSS resizen lässt). Prinzipiell ist dein Bild 640px Breit und wird im Browser auch 640px Breit dargestellt. Auf Geräten mit höherer Pixel Dichte wird das Bild dann weiterhin 640 CSS-Pixel breit dargestellt, aber es wird je nach Pixel Dichte das 2x oder 3x etc. Bild genommen.

Ok. Klar, ich habe das Bild natürlich per CSS auf volle Breite eingestellt (width: 100%; display:block; ). Meine Einstellungen kommen aus diesem Thread. Da gab es wohl ein Missverständnis, denn einen kleineren Fallback will ich hier ja eigentlich nicht für ältere Browser, die sollen dann eben das große Bild laden. Und irgendwelche Retina-Display-Geräte sollen nicht das eh schon große Bild noch weiter aufblasen, sondern die passendste Bildgröße auswählen. Da sollte 2560 ja wohl zumindest für Mobiltelefone ausreichend sein ;).

Allerdings habe ich das gerade mal ausprobiert mit
Pixeldichte: 1x,0.5x,0.25x
sizes: (Nix)
Da nimmt er mir dann immer das große Bild. Schreibe ich bei den sizes die 100vw wieder rein, dann passt es wieder und er nimmt immer nur das nächstgrößere (im Vergleich zur Viewportbreite). Retina-Geräte habe ich jetzt noch nicht probieren können.

Ja, wenn du das Bild immer auf die volle Breite des Browsers anzeigen lässt (unabhängig von dessen Original Größe), dann brauchst du sizes.

Ok, dann lass ich die mal drin. Ist das dann jetzt so herum (Breite 2560 | 1x,0.5x,0.25x) sinnvoller in meinem Sinn als die ursprüngliche Einstellung (Breite 640 |1x,2x,4x)? Wenn ich also erreichen will, dass in jedem Fall das Bild nicht vom Browser aus einem kleineren Bild hochgerechnet wird, solang ein genügend großes Bild verfügbar ist. Dass er auf einem 5120px Display hochskalieren muss, nehme ich in Kauf :D;).

Wenn ich das jetzt richtig verstehe, würde bei der ursprünglichen Einstellung ein älterer Browser immer das 640px Bild nehmen, weil er das srcset nicht versteht und bei src eben das kleine 640px Bild angegeben ist. Und das würde er mir dann hochrechnen auf die Viewport-Breite, was sicher nicht in meinem Sinne ist. Wenn es auch das Datenvolumen von Mobilgeräten mit kleinem Display und zu altem Browser schonen würde. ;)

Sollte so sein, ja :). Auf einem Smartphone mit einem device-pixel-ratio von 3.0 im Hochformat würde er dann das 0.5x (also 1280px) große Bild nehmen.

Zitat:

---

Zitat von BeaB

Gehört da nicht ein Komma nach 100vw?

---

ja, das ist ein Fehler im deutschen Beschreibungstext, wird in der nächsten Version behoben.

BeaB, wenn du das HTML für die Bilder vorher selbst erstellt hast kannst du ein Beispiel hier posten, dann können wir dir sagen mit welchen Einstellungen du dasselbe Ergebnis erreichst. Vielleicht ist es so besser verständlich.

Ui, hier wurde ja schon fleissig weiter diskutiert :-)

Ganz lieben Dank für das Angebot, ich habe das schon durch ganz viel Herumprobieren selbst rausgefunden.

Es ist nur definitiv nicht intuitiv bedienbar - zu Anfang hatten sich bei mir immer wieder Knoten im Hirn gebildet ;-)

Klasse, dass die neuen Standards überhaupt unterstützt werden! Vielen Dank!

Viele Grüße von Bea

Noch ein kleiner Verbesserungsvorschlag:

Zitat:

---

Die Option Das Image-Polyfill laden muss im Seitenlayout aktiviert sein.

---

und

Zitat:

---

Der Image-Polyfill ist optional...

---

Die Variante "ohne Art Direction" klappt nun gut, wie bereits weiter oben beschrieben.
Mit den Masken für die "mit" Variante komme ich nicht ganz so gut klar.

Beispiel: Ich möchte eine neue Bildgröße mit zwei Media Querys definieren.

Nun gibt es als erstes die Maske "Neue Bildgröße", wo man bereits Sizes und Zoom eintragen kann. In den nachfolgenden Masken "Neues Bildgrößen-Media-Query" kann man das dann AUCH eintragen.

Die Anleitung von Rocksolid Themes gibt für diese "picture" Variante nicht so viel her: Dort wird nur beschrieben, dass man jeden Media Query einzeln eintragen kann mit Größe und Zoom. In diesen Masken gibt es aber auch wieder die Möglichkeit, zusätzlich Sizes und die Pixeldichten einzutragen.

Das ergibt insgesamt einfach zu viele Eingabe- und Kombinationsmöglichkeiten für DREI Eingabemasken (bei diesem Beispiel)

Gibt es irgendwo eine etwas detalliertere Anleitung?

Ganz lieben Dank für eure Unterstützung und viele Grüße, Bea

Wenn du dich mit dem Quelltext des Picture-Elements auskennst ist der Zusammenhang recht einfach erklärt. Die Einstellungen in der „Neue Bildgröße“-Maske betreffen das <img>-Element und für jedes „Bildgrößen-Media-Query“ wird ein <source>-Element erzeugt.

Vielen Dank für deine Antwort!

Letztentdlich bekommt man den gewünschten Quelltext nur durch ganz viel Herumprobieren :-)