BlockPeek 🥽 für REDAXO 5

Tauscht im REDAXO Backend den Slice-Output durch eine Vorschau des jeweiligen Inhalts aus dem Frontend aus. Damit das Ganze funktioniert, wird ein HTML-Template benötigt, das in den Addon-Einstellungen hinterlegt werden kann. Ausserdem sollte der Slice-Output modular aufgebaut sein, damit die Vorschau auch wirklich den Inhalt des jeweiligen Slices darstellt.

Features

• Vorschau des Slice-Inhalts im REDAXO Backend
• Verhindert Interaktion im Vorschau-Inhalt (keine Links, Formulare etc. anklickbar)
• Konfigurierbares HTML-Template für die Vorschau
• Iframe-basierte Darstellung der Vorschau
• Anpassbare Iframe-Größe und Zoom-Faktor
• Caching der generierten Vorschauen zur Performance-Optimierung
• Extension Point BLOCK_PEEK_OUTPUT zur weiteren Anpassung der Ausgabe

Installation

Einfach das Addon über den REDAXO Installer installieren, Template an eigene Wünsche anpassen (oder einfach das eigene Standard-Template einbinden) und die BlockPeek-Einstellungen konfigurieren. Fetich!

Konfiguration

In den Einstellungen des Addons kann ein HTML-Template hinterlegt werden, das für die Vorschau der Slices verwendet wird. Dabei steht der Platzhalter BLOCK_PEEK_CONTENT zur Verfügung, der durch den jeweiligen Slice-Inhalt ersetzt wird.

Im Template sollten die CSS-Dateien und ggf. JavaScript-Dateien eingebunden werden, die für die korrekte Darstellung des Inhalts notwendig sind.

Das Template wird intern als verstecktes REDAXO-Template (Key: block_peek_internal) gespeichert und durchläuft die normale REDAXO-Renderpipeline — inklusive aller REDAXO-Variablen, redaxo:// Links und PHP Code. REX_ARTICLE[...] solltest du nicht verwenden, ausser du willst tatsächlich alle Slices des Artikels rendern.

Zusätzlich können folgende Konfigurationsoptionen angepasst werden:

• Iframe Mindesthöhe: Die minimale Höhe des Iframes in Pixeln (Standard: 300).
• Iframe Zoom-Faktor: Der Zoom-Faktor des Iframes (Standard: 0.5).
• Cache Modus: Legt fest, ob die generierten Vorschauen zwischengespeichert werden sollen (automatisch, aktiviert, deaktiviert).
• Cache TTL: Die Zeit in Sekunden, wie lange eine Vorschau im Cache gespeichert bleibt (Standard: 3600).

Tailwind 4 / @source Discovery

Das Vorschau-Template wird als verstecktes REDAXO-Template (Key: block_peek_internal) gespeichert. Damit Tailwind 4 die im Template verwendeten Utility-Klassen findet, empfehlen wir das developer Addon — es synchronisiert rex_template-Datensätze als Dateien nach <data>/addons/developer/templates/<Name> [<id>]/template.php (<data> ist je nach Installation entweder redaxo/data/ oder var/data/). Anschließend einfach eine @source-Direktive in dein CSS aufnehmen:

@source "../../path/to/data/addons/developer/templates/**/*.php";

Ohne das developer Addon liegt das Template ausschliesslich in der Datenbank und Tailwind kann es nicht scannen. Workarounds: das developer Addon installieren (empfohlen) oder eine Tailwind-Safelist für die im Template verwendeten Klassen pflegen.

Extension Points

Das Addon stellt den Extension Point BLOCK_PEEK_OUTPUT zur Verfügung, mit dem die Ausgabe der Vorschau weiter angepasst werden kann.

Zum Beispiel in der project Addon boot.php folgendes einfügen:

rex_extension::register('PACKAGES_INCLUDED', function (rex_extension_point $ep) {
    rex_extension::register('BLOCK_PEEK_OUTPUT', function (rex_extension_point $ep) {
        $html = $ep->getSubject();
        $sliceId = $ep->getParam('slice_id', 0);
        // Beispiel: Füge eine benutzerdefinierte Nachricht am Ende der Vorschau hinzu
        $html .= '<div style="position: fixed; bottom: 10px; right: 10px; background: rgba(0,0,0,0.5); color: white; padding: 5px; border-radius: 3px;">Slice ID: ' . $sliceId . '</div>';
        $ep->setSubject($html);
    });
});

Tipps und Tricks

• Achte darauf, dass das HTML-Template korrekt aufgebaut ist und alle notwendigen Ressourcen (CSS, JS) eingebunden sind.
• Nutze den Extension Point BLOCK_PEEK_OUTPUT, um spezielle Anpassungen an der Vorschau vorzunehmen.
• in der Modul-Ausgabe kann man mit rex::isBackend() zum Beispiel CSS-Klassen nur im Backend zuweisen. So kann man die Modul-Ausgabe für die Vorschau optimieren.

---

Schreibt auftretende Fehler, Notices und Wünsche als Issue auf Github

---

Das Changelog: CHANGELOG.md

---

Lizenz

The MIT License (MIT)

Credits

• FriendsOfREDAXO
• Project Lead: Yves Torres