Responsive Bilder in 5.3

[Shania]

Nach dem Upgrade auf 5.3 würde ich nun meine Bilder gerne auf die automatisch generierten Responsive Bilder umstellen und habe dieses Video dazu angesehen.

https://www.youtube.com/watch?v=ub8yROSQyQ4

Aber in 5.3 sieht das in Contao schon wieder anders aus. Da ist nochmal mehr verschachtelt.

Gibt es dazu noch aktuellere Videos oder auch eine andere Doku? Ich habe im Handbuch zumindest nichts dazu gefunden.

Ich habe jetzt mal meine gängigen Bildgrößen angelegt, aber es scheint mir noch nicht so richtig zu funktionieren, weil mir in den Entwicklertools in Chrome immer das .jpg Bild als das aktive angezeigt wird. Das wird markiert. Also klappt wohl noch nicht alles, wie es soll.

Das hier habe ich bisher eingestellt.

Screenshot 2026-01-14 161630.pngScreenshot 2026-01-14 160946.png

Im Frontend sieht das dann so in den Entwicklertools aus. Als Größe der Seite ist ein iPhone 12Pro eingestellt.

Screenshot 2026-01-14 162337.png

Es gibt den Einstellungen, die ich bisher im Layout vorgenommen habe, ja nochmal eine Ebene. Aber irgendwie stehe ich auf dem Schlauch. Da fehlt sicher noch etwas. Wäre toll, wenn mir da jemand weiter helfen könnte.

[neelix]

Magst Du mal die Seite nennen?

Das Source-Set mit den verschiedenen Pixeldichten wird ja erzeugt. Aber möglicherweise findet dein Browser keine passendere Datei.

Nachtrag: Dass das IMG Element fabig hinterlegt ist normal. Fahr mal mit der Maus über die Zeile. Dann kommt dann ein Popup mit dem Eintrag "Aktuelle Quelle". Da steht welches Bild der Browser ausgewählt hat.

[Shania]

Das ist auf einer Testumgebung. Ich kann dir aber die Zugangsdaten senden, wenn du schauen magst. Ist nur eine .htaccess davor.

Ich habe jetzt nochmal geschaut und verschiedenes ausprobiert und zwar wird das Fenster mit der aktuellen Quelle bei verschiedenen Links angezeigt, aber es steht immer das gleiche drin und die Einstellungen machen wohl doch was sie sollen . Und was dort angezeigt wird, ändert sich auch bei unterschiedlichen Endgeräten mit mehr oder weniger Pixeln.

Sorry für die Umstände, dann teste ich mal weiter mit Hilfe des Videos.

Alles umzustellen wird bei mir eine irre Arbeit, auch, weil wir überall den Urheber und die Domain auf den Bildern haben. Aber dafür gibt es wohl keine bessere Lösung als es manuell aufzubringen. Da mag ich jetzt nicht wirklich drüber nachdenken, aber so wie ich das sehe, können wir das auch nach und nach machen und müssen nicht alle Bilder auf einmal neu hochladen. Das ist zwar nicht optimal, aber anders wird es nicht gehen.

Danke auf jeden Fall für die Rückmeldung. Vielleicht habe ich gestern einfach zu lange vor der Kiste gesessen und den Wald vor lauter Bäumen nicht mehr gesehen.

[neelix]

Solande Du keine Artdirection (wichtiger Bereich) verwendest werden die Bilder ja nicht beschnitten, sondern einfach nur in unterschiedlichen Auflösungen bereitgestellt, sodass z.B. ein Apple Gerät mit Retina-Display (2:1) ein Bild mit der doppelten Auflösung lädt um es auch knackig scharf darzustellen.

Über Angaben zum Viewport kannst Du jetzt noch beeinflussen, dass der Browser von vorne herein eine andere (kleinere) Datei wählt, weil das Bild auf einem 6" Display jetzt z.B. nur noch eine Breite von 320 Pixeln statt 1280 Pixeln auf einem HD Fernseher hat.

Da muss man sich etwas reinfuchsen. Für die meisten einfachen Fälle reicht aber aus meiner Sicht schon die Version mit den Pixeldichten oder die einfache Angabe der Bildbreiten.
Das lässt ich alles auch noch wild kombinieren.

Parallel zum Video erklärt es diese Seite auch ganz gut. https://kulturbanause.de/blog/respon...izes-adaptive/

[Shania]

Ich werde nochmal ein wenig herumprobieren und schauen, ob das so reicht oder ob ich direkt noch etwas verbessern kann.

Ah, ja, der Kulturbanause, da habe ich auch immer mal wieder gelesen, danke. Das schaue ich mir an.

[zonky]

wenn auch schon etwas älter von Peter Müller https://www.youtube.com/watch?v=ub8yROSQyQ4 - aber immer noch "aktuell"

[Shania]

Danke dir @zonky, aber den habe ich ja im Eingangsposting auch verlinkt .

Was ich trotz weiteren Herumspielens noch nicht verstehe, wozu die Verschachtelung in 5.3 dient, die es ja 2016 noch nicht gab.

Wofür kommt das zur Anwendung?

[zonky]

Danke dir @zonky, aber den habe ich ja im Eingangsposting auch verlinkt .

upps...

[zoglo]

Danke dir @zonky, aber den habe ich ja im Eingangsposting auch verlinkt .

Was ich trotz weiteren Herumspielens noch nicht verstehe, wozu die Verschachtelung in 5.3 dient, die es ja 2016 noch nicht gab.

Wofür kommt das zur Anwendung?

Redakteure vergaßen gerne das "Schließende Element", dann war die Seite "kaputt" und du als Dienstleister bist dann der Schuldige und hast Nacharbeit an 4000 Stellen, nachdem der Artikel dann in 30 Website-Startpunkte kopiert wurde. Die Elementgruppe erlaubt hier eine hierarchische und logische Verschachtelung anstatt eine "nur im Backend" visuelle Umschlagselement-Verschachtelung.

[Shania]

Meinst du das Inhaltselement Elementgruppe? Ich bin jetzt noch bei den Bildgrößen im Layout. Da kann man ja nun auch verschachteln.

[lbableck]

Welche Verschachtelung meinst du da genau? Da hat sich eigentlich ewig nichts geändert.

[zonky]

meinst Du die Media-Queries, die man anlegen kann? wenn ja, dann z. B. Abschnitt "Responsive Images mit „Art Direction“ in Contao"

[Shania]

Dann ist es das wahrscheinlich. Hier meine ich:

Screenshot 2026-01-19 120022.png

Ich hatte auch ausprobiert dort ein Media Query anzulegen. Das hat nicht funktioniert, aber das liegt dann womöglich am nicht passenden CSS. Ich habe schon gesehen, dass ich das CSS eigentlich anpassen muss. Aber da ich nicht alle Bilder auf einmal anpassen kann, muss ich wohl schrittweise vorgehen und erstmal die Bilder neu hochladen und anlegen, wenn ich durch bin, das CSS anpassen und dann nochmal schauen, was noch verbessert werden kann. Wir sprechen uns dann in 2 Jahren wieder .

[Spooky]

Die Media Queries brauchst du für die erwähnte "Art Direction" - also wenn du für unterschiedliche Geräte Bilder in unterschiedlichen Seitenverhältnissen oder Ausschnitten (via "Zoom") anzeigen lassen möchtest.

[Shania]

Ja, diese wurden in dem Eingangsvideo eben noch unter den anderen Einstellungen erfasst. Aber dann ist es so, wie ich es vermutet hatte und dass mein Test nicht geklappt hat wird an meinem CSS liegen.

Danke euch allen!

[Spooky]

Ja, diese wurden in dem Eingangsvideo eben noch unter den anderen Einstellungen erfasst.

Was genau meinst du damit?

[Shania]

Hach, was ist das in meinem eigenen Forum doch praktisch, dass man solche Screens einfach über die Zwischenablage hochladen kann.

Das ist der Screenshot aus dem Video aus 2016, da stehen diese eben untereinander und nicht "in den Anweisungen" drin. Ich weiß nicht, wie ich das besser beschreiben könnte.

Screenshot 2026-01-19 122231.png

Vielleicht war es ja auch schon immer so wie jetzt und diese Variante ist im Video einfach anders gelöst/erklärt worden. Ich habe die Bildgrößen ja nicht genutzt, wenn auch mal ansehen und weiß daher nicht, wie das vorher war. Für mich macht es so, wie es jetzt funktionieren soll, schon Sinn.

[Spooky]

Hach, was ist das in meinem eigenen Forum doch praktisch, dass man solche Screens einfach über die Zwischenablage hochladen kann.

Das ist der Screenshot aus dem Video aus 2016, da stehen diese eben untereinander und nicht "in den Anweisungen" drin. Ich weiß nicht, wie ich das besser beschreiben könnte.

Screenshot 2026-01-19 122231.png

Dein Screenshot zeigt einfach die Auflistung der angelegten Bildgrößen im Theme. Die Media Queries der einzelnen Bildgrößen würdest du sehen bzw. anlegen können, wenn du bei diesen Einträgen auf den Edit-Stift klickst.

[neelix]

Ich behaupte mal, dass Du in den meisten Fällen ohne Media Queries auskommen wirst und einfach nur die Pixeldichte und unterschiedliche Bildformate anlegst. Sofern letzte bei dir erforderlich sind.

Dem Browser (und damit auch dem Seitenbesucher) ist schon viel geholfen, wenn er um ein 320x160px Bild darzustellen kein HD Bild laden muss bzw. anderes herum (denn dann fällt es erst recht auf)

So wie Du schreibst, ist das ja ein internes Projekt bzw. eine geschlossene Benutzergruppe. Du musst also nicht darauf achten, dass Google die Seite gut findet.

Und wenn Du später feststellst, dass die Qualität der Bilder auf kleinen oder sehr großen Displays nicht mehr passt, kannst Du immernoch nachsteuern, denn mit den Media Queries greifst Du dem Endgerät (positiv wie negativ) in die Entscheidung ein, welche Datei nun die beste für die Darstellung ist. Da muss man schon sehr gut planen.

[Shania]

Ja, ich habe auch erst einmal keine Media-Queries angelegt und denke auch, dass ich mit den unterschiedlichen Größen auskomme.

HD Bilder hatten wir nie. Bisher haben die Bilder 550px an der langen Seite. Das ist inzwischen natürlich echt mini. Aber die Seite existiert eben auch schon seit 2008 mit Contao und damals war das nicht so schlecht. Aber wir haben halt 80 % Smartphoneuser, da warenkleine Bilder wichtiger als große. Selbst, wenn ich die vorhandenen Bilder umstelle sehen die Bilder erkennbar besser aus, weil eben die Pixeldichte berücksichtigt wird. Das habe ich schon ausprobiert.

Ein internes Projekt ist es nicht. Die Seite kann jeder im Netz komplett lesen. Auch Suchmaschinenergebnisse sind daher wichtig.