Look: Echte Frontend-Vorschau im TYPO3-Seitenmodul

Das TYPO3-Seitenmodul zeigt von einem Inhaltselement eine Überschrift, ein paar Zeilen Text, vielleicht ein kleines Vorschaubild. Ob die Überschrift umbricht, ob der Button richtig sitzt, sieht man erst im Frontend. Also speichern, Tab wechseln, neu laden, zurück ins Backend, korrigieren.

Look rendert Inhaltselemente im Seitenmodul mit den Templates, dem CSS und den Bildern der Website. Redakteure sehen im Backend, was Besucher sehen.

Die Screenshots stammen aus einem TYPO3 14 mit Camino, dem Standard-Theme von TYPO3 v14, und seinen Demo-Inhalten. Die Vorschauen kommen aus Look Camino, einer zweiten Extension, die Look für alle Camino-Elemente konfiguriert. Links jeweils die Vorschau, die Camino mitbringt, rechts dasselbe Element mit Look.

Camino-Vorschau des Hero-Elements im Seitenmodul: Überschrift und Untertitel als fetter Text, darunter fünf kleine Bildausschnitte für die Crop-Varianten und eine Zeile mit dem Link-Ziel — Camino · Hero
Das Hero-Element der Startseite. Camino zeigt die Crop-Varianten des Bildes als Thumbnails.

Look-Vorschau desselben Hero-Elements: Überschrift, Untertitel und Button auf heller Fläche, rechts das Foto der Jakobsweg-Kachel, so wie das Frontend es zeigt — Camino · Hero
Das Hero-Element der Startseite. Camino zeigt die Crop-Varianten des Bildes als Thumbnails.

Für Redakteure

Layout-Varianten, Abstände, Bildzuschnitte und Buttons erscheinen wie im Frontend, verkleinert, damit die Seite im Backend übersichtlich bleibt. Spalten, Kopfzeilen und die Schaltflächen zum Bearbeiten bleiben unverändert, nur der Inhalt der Elemente ist die Website.

Das TYPO3-Seitenmodul einer Camino-Seite mit Caminos eigenen Vorschauen: Hero mit Crop-Thumbnails, Textelement als Fließtext, Text mit Bild als Textblock mit kleinem Kartenbild, rechts die Seitenspalte mit Autor und Textteaser als Text — Camino · Seitenmodul
Die Seite “Camino Route Comparison” im Seitenmodul, links wie Camino sie zeigt, rechts mit Look.

Dasselbe Seitenmodul mit Look: Hero mit Foto und Überschrift, Textelement im Frontend-Layout, Text mit Bild mit Aufzählung und Landkarte, rechts die Seitenspalte mit Autorenkarte und farbigem Textteaser — Camino · Seitenmodul
Die Seite “Camino Route Comparison” im Seitenmodul, links wie Camino sie zeigt, rechts mit Look.

Camino-Vorschau eines Text-Media-Teaser-Grids: Überschrift, Einleitungstext, Link-Zeile und fünf Teaser als schlichte Textblöcke in drei Spalten — Camino · Teaser-Grid
Fünf Teaser auf dunklem Abschnitt. In der Camino-Vorschau bleibt davon eine Textliste.

Look-Vorschau desselben Teaser-Grids: dunkelbrauner Abschnitt mit Serifen-Überschrift, Einleitung, Button und fünf hellen Karten mit je einem More-Button — Camino · Teaser-Grid
Fünf Teaser auf dunklem Abschnitt. In der Camino-Vorschau bleibt davon eine Textliste.

Camino-Vorschau eines Text-mit-Bild-Elements: Überschrift, ein langer Absatz ohne Listenformatierung und darunter ein kleines Thumbnail einer Landkarte — Camino · Text mit Bild
Aufzählung, Absätze und Bildgröße sind in der Zusammenfassung nicht zu erkennen.

Look-Vorschau desselben Elements: Serifen-Überschrift, Aufzählung mit Distanz, Schwierigkeit und Zielgruppe, zwei Absätze und darunter die Landkarte des Camino Francés in voller Breite — Camino · Text mit Bild
Aufzählung, Absätze und Bildgröße sind in der Zusammenfassung nicht zu erkennen.

Camino-Vorschau eines Textmedia-Teasers in der schmalen Seitenspalte: Überschrift, Unterzeile, Fließtext und darunter ein kleines Hochformat-Thumbnail einer Hügellandschaft — Camino · Teaser, Seitenspalte
Ein Teaser in der Seitenspalte, in der Vorschau auf 340 Pixel Höhe begrenzt.

Look-Vorschau desselben Teasers: das Landschaftsfoto in voller Kartenbreite, darunter beginnt die Serifen-Überschrift und verschwindet im Fade-out, weil die Vorschau in der Höhe begrenzt ist — Camino · Teaser, Seitenspalte
Ein Teaser in der Seitenspalte, in der Vorschau auf 340 Pixel Höhe begrenzt.

Lange Elemente lassen sich in der Höhe begrenzen, die Vorschau blendet dann nach unten aus. Skalierung und maximale Höhe gelten für die ganze Site, einzelne Templates können abweichen.

Optional zeigt die Vorschau beim Hover ein Bearbeiten-Icon. Ein Klick öffnet das Element, ab TYPO3 14.3 im kontextuellen Edit-Panel, davor im Formular. Nutzer ohne Bearbeitungsrecht sehen das Icon nicht.

Look-Vorschau eines Text-mit-Bild-Elements mit Landkarte, über der Mitte ein rundes weißes Bearbeiten-Icon, das beim Hover erscheint — Look · Edit-Overlay
Das Edit-Overlay beim Hover.

Für Integratoren

Bessere Vorschauen bedeuten bisher einen zweiten Satz Templates, der das Frontend nachbaut. Der driftet weg, sobald jemand das Design ändert und die Preview vergisst. Look benutzt die Frontend-Templates selbst.

Look ist ein Fluid-ViewHelper. Er nimmt das Frontend-Markup eines Elements, verpackt es in ein HTML-Dokument mit den Stylesheets und Skripten der Site und zeigt es in einem isolierten Frame. Mit Content Blocks steht er in der backend-preview.html des Blocks:

<html data-namespace-typo3-fluid="true"
      xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:look="http://typo3.org/ns/Flowd/Typo3Look/ViewHelper"
      xmlns:my="http://typo3.org/ns/Vendor/MySite/Components/ComponentCollection">
<f:layout name="Preview" />
<f:section name="Content">
    <look:backend.contentPreview
        bodyClass="application"
        css="{0: 'EXT:my_site/Resources/Public/Build/main.css'}"
        js="{0: 'EXT:my_site/Resources/Public/Build/main.js'}">
        <main class="page-content">
            <my:element.textmedia record="{data}" />
        </main>
    </look:backend.contentPreview>
</f:section>
</html>

Der ViewHelper umschließt dieselbe Komponente, die das Frontend rendert. Das Wrapper-Markup entspricht dem der Website, damit die CSS-Selektoren greifen.

Assets, die eine Komponente per f:asset.css oder f:asset.script mitbringt, landen im Frame, nicht in der Backend-Seite. Der Frame meldet seine Höhe an das Seitenmodul.

Klassische Inhaltselemente wie die von Camino nutzen denselben ViewHelper in dem Template, das über mod.web_layout.tt_content.preview.<CType> registriert ist. Statt Markup bekommt Look den Datensatz und rendert ihn mit dem Frontend-TypoScript der Seite. Welche Templates, Partials und DataProcessoren gelten, entscheidet das TypoScript der Site, nicht eine Kopie davon.

Das Rendering läuft in einem eigenen Request. Das Seitenmodul gibt nur eine signierte Beschreibung des Elements aus, der Frame holt sich den Inhalt mit einem kurzlebigen Token. Der PHP-Code der Site läuft nie im Seitenmodul selbst, ein Fehler in einem Template trifft genau einen Frame.

Look Camino

Look Camino macht genau das für Camino. Die Extension besteht nur aus Konfiguration: ein Template für alle Elementtypen, ein Page-TSconfig, das die Camino-CTypes darauf leitet, und ein Site-Set.

<look:backend.contentPreview
    record="{record}"
    bodyClass="{look:site.setting(pageUid: record.pid, name: 'camino.colorScheme')}"
    css="{0: 'EXT:theme_camino/Resources/Public/Css/main.css'}"
    js="{0: 'EXT:theme_camino/Resources/Public/JavaScript/main.js'}" />

Das komplette Preview-Template von Look Camino. Der Datensatz geht an Look, Caminos main.css in den Frame, das Farbschema aus den Site-Einstellungen auf den Body.

Wer Camino einsetzt, installiert die Extension, ergänzt das Site-Set und hat die Vorschauen oben ohne eigene Templates. Wechselt das Farbschema in den Site-Einstellungen, wechselt die Vorschau mit.

Hero-Element in der Look-Vorschau im Farbschema Caramel Cream: helle Fläche, dunkelbrauner Text, orangebrauner Button — Camino · Farbschema
Dasselbe Element nach dem Wechsel der Site-Einstellung `camino.colorScheme`.

Dasselbe Hero-Element im Farbschema Forest Mist: graue Fläche, grüner Button — Camino · Farbschema
Dasselbe Element nach dem Wechsel der Site-Einstellung `camino.colorScheme`.

Sicherheit

Redaktionelle Inhalte sind aus Sicht des Backends nicht vertrauenswürdig. Ein Skript aus einem schlecht konfigurierten RTE-Feld darf nicht in der Backend-Session laufen. Look behandelt jede Vorschau als fremden Inhalt.

Sie läuft in einem <iframe> mit sandbox-Attribut und opaquer Origin, ohne Zugriff auf Backend-Dokument, Session, Cookies oder Storage. Keine Navigation, keine Formulare, keine Dialoge, keine Klicks. Eine Content Security Policy erlaubt nur Skripte mit einer Nonce von Look. Ein Skript im Inhalt hat keine und wird vom Browser verweigert. Videos, Audio und eingebettete Player sind standardmäßig blockiert.

Drei Feature-Flags, standardmäßig aus, erweitern die Rechte der Vorschau:

$GLOBALS['TYPO3_CONF_VARS']['SYS']['features']['look.contentPreview.allowSiteScripts'] = true;
$GLOBALS['TYPO3_CONF_VARS']['SYS']['features']['look.contentPreview.allowMedia'] = true;
$GLOBALS['TYPO3_CONF_VARS']['SYS']['features']['look.contentPreview.editOverlay'] = true;

Site-JavaScript im Frame ausführen, Medien und Player laden, Bearbeiten-Overlay einblenden.

Die Flags werden pro Request ausgewertet, nach einer Änderung reicht ein Neuladen des Seitenmoduls.

Bekannte Stolpersteine

Der Frame hat eine eigene Origin, Anfragen an die eigene Domain sind aus seiner Sicht Cross-Origin. Webfonts aus dem Frontend-Build brauchen deshalb einen Access-Control-Allow-Origin-Header. Assets von anderen Hosts, etwa Fonts oder Bibliotheken von einem CDN, blockiert die Backend-CSP, bis sie in der Site-Extension über Configuration/ContentSecurityPolicies.php erlaubt sind.

Weitere Fälle stehen in der Dokumentation unter “Known problems”, darunter doppelte Vorschauen bei Content Blocks.

Installation

Look läuft auf TYPO3 13.4 LTS und 14.3+, mit PHP 8.2 bis 8.5.

composer require flowd/typo3-look
vendor/bin/typo3 extension:setup

Danach den ViewHelper um die Frontend-Ausgabe der Inhaltselemente legen.

Camino-Sites installieren stattdessen Look Camino, Look kommt als Abhängigkeit mit. Danach unter Sites > Setup das Site-Set “Look previews for Camino” eintragen.

composer require flowd/typo3-look-camino
vendor/bin/typo3 extension:setup

Ohne Composer: look und look_camino im TER.

Beide Extensions stehen unter GPL-2.0-or-later. Code und Issues auf GitHub (typo3-look, typo3-look-camino), Dokumentation auf docs.typo3.org (Look, Look Camino).