Wow! The TYPO3 LayerSlider Extension was 3 years old, and today comes the biggest update ever since the first release. At the beginning of December, Kreatura Media released version 6 of the jQuery LayerSlider plugin. The new version is just breathtaking. Since the beginning of December, I have invested more than 150 hours of work in this new release, and it has paid off. In the backend, a lot has changed, the Timeline has been completely redesigned. The management of the layers is now fused with the timeline. In addition, over 170 new options were added to slider, slides and layers.

Important notes about the update are available at the end of the article

Oops, an error occurred! Code: 20181213074018bbb9f0e6 

Cool Hero Sliders

Another important innovation is a new layout for a slider. It can be created with the new option "Fullsize Hero Slider". The nice thing is that in the options also a mode for "Fullwidth" can be set. For example, if the slider is placed directly under a navigation, screen-filling sliders can be created that have exactly the height of the browser window. The width also corresponds to the browser window, regardless of whether the slider is in a container with a width of only 1170px. This makes it possible to create a large slider without having to create a special template for it.

Oops, an error occurred! Code: 2018121307401866b36b5a

New Layer Optionen, Static Layers

Most of the changes affected the layers. Countless new options have been added. So far layers with various animations could be blended in and out. Thanks to the new options and new features, great effects can be achieved. In my opinion, the "Textanimations" is one of the best features at all. Now you can easily show and hide letters, words and whole lines with many different effects. Thanks to an ingenious input, you can divide a wide range of effects into letters, words or lines - for example, you would like to have a word displayed so that the letters fall time-delayed from the top? Absolutely no problem. But you want every second letter to come from below? Also no problem. Or every letter of a word is supposed to travel a different distance? Exactly, also no problem. So if you set the "Textoffsetxin" set to 50, the text moves for 50 pixels down to their final position. If you enter 50|-50, every second letter comes 50 pixels from below. The whole can be carried out as desired! 

In addition, levels can now be additionally equipped with a hover animation. The attributes can be assigned the same as for the layer effects. As an additional bonus, layers can also receive an animation loop. With that you make great Call To Action Buttons, which draw attention to themselves. But also the permanent approach and disappearing of levels is very easy to realize. You can determine how often a loop is repeated - a permanent repeat is also possible. Layer, text and loop animations can be verified in the backend on the timeline. Hover however not. This would make the processing more difficult depending on the effect.

Also new is the "Static" option for layers. You can display layers across multiple slides. Either on all slides or up to a slide on which the layer is to be blown out again.

Oops, an error occurred! Code: 201812130740187e1c92a4
Oops, an error occurred! Code: 201812130740182d13a707

Important notes for updating version 5

Before the update can be carried out to version 6, a current version should be installed (at least 5.6.0 of the PRO version or 5.4.9 of the TER version). Before the update the current jQuery LayerSlider Plugin is needed in the version 6.

Now install the TYPO3 LayerSlider Extension Version 6 via the Extension Manager. Override the existing version 5. After the installation you open the LayerSlider backend via the module "LayerSlider" In the left bar. Go to "JS Migration Wizard", click the blue upper button, and drag the "layerslider" folder from the CodeCanyon download into the upload area.

After the migration you go back to the listing. A red hint should be displayed for each slider:

This version of the slider is not compatible with the current version of the extension. Click here to start the update process

You will come back to the list and receive a message confirming the update of the slider. Make this process to every slider. This should be done immediately for each slider after the extension update and the integration of the new jQuery LayerSlider plugin is done. The old configuration code of the slider no longer works with the new version.

You can now edit the converted sliders.

Problems with conversion
There may be problems with the timings when converting. You should definitely check the sliders, if they are timed accordingly. The following values should be checked in any case:

  • Slide: Basic Options > Slide transition Options > durationin - This value determines the duration of the visibility of the slider
  • Layer: Opening transition > durationin / startatin - Determines how long the layer will be inserted and when the layer will be displayed

Templates and JavaScript (only important if you have outsourced the templates)
The backend templates have changed completely, so they should always point with TS on the typo3conf/ext/layerslider directory. The frontend templates have also changed. If you have outsourced the templates somewhere else, you should use the new templates. The main reason for this are the countless new options of a slider, the slides and the layers. All attributes have changed with the layers.

Inline JavaScript is not available with the new version, it's removed completely. All initial slider attributes, which were previously required by the inline JavaScript for the slider, have been stored in data attributes. The Init JavaScript has been changed too. A slider can also be integrated several times on one side since version 6. ID tags, which were then duplicated, are completely omitted.

SrcSet for Slide background images
Version 6 of the LayerSlider supports SourceSet for the slide images. SrcSet can be activated in the slider options. More is not to be made here, the template of the slider takes this into account and outputs the Sourcesets in the following sizes:

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

Important changes and new animations 

  • Transition in/out, as well the text animations start and stop have now explicit activated / deactivated. If a layer is not visible on the slide, or if it does not disappear, the animation setting is not active. You can find them as the first checkbox in the respective settings of the animation
  • Keywords for Timings: In many cases, you can use keywords for timing purposes now. So if you want to start a text animation, you can use "textstartatin" instead of 3000. If you enter  "transitioninend + 1000" the text animation then starts one second after the layer is displayed. If you then change the timing of the level, the timing of the text animation changes automatically.

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