ALLES ÜBER flexslider UND WIE ES AUF WEBSITES EINGESETZT WIRD

Untersuchte Extension

flexslider

EXT: FlexSlider

Es bringt WooThemes fantastisches, voll reaktionsfähiges jQuery Slider Plugin zu TYPO3 ? natürlich als Frontend Plugin.

Installation

Via Git

Klonen in typo3conf/ext/ext/

git clone :sotastudio/typo3.extbase.flexslider.git /path/to/project/typo3conf/ext/flexslider/

Die Installation erfolgt wie gewohnt über den Extension Manager.

Über TER

Zu TER springen

Konfiguration

  • Statische Erweiterungsvorlage einbinden
  • Frontend-Plugin erstellen
    • Anpassen der Plugin-Einstellungen an Ihre Bedürfnisse
    • Einrichten der Speicherseite für Datensätze, von der aus die Slider-Elemente stammen
  • Erstellen von Schieberegler-Elementen auf der Seite mit der Datensammlung
  • Überprüfen Sie das Frontend!

TypoScript-Konstanten

plugin.tx_flexslider { {
    ansicht {
        # Notwendige Optionen, wenn Sie planen, die Vorlagen zu manipulieren
        templateRootPath = EXT:flexslider/Ressourcen/Private/Templates/
        partieller RootPath = EXT:flexslider/Ressourcen/Private/Teile/
        layoutRootPath = EXT:flexslider/Ressourcen/Private/Layouts/
    }
    persistenz {
        # Hier können Sie die Record Storage Page global einrichten
        storagePid =
    }
    einstellungen {
        # Zeichenkette: Dateiverweis auf die Css-Datei des FlexSlider - leere diesen Wert, wenn du ihn selbst einbinden möchtest
        css = EXT:flexslider/Ressourcen/Public/Css/flexslider.css
        lib {
            # Zeichenkette: Dateiverweis auf die alternative jQuery-Bibliothek, wenn EXT t3jquery nicht verwendet wird
            jQuery = EXT:flexslider/Ressourcen/Public/Js/jquery-min.js
            # Zeichenkette: Dateiverweis auf die flexslider-Bibliothek
            flexslider = EXT:flexslider/Ressourcen/Public/Js/jquery.flexslider-min.js
            # Bool: Flag, um festzulegen, ob das Skript in die Fußzeile verschoben werden soll oder nicht
            moveToFooter = 0
        }
    }
}

TypoScript-Einrichtung

plugin.tx_flexslider { {
    einstellungen {
            # Boolean: Definiert, ob die Bildunterschrift angezeigt werden soll oder nicht
        showCaption = 1
            # Zeichenkette: Wählen Sie Ihren Animationstyp, "verblassen" oder "Folie"
        animation = Verblassen
            # Zeichenkette: Wählen Sie die Gleitrichtung, "horizontal" oder "vertikal"
        gleitrichtung = horizontal
            # Boolean: Schieberegler automatisch animieren
        diashow = 0
            # Integer: Stellen Sie die Geschwindigkeit des Diashow-Zyklus in Millisekunden ein
        diashowGeschwindigkeit = 7000
            # Integer: Legen Sie die Geschwindigkeit der Animationen in Millisekunden fest
        animationDauer = 600
            # Boolean: Navigation der Display-Steuerung
        controlNav = 1
            # Boolean: Navigation für vorherige/nächste Navigation erstellen? (wahr/falsch)
        directionNav = 1
            # Boolean: Ermöglicht die Navigation mit dem Schieberegler über die linke/rechte Tastaturtaste
        keyboardNav = 1
            # Boolean: Ermöglicht die Navigation mit dem Schieberegler über das Mausrad
        mausrad = 0
            # Boolean: Erstellen von Pausen-/Wiedergabedynamikelementen
        pausePlay = 0
            # Boolean: Zufällige Folienreihenfolge
        randomisieren = 0
            # Boolean: Soll die Animationsschleife durchlaufen werden? Wenn falsch, erhält directionNav an beiden Enden "disable"-Klassen
        animationLoop = 1
            # Boolean: Pausieren Sie die Diashow, wenn Sie mit der Maus über den Schieberegler fahren, und setzen Sie sie dann fort, wenn Sie nicht mehr mit der Maus fahren
        pauseOnHover = 0
            # Bildeinstellungen in px - experimentell!
            # Wenn du sie nicht wirklich brauchst, halte einfach die Optionen leer!
            # Das Zuschneiden funktioniert - geben Sie einfach so etwas wie Breite = 960c ein
        bilder {
            breite =
            höhe =
            minWidth =
            minHeight =
            maxWidth = Breite
            maxHeight =
        }
    }
}

Sprachüberschreibungen

Verwenden Sie den folgenden TS Setup-Objektpfad, um Lokalisierungen zu überschreiben.

plugin.tx_flexslider._LOCAL_LANG.de {
    languageLabel = Wert
}

Diverse

Werfen Sie einen Blick auf

  • /Konfiguration/Typoscript/constants.txt
  • /Konfiguration/Typoscript/setup.txt

um weitere Informationen über Einstellungen und Sprachbeschriftungen zu erhalten.

Fluid Templatierung

Hinweis auf den Anfang: Wenn Sie spezielle Objekte/Vars in Partials verwenden möchten, müssen Sie diese als Argument durchgeben, z.B.

<f:rendern 
   partial="JavaScript" (Teilweise) 
   arguments="{settings: settings, data: data, configuration: configuration}"/>

Speichern der Vorlagen an anderer Stelle

Wirklich? Das ist ganz einfach - passen Sie einfach die folgenden Zeilen an Ihre Bedürfnisse an und setzen Sie sie in die TypoScript-Konstanten ein.

plugin.tx_flexslider { {
    ansicht {
        # Notwendige Optionen, wenn Sie planen, die Vorlagen zu manipulieren
        templateRootPath = fileadmin/res/tpl/ext/flexslider/Templates/
        partialRootPath = fileadmin/res/tpl/ext/flexslider/Partials/
        layoutRootPath = fileadmin/res/tpl/ext/flexslider/Layouts/
    }
}

Zugriff auf Frontend-Daten

Mit dem Objekt {data} können Sie auf alles zugreifen, was das Inhaltselement (mit dem FlexSlider Plugin) betrifft:

cObject Daten-Array
data.uid Das Uid
data.pid Seiten-ID, die dieses Inhaltselement enthält
data.sys_language_uid ID der Sprache der Datensätze

Und natürlich noch viele mehr. Verwenden Sie einfach den Debug Viewhelper, um einen Hinweis auf andere Variablen zu erhalten:

<f:debug>{daten}</f:debug>

Aufrufen der Erweiterungskonfiguration

Mit dem Objekt {configuration} können Sie auf alle Optionen aus der Extension Configuration zugreifen, die im Extension Manager definiert ist (gespeichert in der localconf.php):

Erweiterungskonfiguration
extendSubtitleByRTE Boolean - definiert, ob der Untertitel eine RTE ist oder nicht; wenn ja, kann er HTML enthalten

Wie man

? das Plugin in einer Bibliothek verwenden

? um es z.B. auf die Seitenvorlage zu verweisen:

lib.example < temp.flexslider
lib.example.persistence.storagePid = 73
lib.example.settings.randomize = 1

Sie müssen nur die Records Storage Page ID (storagePid) anpassen - erforderlich! Natürlich können Sie das TypoScript-Setup über die lib.example.settings an Ihre Bedürfnisse anpassen. Graben Sie einfach in /Configuration/Typoscript/setup.txt, um einen Hinweis auf die Möglichkeiten zu erhalten.

? Inline JS in den Kopf oder zum Verschließen des Body-Tags werfen

Besuchen Sie die Hauptvorlage in typo3conf/ext/flexslider/Resources/Private/Templates/FlexSlider/List.html und ersetzen Sie sie

<f:rendern
   partial="JavaScript" (Teilweise)
   arguments="{settings: settings, data: data}"/>

mit

<fs:AddJsInline hinzufügen
    code="<f:render partial='JavaScriptRaw'
    arguments='{settings: Einstellungen, Daten: data}'/>"
    name="fs-{data.uid}" "
    moveToFooter="{settings.lib.moveToFooter}" " />

Roadmap und Aufgaben

Werfen Sie einen Blick auf den Github Issue Tracker für dieses Projekt.

Mitwirken

Wenn Sie Ideen, Features oder bug-Anfragen haben, zögern Sie nicht, diese im Issue Tracker zu melden.

Zögern Sie nicht, sich zu gabeln- und zu ziehen.

Mitwirkende

Simon Rauterberg

  • Hotfix für DynLinkViewHelper)

Xaver Maierhofer

  • Verbesserung für AddCssJsViewHelper
  • Verbesserung für AddJQueryViewHelper
  • Neu hinzufügenJsInlineViewHelper

Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.

Verteilung:FLEXSLIDER ist auf

3.11 % aller TYPO3 installiert.

  • 1 % aller TYPO3 9.5.x Installationen installiert
  • 0.93 % aller TYPO3 8.7.x Installationen installiert
  • 5.09 % aller TYPO3 7.6.x Installationen installiert
  • 6.25 % aller TYPO3 7.4.x Installationen installiert
  • 25 % aller TYPO3 7.3.x Installationen installiert
  • 2.94 % aller TYPO3 7.1.x Installationen installiert
  • 33.33 % aller TYPO3 7.0.x Installationen installiert
  • 3.52 % aller TYPO3 6.2.x Installationen installiert
  • 6.32 % aller TYPO3 6.1.x Installationen installiert
  • 5.56 % aller TYPO3 6.0.x Installationen installiert
  • 4.07 % aller TYPO3 4.7.x Installationen installiert
  • 0.91 % aller TYPO3 4.6.x Installationen installiert
  • 2.45 % aller TYPO3 4.5.x Installationen installiert
  • 1.39 % aller TYPO3 4.4.x Installationen installiert
  • 1.69 % aller TYPO3 4.3.x Installationen installiert
  • 0.83 % aller TYPO3 4.2.x Installationen installiert
  • 1.91 % aller TYPO3 4.1.x Installationen installiert

Aktualität:FLEXSLIDER ist auf dem neusten Stand (v.1.5.3) bei

40.54 % aller TYPO3 Installationen

  • 0 % aller TYPO3 9.5.x Installationen
  • 0 % aller TYPO3 9.3.x Installationen
  • 0 % aller TYPO3 9.2.x Installationen
  • 0.37 % aller TYPO3 8.7.x Installationen
  • 4.22 % aller TYPO3 7.6.x Installationen
  • 0 % aller TYPO3 7.5.x Installationen
  • 6.25 % aller TYPO3 7.4.x Installationen
  • 25 % aller TYPO3 7.3.x Installationen
  • 0 % aller TYPO3 7.2.x Installationen
  • 2.94 % aller TYPO3 7.1.x Installationen
  • 33.33 % aller TYPO3 7.0.x Installationen
  • 2.2 % aller TYPO3 6.2.x Installationen
  • 0.62 % aller TYPO3 6.1.x Installationen
  • 0.23 % aller TYPO3 6.0.x Installationen
  • 0 % aller TYPO3 5.0.x Installationen
  • 0 % aller TYPO3 4.7.x Installationen
  • 0.13 % aller TYPO3 4.6.x Installationen
  • 0.08 % aller TYPO3 4.5.x Installationen
  • 0.09 % aller TYPO3 4.4.x Installationen
  • 0 % aller TYPO3 4.3.x Installationen
  • 0 % aller TYPO3 4.2.x Installationen
  • 0 % aller TYPO3 4.1.x Installationen
  • 0 % aller TYPO3 4.0.x Installationen
  • 0 % aller TYPO3 3.5.x Installationen

FLEXSLIDER Version:Verteilung nach installierten Versionen

  • 4.72 % FLEXSLIDER v.7.0.0
  • 0.18 % FLEXSLIDER v.6.2.0
  • 1.27 % FLEXSLIDER v.1.5.4
  • 86.75 % FLEXSLIDER v.1.5.3
  • 7.08 % FLEXSLIDER v.1.5.2

PHP Version:FLEXSLIDER wird benutzt mit

  • 3.77 % PHP/7.0
  • 44.35 % PHP/5.6
  • 18.84 % PHP/5.5
  • 7.53 % PHP/5.4
  • 18.15 % PHP/5.3
  • 7.19 % PHP/5.2
  • 0.17 % PHP/4.4

responsive - image 4

Gosign-Responsive Index: TYPO3 Installationen nutzen FLEXSLIDER zu

  • 7 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
  • 15 % wenn der Gosign-Responsive-Index zwischen 60 % und 80 % ist
  • 43 % wenn der Gosign-Responsive-Index zwischen 40 % und 60 % ist
  • 35 % wenn der Gosign-Responsive-Index zwischen 20 % und 40 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 0 % und 20 % ist

speed test - image 5

Pagespeed: TYPO3 Installationen nutzen FLEXSLIDER zu

  • 15 % wenn der Pagespeed zwischen 80 % und 100 % ist
  • 44 % wenn der Pagespeed zwischen 60 % und 80 % ist
  • 29 % wenn der Pagespeed zwischen 40 % und 60 % ist
  • 11 % wenn der Pagespeed zwischen 20 % und 40 % ist
  • 8 % wenn der Pagespeed zwischen 0 % und 20 % ist


Stichprobe n=37955 von Gosign gecrawlte TYPO3-Seiten mit den Top-Level-Domains <.de>

Ran an die Resultate – unser Newsletter für Sie!

Damit Sie gleich Wind davon bekommen, wenn wir in unserem Magazin zu neuen Erkenntnissen kommen.

[wpforms id="1559"]