Neu Responsive Banner Slider mit Hochformat bei mobile auf Basis von picture, source, media und srcset

[edding18]

Hallo zusammen,

Die Slider/Banner (z.B. für die Homepage) sind ja responsive, jedoch in der Art und Weise, dass dann ein Full-HD-Banner runterskaliert wird (im Querformat bleibt) und dann vielleicht nur 170 Pixel hoch ist.

Wir sind damit nicht mehr zufrieden, sondern möchten auf mobilen Geräten einen Hochformat bzw. quadratischen Banner anzeigen lassen.

HTML5 bietet dazu ja mittels <picture> und <source media="(min-width: 600px)" srcset="https://example.com/picture.png"> die Möglichkeit abhängig von der Display-Breite verschiedene Bilddateien auszugeben.

Bevor wir uns jetzt an eine Eigenentwicklung machen: Gibt es schon eine fertige Slider/Banner-Lösung, welche die Möglichkeit bietet verschiedene Varianten (Querformat, Hochformat) eines Banners im Shop-Backend hochzuladen und dann je nach Display-Größe auszuspielen?

Ich bin bei meiner Suche nach JTL-Slider Plugins etc. nicht fündig geworden. Gibt es dafür eine bestehende Lösung?

Sollte es keine Lösung geben, dann Backend-Entwickler aufgepasst: Den puren HTML / CSS Code auf reiner Quellcode-Ebene für den responsive Banner-Slider zu schreiben (bzw. die existierende Slider-Library zu modfizieren) ist für uns kein Problem. Jedoch das Ganze über das Shop-Backend bequem pflegbar zu machen - also mit Bild-Upload-Funktion - da haben wir zu wenig Know-How. Unsere erste Lösung wäre pflegbar über den Upload von modizierten .tpl Dateien via FTP.

Wenn also jemand anders den Backend-Part übernehmen möchte, kann ich unsere Lösung für den Front-End-Quellcode gerne zur Verfügung stellen.

VG

Eddy

 

[martinwolf]

Warum ein extra Backend? Lade doch, neben der eigentlichen Datei, einfach weitere Dateien mit einem Suffix im Namen hoch und berücksichtige das in der TPL-Datei.

 

[edding18]

Guter Tipp! So haben wir es zwischenzeitlich auch gelöst. Die Mobile-Variante bekommt ein -mobile Suffix.

$oSlide->cBildAbsolut gibt ja sowas aus wie "https://shopname.tld/mediafiles/Bilder/dateiname.jpg"

Mit Smarty und der replace-Funktion wird dann die mobile Version mittels

{$oSlide->cBild|replace:'.jpg':'-mobile.jpg'}

generiert: "https://shopname.tld/mediafiles/Bilder/dateiname-mobile.jpg"


Wir haben allerdings den Standard-JTL Slider ausbauen müssen und einen eigenen, simplen, Slider dafür eingebaut. Die Programm-Logik eines Nivo-Sliders oder Slick-Sliders auf das HTML5-Konstrukt mit <picture> und <source> etc. umzubauen war zu stressig.


VG

 

[martinwolf]

Der Slickslider kennt aber srcset und sizes. Damit hätte es auch funktioniert. Das Problem hierbei ist nur, dass unter Verwendung der lazyload Komponente des Slicksliders die Inhalte von data-srcset unter Chrome nicht funktionieren.