Responsive Images im prozentualen Grid

[BeaB]

Guten Morgen liebe Contao Experten,

ich bitte euch um eure Hilfe, weil ich gerade Knoten im Gehirn bekomme, wenn ich versuche, die "responsive Images" Funktion in einem prozentualen Grid zu verwenden ;-)

In einem Projekt werden die Inhaltselemente mit Hilfe des DMA Simple Grids formatiert: In eine row werden Text- und Bildelemente eingefügt und mit Hilfe der Erweiterung mit den Klassen für die vier Ansichten versehen.

Es kommt dabei dann z.B. so ein Quelltext dabei heraus:

<div class="ce_image col-xs-12 col-sm-8 col-md-6 col-lg-6 col-sm-offset-2 block">

Das div.ce_image ist nun in der XS Ansicht 100% breit, in der Small Ansicht 66,66% breit und mittig, und in der Medium und Large Größe 50% breit. Soweit alles klar und prima.

Nun bekommt der "Elementtyp Bild" eine Bildgröße zugewiesen, die ich vorher im Seitenlayout definiert habe. Im Quelltext folgt nun nach dem div ein figure mit dem enthaltenen img samt srcset und sizes.

Damit sich nun auch die figures auf die volle Breite der Spalten strechen, ergänze ich die übliche img max-width Anweisung um das figure Element. Klappt auch noch soweit.

Jetzt kommt die Stelle, aber der ich ratlos bin: Was soll ich in der Bildgrößeneinstellung bei den Sizes Attributen eintragen? Die Breiten werden ja schon durch das Grid vorgegeben!
Welche "Breite" soll bei der Bildgrößeneinstellung eingetragen werden?

Ich würde mich riesig freuen, wenn ihr mir helfen könntet :-)

Danke und liebe Grüße von
Bea

[choki]

Bei einem fluiden Grid wirst Du das nie für alle Viewports auf den Pixel genau hinbekommen, falls Du das meinst. Sollte man auch nicht, wer will schon pixelgenau denken. Schau Dir am besten deine Breakpoints an, also die Breiten, an denen deine Ansicht umbricht (von 100% auf 66% und auf 50%) und auf Basis dieser Werte würde ich dann vorgehen und für das srcset Attribut verwenden.

[BeaB]

Ok, das klingt gut.

Aber:

66,66% des Bildes bezieht sich auf das Elternelement und dieser "Container" ist in jedem Bereich auch noch unterschiedlich breit.

Somit ist 66,66% nicht gleich 66,66vw

Seufz...

[choki]

Du wirst sicherlich Mediaqueries haben die auf absoluten Pixelwerten/EM basieren (wie soll das sonst auch funktionieren).

[Andreas]

Damit sich nun auch die figures auf die volle Breite der Spalten strechen, ergänze ich die übliche img max-width Anweisung um das figure Element. Klappt auch noch soweit.

Jetzt kommt die Stelle, aber der ich ratlos bin: Was soll ich in der Bildgrößeneinstellung bei den Sizes Attributen eintragen? Die Breiten werden ja schon durch das Grid vorgegeben!
Welche "Breite" soll bei der Bildgrößeneinstellung eingetragen werden?

Mit max-width kann man nicht strecken, nur schrumpfen. (Ein "Ausbrechen" eines Kindelements aus seinem Elternelement, welches eine kleinere Breitenangabe hat als das Kindelement, verhindern.)

Das FIGURE ist immer automatisch so breit, wie das Element, in welchem es sich befindet, selbst wenn ein Bild in ihm breiter sein sollte und aus dem Element herausragt. Deswegen braucht es kein max-width. (Das browsereigene Margin von FIGURE sollte auf 0 gesetzt werden).

Ein Grid-System regelt die Spaltenbreite. Darin befindliche Blockelemente erstrecken sich auf diese Breite.

Ein IMG welches größer ist als diese Grid-Spaltenbreite (z.B. width="3000"), würde aus diesem Grid herausragen, da es durch das Attribut WIDTH eine explizite Breitenangabe hat. Es wird mit max-width:100% verboten. Alle anderen Wrapper (mit display:block) um dieses IMG (A, FIGURE, DIV ...), welche noch in dieser Spalte sind, haben automatisch die Breite der Spalte. Also: Ein überbreites IMG in einer Grid-Spalte dehnt kein anderes Block-Element in dieser Spalte auf seine Breite aus.

Das heißt jetzt, du solltest dir die Breakpoints ansehen und die Größe der Spalten ermitteln. Für jeden Breakpoint sollte das Bild mindestens so breit sein wie die Spaltenbreite. Schrumpfen die Spalten, regelt das max-width des IMGs die Anzeige des Bildes. Zur Sicherheit, falls ein Bild doch mal kleiner sein sollte als die Spalte in der es sich befindet, kann man den IMGs width:100% geben.

Welches CSS-Grid-Framework benutzt du mit dma_simple_grid?

Ein Link zur Seite wäre notwendig.

[tab]

Um es noch ein wenig komplizierter zu machen, kannst du auch noch entsprechend größere Bilder für Retina-Displays bereitstellen (lassen).

[BeaB]

Hallo Andreas,

vielen herzlichen Dank für deine ausführliche Antwort. Solche Grids benutze ich schon länger und es nicht das Grid als solches, welches mir Probleme macht. Hier bei dem DMA Simple Grid habe ich mir das Bootstrap Grid als Grundlage ausgewählt und dann nur das nackte Grid eingebunden und die Breakpoints an die Bedürfnisse des Projekts angepasst. Klappt alles ganz prima mit dem Grid und das ist auch nicht der Kernpunkt meiner Frage.
(Die Anmerkungen zum figure waren irreführend, sorry. Das figure macht keine Probs. im Grid).

Nun möchte ich jedoch die neue Contao "Responsive Images" (Themes - Bildgrößen) in Kombination mit dem Grid verwenden. Damit möchte ich erstens erreichen, dass bei kleinen Auflösungen keine unnötig großen Bilder geladen werden müssen und zweitens, dass bei hochauflösenden Bildschirmen die doppelt so große Bildvariante geladen wird.

Die Funktionsweise des neuen Standards habe ich auch verstanden. Was mir nun Probleme macht, ist die Kombination von Grid UND den resp. Images.

Beispiel
Nehmen wir mal die "Medium" Ansicht:
#container erstreckt sich dort auf 96% der Gesamtbreite des Viewports.
Nun wurde einem div.ce_image die Klasse .col-md-6 zugewiesen, dadurch erstreckt sich das Bild auf 50% des Containers.

An dieser Stelle beginnt mein Problem, denn der neue img Standard erwartet in den "sizes" einen Wert in "vw". In dem o.g. Beispiel ist das Bild nun aber nicht 50vw breit, sondern weniger (weil der Container schmaler ist als 100%).

Das heißt jetzt, du solltest dir die Breakpoints ansehen und die Größe der Spalten ermitteln. Für jeden Breakpoint sollte das Bild mindestens so breit sein wie die Spaltenbreite.

Das dürfte in diesem Fall nicht ausreichend sein, denn für die 2x Variante müssten die Bilder in der doppelten Größe vorliegen. Ich ermittele die maximale Breite genau wie von dir beschrieben, trage genau diesen Wert in das Feld "Breite" ein und dann lade ich das Bild in der doppelten Größe hoch. Bei Pixeldichte trage ich dann 1x, 2x ein. Es kommt dann genau der Quelltext dabei heraus, den ich erwarte:

<img src="pfad.jpg" srcset="pfad.jpg 800w, pfad.jpg 1600w" ...">

Es sind nur die Angaben in vw für die sizes, die ich nun nicht exakt bestimmen kann. Soll man die vw Größen dann einfach für die ganzen Bereiche grob schätzen und gut ist?

Ganz viele liebe nächtliche Grüße von
Bea

[BeaB]

Anmerkung: Mein Lösungsvorschlag funktioniert nur dann, wenn die Bildelemente durchgehend mit den selben Grid Klassen versehen werden.

Sobald ein Redakteur auf die Idee kommt, ein Bild über mehr Spalten ausgeben zu lassen als in meiner "Pi mal Daumen" Berechnung vorgesehen, würde es einen Konflikt geben.

Nehmen wir mal an, ich habe für die Medium Ansicht grob 50vw für die Bilder geschätzt. Nun wird jedoch Bild mit der Klasse col-md-8 eingebunden. Dann ist das Bild 66,67% breit (wieder bezogen auf den Container), aber in den "sizes" steht, es soll 50vw sein.

Und schon bin ich in meinen Gedankengängen wieder am Ende meines Lateins...

[Andreas]

Ich kann dir da auch nicht mehr erzählen, als das, was du mit der Google-Suche nach "contao responsive images" findest.

Aber ich glaube ich verstehe dein Problem. Also bräuchtest du rein theoretisch Bildgrößenvoreinstellungen mit solchen Angaben. grid-4-6-12, grid-6-6-12 usw. wobei die erste Zahl für die Spaltenbreite auf Desktop steht usw. grid-[columns_desktop]-[columns_tablet]-[columns_mobile]. Beispiel: Eine Galerie, welche auf Desktop 4, auf Tablet 2 und auf Mobile 1 Bild pro Reihe zeigt müsste die Bildgröße grid-4-2-1 bekommen.