Wow! Die TYPO3 LayerSlider Extension wurde 3 Jahre alt, und heute erscheint das größte Update seit dem ersten Release. Anfang Dezember veröffentlichte Kreatura Media die Version 6 des jQuery LayerSlider Plugins. Die neue Version ist einfach nur atemberaubend. Seit Anfang Dezember habe ich mehr als 150 Stunden Arbeit in das neue Release investiert, und es hat sich gelohnt. Im Backend hat sich einiges verändert, die Timeline wurde komplett neu entwickelt. Die Verwaltung der Layer ist jetzt mit der Timeline verschmolzen. Zudem kamen rund 170 neue Optionen in den Bereichen Slider, Slides und Layers hinzu.

Wichtige Hinweise zum Update sind am Ende des Artikels zu finden

 

Coole Hero Slider

Eine weitere wichtige Neuerung ist ein neues Layout für einen Slider. Es lassen sich mit der neuen Version Fullsize Hero Slider erstellen. Das schöne daran ist, dass in den Optionen auch ein Modus für "Fullwidth" eingestellt werden kann. Wird der Slider dabei zum Beispiel direkt unter einer Navigation platziert, lassen sich Bildschirmfüllende Slider erstellen, die exakt die Höhe des Browserfenster haben. Die Breite entspricht dabei ebenfalls dem Browserfenster, unabhängig davon, ob der Slider in einem Container ist, der nur 1170px Breite hat. So lässt sich auch ein großer Slider realisieren, ohne ein spezielles Template dafür anlegen zu müssen.

 

Neue Layer Optionen, Static Layers

Die meisten Änderungen betrafen die Layer. Unzählige neue Optionen sind hinzugekommen. Bisher konnten Layer mit diversen Animationen ein- und ausgeblendet werden. Dank der neuen Optionen und neuen Features lassen sich grandiose Effekte erzielen. Meiner Meinung nach sind die "Textanimations" eines der besten Features überhaupt. Jetzt kannst Du ganz einfach Buchstaben, Wörter und ganze Zeilen mit vielen verschiedenen Effekten einblenden und ausblenden lassen. Dank einer augeklügelten Eingabe lassen sich verschiedenste Effekte auf Buchstaben, Wörter oder Zeilen aufteilen - Du möchtest zum Beispiel ein Wort so einblenden lassen, Dass die Buchstaben zeitverzögert von oben herunterfallen? Absolut kein Problem. Du möchtest aber jedoch, dass jeder zweite Buchstabe von unten hereinkommt? Auch kein Problem. Oder jeder Buchstabe eines Wortes soll eine andere Wegstrecke hereinfahren? Genau, auch kein Problem. Wenn Du also die Option "Textoffsetxin" beim Einblendeeffekt eines Textes auf 50 setzt, fallen die Buchstaben 50 Pixel nach unten in Ihre Endposition. Gibst du aber 50|-50 ein, kommt jeder zweite Buchstabe 50 Pixel von unten. Das ganze lässt sich beliebig fortführen!

Ausserdem lassen sich Ebenen jetzt zusätzlich noch mit einer Hoveranimation ausstatten. Dabei lassen sich die Attribute gleich wie für die Ebeneneffekte vergeben. Als zusätzlicher Bonus können Ebenen auch eine Animation per Schleife (Loops) erhalten. Somit lassen sich tolle Call To Action Buttons, welche auf sich aufmerksam machen, umsetzen. Aber auch das dauerhafte hereinfahren und verschwinden lassen von Ebenen lässt sich sehr einfach realisieren. Du kannst dabei bestimmen wie oft eine Schleife wiederholt wird - eine dauerhafte Wiederholung ist ebenfalls möglich. Ebenen-, Text- und Loop-Animationen sind im Backend auf der Timeline nachprüfbar. Hover jedoch nicht. Das würde die Bearbeitung je nach Effekt um einiges erschweren.

Ebenfalls neu ist die Option "Static" bei den Ebenen. Du kannst Ebenen über mehrere Slides anzeigen lassen. Entweder auf allen Slides oder bis zu einem Slide, auf dem die Ebene dann wieder ausgeblendet werden soll.


 

Wichtige Hinweise zum Update von Version 5

Bevor das Update auf die Version 6 durchgeführt werden kann, sollte eine aktuelle Version installiert sein (mindestens 5.6.0 der PRO Version oder 5.4.9 der TER Version). Vor dem Update muss zudem das aktuelle jQuery LayerSlider Plugin in der Version 6 heruntergeladen werden.

Installiere nun die TYPO3 LayerSlider Extension Version 6 über den Extension Manager. Überschreibe dabei die vorhandene Version 5. Nach der Installation öffnest Du das LayerSlider Backend über das Modul "LayerSlider" in der linken Leiste. Gehe zum "JS Migration Wizard" über den blauen oberen Button, und ziehe den Ordner "layerslider" aus dem CodeCanyon Download in die Upload Area.

Nach der Migration gehst Du zurück zum Listing. Bei jedem Slider sollte ein roter Hinweis angezeigt werden:

Diese Version des Sliders ist mit der aktuellen Version der Extension nicht kompatibel. Klicke hier um den Updatevorgang zu starten

Zu kommst danach zurück zur Liste und erhältst eine Meldung die das Update des Sliders bestätigt. dieser Vorgang ist für jeden Slider zu machen. Dies solltest Du unverzüglich für jeden Slider nach dem Extension Update und der Integration des neuen jQuery LayerSlider Plugin machen. Der alte Konfigurationscode der Slider funktioniert mit der neuen Version nicht mehr.

Die konvertierten Slider kannst Du nun bearbeiten.

Probleme bei der Konvertierung
Unter Umständen kann es zu Problemen mit den Timings beim konvertieren geben. Du solltest auf jeden Fall die Slider prüfen, ob diese noch entsprechend korrekt getimt sind. Folgende Werte solltest Du auf jeden Fall nachprüfen:

  • Slide: Basic Options > Slide transition Options > durationin - Dieser Wert legt die Dauer der Sichtbarkeit des Slides fest
  • Layer: Opening transition > durationin / startatin - Legt fest, wie lange die Einblendung des Layers dauert und ab wann der Layer gezeigt wird

Templates und JavaScript (Nur wichtig, wenn Du die Templates ausgelagert hast)
Die Backend Templates haben sich komplett geändert, diese sollten also immer mit TS auf das typo3conf/ext/layerslider/ verweisen. Auch die Frontend Templates haben sich verändert. Sofern Du die Templates woanders hin ausgelagert hast, solltest Du die neuen Templates nutzen. Hauptgrund dafür sind die unzähligen neuen Optionen eines Sliders, den Slides und den Layers. Alle Attribute haben sich bei den Layern geändert.

Zudem entfällt mit der neuen Version das Inline JavaScript. Alle initialen Slider-Attribute, welche zuvor über das Inline JavaScript für den Slider benötigt wurden, sind in Data Attribute ausgelagert worden. Das Init JavaScript wurde darauf hin geändert. Ein Slider lässt sich seit der Version 6 auch mehrfach auf einer Seite einbinden. ID-Tags, die dann doppelt ausgegeben wurden, entfallen komplett.

SrcSet für Slide Hintergrundbilder
Die Version 6 des LayerSliders unterstützt für die Slide-Bilder SourceSet. In den Slider Optionen lassen sich SrcSet aktivieren. Mehr ist hier nicht zu machen, das Template des Sliders berücksichtigt diese und gibt  die Sourcesets in den folgenden Größen aus:

  • 1600px
  • 1200px
  • 980px
  • 768px
  • 560px
  • 480px
  • 360px

Wichtige Änderungen und Neues bei Animationen 

  • Ebenen Einblendungen und Ausblendungen, sowie Textanimationen Start und Stop werden nun explizit aktiviert/deaktiviert. Ist ein Layer als nicht auf dem Slide zu sehen, oder verschwindet er nicht, ist die Animationseinstellung nicht aktiv. Du findest diese jeweils als erste Checkbox in den jeweiligen Einstellungen der Animation
  • Keywords für Timings: In vielen fällen können bei den Ebenen Keywords für das Timing benutzt werden. Wenn Du also eine Textanimation starten möchtest, kannst Du bei "textstartatin" anstelle von 3000 auch "transitioninend + 1000" eintragen. Die Textanimation startet dann eine Sekunde, nachdem die Ebene eingeblendet wurde. Wenn Du dann das Timing der Ebene veränderst, verändert sich das Timing der Textanimation automatisch mit.

Release Notes Version 6.1.0

  • [FEATURE]: Added TYPO3 8.5 compatibilitiy
  • [FEATURE]: Addes SrcSet Attribute to ls-bg slide backgrounds. Active and deactivate the srcset in the general Slider Options
  • [FEATURE]: Set skins path standard value now within tzhe typoscript constants (plugin.tx_layerslider.settings.skinsPath)
  • [FEATURE]: Added text transition in options and timeline for text transitions in
  • [FEATURE]: Added text transition out options and timeline for text transitions out
  • [FEATURE]: Added loop/middle transitions options and timeline for loop/middle transitions
  • [FEATURE]: Added hover transitions options
  • [FEATURE]: Added version tagging for slides for further updates
  • [FEATURE]: Added version converter for LS5 to LS6 sliders
  • [FEATURE]: Rewrite Timeline, added Text/Loop timelines, reordered layer settings
  • [TASK]: Removed ID attribute from fe containers
  • [TASK]: Removed frontend inline JS, added data attributes on layerslider container, rewrite initial js starter script
  • [TASK]: Changed TypeConverter for Array to priority 35
  • [TASK]: Changed Frontend Templates and removed the complete JavaScript code in source code. The slider becomes a new data markup to initialize it. The layerslinit.init.js files is rewritten to handle this.
  • [TASK]: Added slider options: type, fullSizeMode, fitScreenWidth, allowFullscreen, maxRatio, insertMethod, insertSelector, clipSlideTransition, preventSliderClip, hideOnMobile, hideUnder, hideOver, slideOnSwipe, optimizeForMobile, startInViewport, pauseLayers, playByScroll, playByScrollSpeed, cycles, forceCycles, shuffleSlideshow, sliderFadeInDuration, globalBGRepeat, globalBGAttachment, globalBGPosition, globalBGSize, showSlideBarTimer, yourLogo, yourLogoStyle, yourLogoLink, yourLogoTarget, slideBGSize, slideBGPosition, parallaxSensitivity, parallaxCenterLayers, parallaxCenterDegree, parallaxScrollReverse, forceLayersOutDuration, useSrcset
  • [TASK]: Removed slider options: randomSlideShow (replaced by new option shuffleSlideshow), imgPreload, loops, forceLoopNum, slideDelay, slideDirection, durationIn, durationOut, delayIn, delayOut, easingIn, easingOut, responsive, layersContainer, animateFirstSlide, lazyLoad
  • [TASK]: Added slide options: bgsize, bgposition, duration, transitionduration, kenburnszoom, kenburnsscale, kenburnsrotate, parallaxtype, parallaxevent, parallaxaxis, parallaxtransformorigin, parallaxdurationmove, parallaxdurationleave, parallaxdistance, parallaxrotate, parallaxtransformperspective
  • [TASK]: Removed slide options: slideDelay, slideInEasing, delayIn, slideOut, slideOutEasing, delayOut
  • [TASK]: Added layer options: transitionin, startatin, transformoriginin, clipin, bgcolorin, colorin, radiusin, widthin, heightin, filterin, transformperspectivein, texttransitionin, textstartatin,texttypein, textshiftin, textoffsetxin, textoffsetyin, textdurationin, texteasingin, textfadein, textrotatein, textrotatexin, textrotateyin, textscalexin, textscaleyin, textskewxin, textskewyin, texttransformoriginin, texttransformperspectivein, loop, loopstartat, loopoffsetx, loopoffsety, loopduration, loopeasing, loopopacity, looprotate, looprotatex, looprotatey, loopskewx, loopskewy, loopscalex, loopscaley, looptransformorigin, loopclip, loopcount, looprepeatdelay, loopyoyo, looptransformperspective, loopfilter, texttransitionout, textstartatout, texttypeout, textshiftout, textoffsetxout, textoffsetyout, textdurationout, texteasingout, textfadeout, textrotateout, textrotatexout, textrotateyout, textscalexout, textscaleyout, textskewxout, textskewyout, texttransformoriginout, texttransformperspectiveout, transitionout, startatout, transformoriginout, clipout, filterout, transformperspectiveout, bgcolorout, colorout, radiusout, widthout, heightout, hover, hoveroffsetx, hoveroffsety, hoverdurationin, hoverdurationout, hovereasingin, hovereasingout, hoveropacity, hoverrotate, hoverrotatex, hoverrotatey, hoverskewx, hoverskewy, hoverscalex, hoverscaley, hovertransformorigin, hoverbgcolor, hovercolor, hoverborderradius, hovertransformperspective, hoveralwaysontop, parallax, parallaxtype, parallaxevent, parallaxaxis, parallaxtransformorigin, parallaxdurationmove, parallaxdurationleave, parallaxrotate, parallaxdistance, parallaxtransformperspective, static, keyframe, minfontsize, minmobilefontsize, position
  • [TASK]: Removed layer options: delayin, showuntil
  • [TASK]: Set TYPO3 Version to 8.5.99
  • [TASK]: Added LS6 Icon for Backend
  • [TASK]: Updated documentation images
  • [TASK]: Optimized BE Inline JS and compress HTML SourceCode in Backend Module
  • [FIX]: Changed visibility settings fon layers in the positioning stage since LS6 changed it
  • [FIX]: Fixed responsiveUnder behavior for LS 6 in positioning stage
  • [FIX]: Changed {_all} to {_all:_all} because a crash in T3 8.5
  • [FIX]: Changed f:translate in combination with f:format.raw for translated CDATA text in BE