Introduction 

What does it do? 

The TYPO3 page module normally shows a content element as a plain summary: a headline, the first lines of text, maybe a thumbnail. Editors have to open the frontend to see what they actually built.

Look changes that. It renders every content element with the real frontend templates, stylesheets and images of your website and shows the result directly in the page module, scaled down to fit. What you see in the backend is what visitors get on the website.

Each preview lives in its own isolated frame. It looks like the frontend but cannot interact with the backend: no clicks, no scripts of the page content, no access to the editor's session. The frame adapts its height to the content automatically, so short and tall elements both look natural.

Who is it for? 

• Editors see the effect of every setting immediately: a different header layout, a coloured section, an image position. No more switching between backend and frontend. With the edit overlay enabled, a click on the preview opens the element for editing.
• Integrators reuse the frontend templates they already have. A preview is one Fluid tag around the existing rendering, there is no second template to keep in sync.
• Administrators get previews that are safe by default. Scripts and media of the website are switched off inside the preview until they are explicitly allowed, see Security.

How does it work? 

Look's central view helper is <look:backend.contentPreview>. You wrap it around the frontend markup of a content element. The view helper

1. renders the markup you pass it,
2. puts it into a complete HTML document together with the stylesheets and scripts of your site,
3. and shows that document in a sandboxed <iframe> in the page module.

Where the markup comes from depends on the site. With Content Blocks and Fluid Components, the backend preview of a block calls the same component as the frontend, the preferred way. Classic content types rendered through TypoScript hand the record to the view helper, which renders it with the frontend TypoScript of its page in a separate request, so the site's PHP never runs inside the page module. Both are described in Usage.

The frame reports its content height to the backend, so the page module always shows the whole element (or a fixed height with a fade-out, if you prefer). Everything else, from the design to the icons, comes from your own frontend build.

Compatibility