Bildergrößen, Image-Polyfill und Parallax: Ich verstehe es nicht wirklich!

[doescher]

Hallo zusammen,

ich habe immer noch Probleme, das Bildergrößen-Tool in Contao 4.4 richtig zu nutzen und den Eindruck, dass ich es trotz des eigentlich sehr guten Tutorial von Rock-Solid noch immer nicht verstanden habe. Oder aber es funktioniert bei Parallax-Erweiterung nicht.

Ich habe einen Header-Bereich auf der Website, der mit einem Parallax-Effekt versehen ist. Hier habe ich per Bildergrößen-Tool folgende Einstellungen vorgenommen:
header.jpg und die Media-Queries header-media.jpg

Jetzt sollte doch das Tool eigentlich mindestens 2 oder mehr Bilder erstellen, die dann bei den einzelnen Viewports ausgegeben werden, oder?
Macht es aber leider nicht (erste Zeile), es wird nur ein Bild erstellt:
code.jpg

Weiter unten sieht man den Code eines Logos, dass über diesem Parallax-Bild liegt, und hier scheinen die folgenden Einstellungen durchaus verschiedene Bildgrößen zu erzeugen:
Logo.jpg und die Media-Queries logo-media.jpg

Da natürlich das header-Bild sehr groß ist (abfallend) wäre es gerade hier wichtig, für kleine Viewports eine andere Auflösung und vor allem weniger Daten auszuliefern.

Funktioniert das Bildergrößen-Tool nicht mit diesem Parallax-Effekt? Gleiches gilt übrigens auch wenn man das Bild als Hintergrundbild einbindet.
Wenn ich die Einstellungen als Grundeinstellung in für einen kleineren Viewport einrichte (mobil-first), dann erscheint logischerweise das Bild auf dem großen Rechner in einer schlechten Qualität, obwohl ich hier dann die Media-Queries anpasse. Muss ich vielleicht sogar selbst mehrere Bildgrößen anlegen, die ich dann in den einzelnen Viewports aufliefern lasse?

Was mache ich falsch, wie muss man diese Einstellungen wirklich sinnvoll setzen, dass mobil-first gut zum tragen kommt, die Darstellung auf dem Desktop aber genauso gut funktioniert?
Ist es vielleicht sogar besser über die contao-bootstrap-Erweiterung nur die Bilder mit img-fluid responsive zu machen oder verringert das die ausgelieferte Größe des Bildes nicht?

Leider kann ich Euch keinen Link zur Seite geben, da ich diese noch lokal bearbeite.

Vielen Dank für Eure Hilfe
Jan-DIrk

[doescher]

Jetzt habe ich noch etwa herumgespielt und das Header-Bild einfach noch einmal in einen Artikel unter dem Parallax eingeladen und hier werden nun wie bei den Bildgrößen definiert mehrere Bilder erstellt.
Außerdem wird bei kleinen Viewports nur noch der wichtige Teil des Bildes gezeigt, beim Parallaxbild immer noch alles.
Das heißt, dass die Parallax-Erweiterung das Contao-Bildgrößen-Tool nicht unterstützt. Kann ich das ändern?

Wie kann ich nun vorgehen, um zu gewährleisten, dass bei kleinen Devices nicht immer das große Bild geladen wird, sondern eine verkleinerte Form?
Parallax spielt – glaube ich – auf mobilen Geräten wie iPhone eh keine Rolle, das es nicht funktioniert...

[lucina]

Welche Parallax-Erweiterung meinst Du?

(grundsätzlich kann man einen Parallax-Effekt auch per CSS [wenn man puristisch veranlagt ist] oder auch per JS erzeugen. ich glaube, es gibt auch Erweiterungen dafür. Wenn da etwas nicht unterstützt wird, dann müsstest Du vermutlich bei der entsprechenden Extension ein Ticket aufmachen oder [besser!] gleich den benötigten Code beifügen.)

[doescher]

Welche Parallax-Erweiterung meinst Du?

(grundsätzlich kann man einen Parallax-Effekt auch per CSS [wenn man puristisch veranlagt ist] oder auch per JS erzeugen. ich glaube, es gibt auch Erweiterungen dafür. Wenn da etwas nicht unterstützt wird, dann müsstest Du vermutlich bei der entsprechenden Extension ein Ticket aufmachen oder [besser!] gleich den benötigten Code beifügen.)

Hallo lucina,
es handelt sich um die Erweiterung »hypergalaktisch/contao-parallax«.
Ein Ticket aufmachen? Tja nun, noch nie gemacht (wahrscheinlich in github, oder?).
Code beifügen? Welchen Code meinst Du? Wo beifügen?
Ich benutze eigentlich gerne die Erweiterungen, JavaScript kann ich leider nicht programmieren.
Grüße
Jan-Dirk

[doescher]

Schade, laut Entwickler kann die Erweiterung noch nicht mit der responsive Bildergrößen zusammenarbeiten.

Ich benötige also eine andere Möglichkeit um ein großes Headerbild so einzubauen, dass das Bildergrößen-Tool von Contao die unterschiedlichen Bilder für die mobilen Geräte erstellen kann.
Oder aber ich lasse die Erweiterung für die großen Viewports und baue für die mobilen Geräte eine kleinere Version der Bilder ein, die dann nicht den Parallax-Effekt haben.

Oder hat jemand noch eine bessere Idee oder Workaround?

[Spooky]

Ein normales Bild Inhaltselement?

Was genau benötigst du?

[doescher]

Ein normales Bild Inhaltselement?

Was genau benötigst du?

Na ja, der Parallax-Effekt wäre schon ganz nett, aber da muss ich halt gucken, wie ich das in der Kombi mit dem responsive Bildgrößen hinbekomme.
Darüber steht bei dem einen oder anderen Parallax-Bild auch Text, so dass ich das Bild in den Hintergrund nehmen müsste. Als Hintergrund-Bild über CSS einbinden bring wieder Probleme mit den responsive Bildgrößen...