„reveal.js“ als TYPO3-Extension

Ich habe eine gute und eine schlechte Nachricht für euch:
Donald Trump wird heute neuer US-Präsident und ich veröffentliche eine neue TYOP3-Extension. 😉

tgm_reveal“ ist eine TYPO3-Erweiterung, mit der man schnell und einfach HTML-Präsentationen erstellen kann.
Die Kernfunktionen bezieht die Extension aus dem bewährten jQuery-Plugin „reveal.js“.

Vorteile der Erweiterung:

  • Präsentationen können innerhalb eines TYPO3-Systems schnell und einfach erstellt werden
  • Die HTML-Präsentationen sind responsiv und browserunabhängig
  • Präsentationen können ohne Zusatzsoftware wie z. B. Powerpoint erstellt und wiedergegeben werden

Einen kleinen Vorgeschmack könnt ihr euch in dieser Demo holen.

Die Erweiterung bindet wie bereits erwähnt, „reveal.js“ als TYPO3-Extension ein – konfigurierbar durch Flexform und Seiteneigenschaften. Aber …

Wie erstelle ich eine Präsentation?

Nach der Installation müsst ihr zunächst die Plugin-Root-Seite der Präsentation festlegen auf der ihr das Plugin hinzufügt, welches das jQuery-Plugin „reveal.js“ ausführt und „verwaltet“. Die Plugin-Root-Seite ist später nicht sichtbar und kann deshalb beliebig festgelegt werden.

Der Folienaufbau:

Nun stellt sich vielleicht dem ein oder anderen die Frage, wie die Folienstruktur auszusehen hat:

„Alle Seiten bis zur zweiten Ebene, die sich innerhalb der Plugin-Root-Seite befinden, werden als Folie genutzt. Das bedeutet, dass die Extension alle Seiten, die sich auf der ersten Ebene innerhalb der Plugin-Root-Seite befinden, als Folie wertet. Dessen Unterseiten (die zweite Ebene) hingegen spiegeln sich als Unterfolien der Seiten auf der ersten Ebene wieder. Mehr als zwei Ebenen werden ignoriert und nicht dargestellt.“

Zu kompliziert? Vielleicht hilft ein kleiner Screenshot weiter.

Alle rot hinterlegten Seiten gehören zur Präsentation. Zum Beispiel ist „[6] Configuration“ eine Hauptfolie und „[6.1] General Settings“ dessen erste Unterseite:

Kurz gesagt: Folien entstehen durch die Struktur im Seitenbaum innerhalb der Plugin-Root-Seite.

Inhaltselemente:

Der Inhalt, der später in der Präsentation dargestellt werden soll, richtet sich nach den Inhaltselementen, die auf den einzelnen Seiten im Backend hinzugefügt werden. Zusätzlich bietet „reveal.js“ die Möglichkeit Elemente, wie Zitate oder Code-Schnipsel zu nutzen. Diese Funktion ist allerdings nur in unserer Zusatz-Extension „tgm_reveal_extra“ (nach Veröffentlichung ebenfalls im TER zu finden) verfügbar.
Ein Blick lohnt sich also auch hier.

Welche Konfigurationsmöglichkeiten gibt es?

Die Extension bringt bei der Installation zwei verschiedene Konfigurationsmöglichkeiten mit sich:

  • Die Plugineinstellungen können im Plugin-Element, welches auf der Root-Seite angelegt wurde, vorgenommen werden. Diese Einstellungen gelten für die komplette Präsentation wie zum Beispiel das Design (bzw. Theme), die Fortschritts- bzw. Navigationsanzeige, die Folienübergänge, ein optionaler Parallax-Hintergrund und viele mehr. Desweiteren ist es möglich eigenes CSS und JavaScript zu nutzen.
  • Die Folieneigenschaften definieren den Style der einzelnen Folien. Diese können in den Seiteneigenschaften der entsprechenden Seite modifiziert werden. Unter anderem stehen dort Optionen wie Hintergründe oder ein Feld für Notizen, die während der Vorstellung über eine bestimmte „reveal.js“-Funktion nur vom Sprecher eingesehen werden können, zur Verfügung.

 

Den vollständigen TER-Eintrag inklusive Download, erweiterter Einweisung und Repository findet ihr hier.

Also dann, viel Spaß damit!

3 Kommentare

  • Erstmal danke für die schöne Extension!
    Kann es sein, dass es statt
    plugin.tx_tgmreveal_reveal.lib.pages.10.entryLevel = 1
    plugin.tx_tgmreveal_reveal.lib.pages.10.entryLevel = 0
    heißen sollte?
    Sonst werden ja nur die Unterseiten der Slides ausgegeben.

    Bei mir gings zumindest erst nach entryLevel = 0.

  • Sehr sehr schön! Ist denn eine (offiziell) TYPO3 8LTS-kompatible Version in Arbeit? Falls nicht, wäre denn ein Pull Request auf GitHub erwünscht?

Schreibe einen Kommentar zu EG Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Highlighting von Codes ist mit den Tags  [ts], [php], [html], [javascript], [xml] oder [code] möglich.