Vorstellung: Warly Slideshow 2.0

Wie viele von euch bereits wissen, steht auch für die Slideshow der nächste große Versionssprung an. Es gab viel Feedback und Feature-Wünsche und viele davon finden ihren Weg in Warly Slideshow 2.0.

Wie bei Boxxer werde ich hier in der nächsten Zeit bis zum Release die einzelnen Features vorstellen.

Buttons

Bisher war es nur möglich einen Button pro Element zu definieren. Mit der nächsten Versionen können beliebig viele Buttons erstellt werden. Außerdem kann die Reihenfolge geändert, ein Icon hinzugefügt oder festgelegt werden ob es ein normaler oder Primary Button sein soll. Damit das Ganze bei mehreren Buttons nicht unübersichtlich wird, gibt es eine neue kompaktere Ansicht als bisher:

Die Icon-Position kann über die Einstellungen global festgelegt werden.

Nach aktueller Planung wird Warly Slideshow 2.0 vollständig kompatibel zu 1.0 vorhandene Elemente übertragen. Eigene dynamische Slideshows werden voraussichtlich auch mit der Version 2.0 kompatibel sein. So wird buttonTitle und buttonURL weiterhin unterstützt, aber als @deprecated markiert.

Hey, das Update wird diesmal kostenpflichtig für Bestandskunden sein, der genaue Updatepreis steht aber noch nicht fest.

Deine neue Darstellung ist alles andere als einfach für die Slideshow umzusetzen ich hoffe aber, dass ich nächste Woche die nächsten Features vorstellen kann.

Ist ja nicht schlimm, dauert nur halt länger als gedacht. Habe aber gewusst, warum ich die neue Darstellung in 2.0 geschoben habe Ich setze ja auch nicht nur deine Darstellung um, sondern stelle die Konfiguration um, sodass deine Darstellung und andere erst möglich wird.

Quote from WP24

Mir hat Warly mal geschrieben ich soll und kann hier immer mal wieder nachfragen.

Das ist mir ehrlich gesagt nicht bewusst

Mehrfaches nachfragen führt zumindest nicht dazu, dass ich schneller daran arbeite oder früher etwas neues schreibe.

Mich freut es, dass das Interesse groß ist, bei der Entwicklung der 2. Version ist mir aber aufgefallen, warum viele der neuen Features erst jetzt kommen. Viele davon bedeuten enormen Aufwand und Kompromisse zwischen Abwärtskompatibilität, Konfigurierbarkeit und Intuitivität. Nichts desto trotz wird es heute noch ein Update zum aktuellen Stand geben. Die neuen Darstellungen sind zwar noch nicht vollständing implementiert, aber so weit, dass ich es vorstellen kann.

Da sich die Entwicklung noch zieht, peile ich aktuell den 1. Geburtstag der Slideshow, 6. Juli, für einen Release der 2. Version an. Aber auch das kann sich noch ändern.

Wie angekündigt geht es diese Woche weiter mit der Vorstellung neuer Features für die kommende Warly Slideshow 2.0.

Neue Darstellungen (In Entwicklung)

Die neue Version erweitert die bisherigen Darstellungsmöglichkeiten und bietet dadurch noch mehr Flexibilität:

• Der Abstand der Box zum Slideshowrand ist konfigurierbar
• Die Breite/Höhe der Box lässt sich einzeln konfigurieren und bietet die Optionen: Dynamisch, Drittel/Hälfte/Zwei Drittel/Gesamte Breite/Höhe der Slideshow
• Die Navigation kann innerhalb oder neu auch außerhalb der Slideshow darstellen
• Ob das Bild nur im sichtbaren Bereich angezeigt werden soll (Diese Option ist nur dann sinnvoll, wenn der Abstand der Box zur Slideshow 0px ist, die Box entweder die gesamte Breite oder die gesamte Höhe einnimmt und der Stil "Einfarbig" eingestellt wurde)

Wie bei allen Eigenschaften, lassen sich auch diese Global, pro Slideshow oder pro Element konfiguirieren.

Wie in der Vorschau zu sehen wurde auch das Artikel-Template angepasst und unterstützt jetzt auch Labels und den Teasertext.

Hinweis: Die neuen Darstellungen erforderten einen größeren Umbau der Templates. Solltest du eigene/angepasste Templates verwenden, müssen diese für die Warly Slideshow 2.0 angepasst werden.

Hintergrundbild für die Slideshow

Was Elemente können, kann jetzt auch die Slideshow selber. Ein Hintergrundbild für die Slideshow befindet sich permanent im Hintergrund und so lässt sich z.B. die Slideshow auf der Startseite von warly.de auch ohne dem immer gleichen Hintergrundbild und Parallax Effekt umsetzen. So lassen sich dann drei Ebenen an Bildern für tolle Effekte über einander stapeln.

Individuelle Höhe für Desktop/Tablet/Smartphone

Bekannt von Warly Boxxer lässt sich die Höhe auch in Warly Slideshow für die drei Gerätegrößen manuell festlegen. Aktuell ist dies nur pro Slideshow konfigurierbar und noch nicht über die globale Konfiguration. Hier muss ich noch schauen wie und ob ich das in der Konfiguration unterbringen kann.

Ken-Burns-Effekt

Für eine noch dynamischere Slideshow lässt sich das Hintegrund mit einem Ken-Burns-Effekt versehen. Hier lässt sich zwischen Reinzoomen und Rauszoomen wählen.

Kleinere Verbesserungen

• Standardmäßig lädt die Slideshow alle Bilder vor um einen geschmeidigen Wechsel zu ermöglichen. Mit der Version 2.0 lässt sich dieses Verhalten deaktivieren. Zusätzlich werden alle Bilder mit loading="lazy" versehen, sodass sie dann erst geladen werden, wenn der Nutzer zu der Slideshow gescrollt hat
• Deaktivierung des automatischen Wechsels bei Hover: Bisher wechselte die Slideshow ungehindert die Elemente durch. Wenn man jetzt mit der Maus über die Slideshow fährt wird sie angehalten, sodass man in Ruhe den Text lesen oder einen Button klicken kann.

Ich hoffe euch gefallen die neuen Features und das die Konfiguration der Slideshow nicht zu viel wird. Aktuell sind bereits 10 neue Optionen hinzugekommen. Das bietet zum einen größere Flexibilität aber dadurch wird es auch unübersichtlicher. Ich gehe aber davon aus das, obwohl man viele Eigenschaften auch in den Slideshows/Elementen individuell konfigurieren kann, dass die meisten davon einmal unter "Konfiguration > CMS > Slideshow" gesetzt werden.

Drei Features fehlen noch. Die kommen dann in der nächsten und letzten Vorstellungsrunde

Guten Abend zusammen,

es hat (natürlich) länger gedauert als geplant, aber die letzten drei (+1) Features für die Version 2.0 sind nun fertiggestellt.

Getrennte Übergänge für Bilder und Boxen

Mit der neuen Version lassen sich andere Übergange und Parallax-Effekte für Boxen und Bilder festlegen. So kann man die Slideshow noch mehr den eigenen Bedürfnissen anpassen:

Übergreifende Boxen

Neu ist ist auch die Möglichkeit, Boxen über mehrere Slideshow-Elemente zu behalten. So lassen sich z.B. mehrere Bilder mit der gleichen Beschreibung einbinden, ohne das die gleiche Beschreibung ein- und ausgeblendet wird.

Konfiguriert wird das in der Slideshow-Box:

Soll ein Element seine eigene Box verwenden, wählt man das ausgefüllte Box-Icon. Soll ein Element die Box vom vorherigen Element übernehmen, wählt man das kopierende Box-Icon. Gibt es keine zu kopierende Box, wird gar keine Box angezeigt. Diese Reihenfolge wird auch bei einer Zufälligen Reihenfolge der Elemente beachtet, sodass es nicht zu zufälligen Box/Bilder Kombinationen kommt.

Im Formular lassen sich nur diese beiden Zustände auswählen. Erstellt man die Slideshow im Code, kann man beliebige andere Elemente als Box-Quelle angeben. Ich habe die UI im ACP bewusst erstmal simpel gehalten. Sollte sich die Funktion großer Beliebtheit erfreuen und weitere Konfigurationen gewünscht sein, kann ich das in Zukunft erweitern.

Und so sieht das ganze dann auf der Website aus. Die ersten drei Elemente haben die gleiche Box, das vierte Element nutzt seine eigene:

Unterstützung für Swiping

Swipen zu unterstützen war eine ganz schöne Herausforderung. Ich wollte hier nicht einfach die Swipe-Geste erkennen und dann das nächste oder vorherige Element anzeigen, sondern das swipen interaktiv unterstützen. Da die Übergänge aber in CSS ablaufen und man die unterschiedlichsten Kombinationen aus Übergängen und Übergreifenden Boxen haben kann, war die Umsetzung alles andere als einfach, das Ergebnis hat sich aber gelohnt

Das swipen wird dabei nicht nur per Touch unterstützt sondern, wie hier zu sehen, auch mit der Maus:

Kompaktere Konfiguration

Zum Schluss noch eine kleinere Verbesserung bei der Konfiguration der Slideshows. Da die Optionen immer mehr wurden, wurde die Liste auch immer länger und unübersichtlicher. Gerade die Beschreibungstexte nehmen viel Platz weg und sind eigentlich nur da, um den Standardwert zu kommunizieren. Deshalb habe ich den Standwert jetzt in die Auswahl integriert und die Beschreibungstexte entfernt:

->

Nur beim Box-Seitenabstand blieb die Beschreibung, da ich sonst keine Möglichkeit gesehen habe, das vernünftig zu kommunizieren.

Preise

Wie bereits angekündigt, veröffentliche ich die neue Version nicht als kostenloses Update. Der Aufwand für die neuen Features war enorm und ich hoffe das spiegelt sich auch für euch wieder. Die Warly Slideshow 2 wird Neu 13,49€ kosten und als Update für Besitzer der ersten Version für 6,49€ angeboten.

Ich hoffe euch gefallen die Neuerungen. Jetzt wo alles fertig ist, muss ich natürlich noch ausführlich testen, aufräumen und mit Sicherheit auch noch einige Fehler beheben, bevor ich euch dann endlich die 2. Version zur Verfügung stellen kann.