Folien für Präsentationen mit Reveal JS

22.11.2024 15:46 von Bernhard Renner

„Create Stunning Presentations on the Web“ so liest man es auf der Webseite von Reveal JS. So einfach sich dieser Satz liest, so einfach ist es dann auch ein paar Folien für eine Präsentation mir Reveal JS zu erstellen. Obwohl ... ein paar Vorkenntnisse und ein Gespür für HTML benötigt man dann doch ;-)

In diesem Beitrag möchte ich euch nicht Reveal JS selbst nahe bringen, sondern eine Möglichkeit aufzeigen, wie ihr die Basis für eure eigene Präsentation - direkt in eurer Contao Installation - schaffen könnt.

Was wird benötigt?

die Dateien von Reveal JS
die Erweiterung Rocksolid Custom Elements
zwei RSCE Dateien: rsce_reveal_config.php und rsce_reveal.html.twig
eine angepasste/eigene fe_page.html5

1. Reveal JS Dateien

Die aktuellen Reveal JS Dateien können von github heruntergeladen werden.
Lade dazu am Besten die master.zip » https://github.com/hakimel/reveal.js/archive/master.zip

entpacke die master.zip
erstelle in deiner Contao Installation einen neuen Ordner
z.B. /files/revealjs/
hier rein kopierst du die Ordner /dist/ und /plugin/
/files/revealjs/dist/
/files/revealjs/plugin/
ich habe noch einen Ordner /images/ mit erstellt - in diesem werden eingefügte Screenshots für die Präsentation bereitgestellt
/files/revealjs/images/

2. Erweiterung Rocksolid Custom Elements

Sofern du die Erweiterung nicht bereits installiert hast, installiere [madeyourday/contao-rocksolid-custom-elements].
Wie du eine Erweiterung installierst, wird dir im Contao Handbuch beschrieben.

https://extensions.contao.org/?q=rocksolid%20custom%20elements&pages=1

3. RSCE Dateien

Erstelle zwei RSCE Dateien rsce_reveal_config.php und rsce_reveal.html.twig im Ordner /templates/myTheme/.
Den untigen Inhalt kopierst du jeweils in die entsprechende Datei.

<?php
/* /templates/myTheme/rsce_reveal_config.php */

return [
    'label' => ['RevealJS','Einstellungen für das Präsentationsframework Reveal JS'],
    'types' => ['content'],
    'contentCategory' => 'texts',
    'fields' => [
        'theme' => [
            'label' => ['Auswahl Theme',''],
            'inputType' => 'select',
            'eval' => [
                'tl_class' => 'w50',
            ],
            'options' => [
                'black',
                'white',
                'league',
                'beige',
                'night',
                'serif',
                'simple',
                'solarized',
                'moon',
                'dracula',
                'sky',
                'blood',
            ],
            'default' => 'black',
        ],
        'plugins' => [
            'label' => ['Plugins',''],
            'inputType' => 'checkbox',
            'eval' => [
                'tl_class' => 'm12 clr',
                'multiple' => true,
            ],
            'options' => [
                'RevealHighlight',
                'RevealMarkdown',
                'RevealMenu',
                'RevealSearch',
                'RevealNotes',
                'RevealMath',
                'RevealZoom',
            ],
            'default' => ['RevealHighlight','RevealMarkdown'],
        ],
        'confoptions' => [
            'label' => ['Konfigurations Optionen',''],
            'inputType' => 'textarea',
            'eval' => [
                'tl_class' => 'clr',
                'decodeEntities' => true,
                'allowHtml' => true,
                'class' => 'monospace',
                'rte' => 'ace|html',
                'explanation' => 'insertTags',
            ],
            'default' => 'slideNumber: true,',
            'save_callback' => [
                function ($value) {
                    return html_entity_decode($value, ENT_QUOTES);
                }
            ],
        ],
    ],
];

{# /templates/myTheme/rsce_reveal_config.php #}

{% if as_editor_view %}

    <h3>## Reveal JS ##</h3>
    <span class="tl_gray limit_height">
    Theme: {{ theme }}<br>
    Plugins: {% for plugin in plugins %}{{ plugin }}{{ not loop.last ? ', ' }}{% endfor %}
    <span>

{% else %}

    {% add to head %}
        <link rel="stylesheet" href="/files/revealjs/dist/reset.css">
        <link rel="stylesheet" href="/files/revealjs/dist/reveal.css">
        <link rel="stylesheet" href="/files/revealjs/dist/theme/{{ theme }}.css">

        {% for plugin in plugins %}
            {% if plugin == 'RevealHighlight' %}
            <link rel="stylesheet" href="/files/revealjs/plugin/highlight/monokai.css">
            {% endif %}
        {% endfor %}

    {% endadd %}

    
    {% add to body %}
   
        <script src="/files/revealjs/dist/reveal.js"></script>

        {% for plugin in plugins %}
            {% set pluginName = plugin|replace({'Reveal': ''})|lower %}
            <script src="/files/revealjs/plugin/{{ pluginName }}/{{ pluginName }}.js"></script>
        {% endfor %}


        <script>
            Reveal.initialize({
                hash: true,
                {% if confoptions is defined and confoptions is not empty %}{{ confoptions|trim|raw }}{% endif %}
                
                plugins: [{% for plugin in plugins %}{{ plugin }}{{ not loop.last ? ', ' }}{% endfor %}],
            });
        </script>

    {% endadd %}
    
{% endif %}

4. Anpassung des Layouts

Die Präsentations folgt einer anderen Darstellung als dein Webseitenlayout, sodass wir das Layout dementsprechend auch anpassen müssen.
Dazu wird eine Veränderung der fe_page.html5 durchgeführt. Bzw. wird eine neue Layout-Datei angelegt und verwendet.

Erstelle deshalb im Templates Ordner eine neue Datei /templates/myTheme/fe_page_revealjs.html5.
Der Inhalt der Datei wird leicht angepasst und kann wie folgt aussehen:

<!DOCTYPE html>
<html lang="<?= $this->language ?>"<?php if ($this->isRTL): ?> dir="rtl"<?php endif; ?>>
<base href="{{ page::alias }}">
<head>

  <?php $this->block('head'); ?>
    <meta charset="<?= $this->charset ?>">
    <title><?= $this->title ?></title>
    <base href="<?= $this->base ?>">

    <?php $this->block('meta'); ?>
      <meta name="robots" content="<?= $this->robots ?>">
      <meta name="description" content="<?= Contao\StringUtil::substr($this->description, 320) ?>">
      <meta name="generator" content="Contao Open Source CMS">
    <?php $this->endblock(); ?>

    <?php if ($this->canonical): ?>
      <link rel="canonical" href="<?= $this->canonical ?>">
    <?php endif; ?>

    <?= $this->viewport ?>
    <?= $this->framework ?>
    <?= $this->stylesheets ?>
    <?= $this->mooScripts ?>
    <?= $this->head ?>
  <?php $this->endblock(); ?>

</head>
<body id="top"<?php if ($this->class): ?> class="<?= $this->class ?>"<?php endif; ?><?php if ($this->onload): ?> onload="<?= $this->onload ?>"<?php endif; ?>>

  <?php $this->block('body'); ?>
    

    <div class="reveal">


        <?php $this->block('main'); ?>
            <?= $this->main ?>
        <?php $this->endblock(); ?>

       
    </div>

    
  <?php $this->endblock(); ?>

  <?= $this->mootools ?>
  <?= $this->jsonLdScripts ?>
</body>
</html>

Hinweis: ich habe die <base href="{{ page::alias }}"> angepasst, damit beim Folienwechsel der Pfad der URL erhalten bleibt.
Du musst in deiner Datei die Leerzeichen im Insert Tag rausnehmen!

Die HTML-Struktur folgt der Basiseinstellungen, wie sie auf der Webseite von Reveal JS angeführt sind » https://revealjs.com/

5. Seitenlayout anlegen

Als nächstes wird ein neues Seitenlayout angelegt, welches wir später für die Seite benötigen.
Unter Layout » Themes » Seitenlayouts erstelle ein neues Seitenlayout.

Vergib einen Namen für das Seitenlayout » ich habe Reveal JS gewählt.
Unter Zeilen und Spalten wähle jeweils nur Hautpzeile und Hauptspalte aus.

Alle weiteren Auswahlmöglichkeiten oder Frontend-Module bleiben ausständig - nichts auswählen oder hinzufügen.

Ausnahme: unter Seiten-Template wählst du dein zuvor angelegtes angepasstes Layouttemplate fe_page_revealjs.hmtl5 aus.

6. Neue Seite anlegen

Nun kannst du unter Inhalte » Seiten eine neue Seite vom Typ 'Reguläre Seite' anlegen.
Unter Layout-Einstellungen » Ein Layout zuweisen wählst du das vorhin neu angelegte Layout Reveal JS aus.

7. Artikel für Folien erstellen

Im Artikel deiner vorhin erstellten neuen Seite musst du in den Einstellungen noch einen Kleinigkeit anpassen: füge in den Experteneinstellungen die Klasse slides hinzu.
Diese Klasse benötigt Reveal JS für die Initialisierung.

8. Initialisierung Reveal JS

Nun legst du im Artikel als erstes Inhaltselement ein Inhaltselement vom Typ Reveal JS aus. Dieses ist das Rocksolid Custom Element, welches du unter Punkt 3 erstellt hast.

Im Standard ist das Theme black ausgewählt.
Weiters sind im Standard die Plugins RevealHighlight und RevealMarkdown ausgewählt. Plugins helfen dir ein wenig flexibler bei der Foliengestaltung zu sein.

Im Abschnitt Konfigurations Optionen kannst du eigene Optionen zur weiteren Gestaltung hinzufügen.
In folgendem screenshot siehst du die Möglichkeit einen eigenen Menüpunkt im Menü hinzuzufügen (siehe dazu die Folien zu 'Twig Basics'.

Eine Übersicht der verfügbaren Optionen findest du auf der Webseite von Reveal JS.

9. Foliendateien anlegen

Jetzt kannst du bereits die Inhalte deiner Slides anlegen :-)
Wie du diese gestaltest obliegt dir selbst. Im Grunde sind es jedoch immer HTML-Abschnitte, die entweder als einzelnes Inhaltselement HTML oder ungefiltertes HTML gefüllt werden können oder aber auch aus mehreren Inhaltselementen HTML oder ungefiltertes HTML bestehen können. Auch Inhaltselemente vom Typ Markdown können verwendet werden.

Ein einzelner Slide sieht immer so aus: <section>Slide 1</section>

Drei Slides werden somit so dargestellt:

<section>Slide 1</section>  
<section>Slide 2</section>  
<section>Slide 3</section>

Verschachtelte Slides bewirken, dass vertikale Slides innerhalb eines Slides dargestellt werden:

<section>Horizontaler Slide</section>
<section>
  <section>Vertikaler Slide 1</section>
  <section>Vertikaler Slide 2</section>
</section>

Welche weiteren Möglichkeiten es gibt - im Speziellen welche Optionen, Plugins, unterschiedliche Themes, etc. kannst du nun auf der Webseite Reveal JS weiter nachlesen.

Wie schon anfangs vermerkt, möchte ich hier nicht Reveal JS selbst erklären, sondern eine Möglichkeit aufzeigen, Präsentationen in deiner Contao Installation selbst zu erstellen.

Die Präsentation 'Twig Basics' sieht hier im Backend übrigends so aus: