gbdflex

EXT: GbdFlex

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 git@bitbucket.org:sotastudio/typo3.extbase.gbdflex.git /path/to/project/typo3conf/ext/gbdflex/

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

TypoScript-Einrichtung

plugin.tx_gbdflex { {
    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_gbdflex._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_gbdflex { {
    ansicht {
        # Notwendige Optionen, wenn Sie planen, die Vorlagen zu manipulieren
        templateRootPath = fileadmin/res/tpl/ext/gbdflex/Templates/
        partialRootPath = fileadmin/res/tpl/ext/gbdflex/Partials/
        layoutRootPath = fileadmin/res/tpl/ext/gbdflex/Layouts/
    }
}

Zugriff auf Frontend-Daten

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

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):

Wie man

? das Plugin in einer Bibliothek verwenden

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

lib.example < temp.gbdflex
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/gbdflex/Resources/Private/Templates/GbdFlex/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, Funktionen 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