---
title: "Introduction"
manual: "Look previews for Camino"
version: "1.0"
permalink: "https://docs.typo3.org/permalink/flowd/typo3-look-camino:introduction@1.0"
source: "Introduction/Index.rst"
rendered: "2026-09-24T13:17:08+00:00"
---

# Introduction {#introduction}

## What does it do? {#what-it-does}

Camino ships its own previews for the page module: a text summary of the
element and, for images, thumbnails of the crop variants. Whether the headline
wraps, whether the coloured section fits the image above it, whether the button
sits right: the frontend shows that, the page module does not.

This extension replaces those summaries with the real thing. Every Camino
content type is rendered with the frontend templates, the stylesheet and the
colour scheme of the site and shown in the page module, scaled down to fit.

The extension works out of the box with Camino. It is just as much a showcase:
a complete, small example of how to wire Look into a TypoScript based theme,
with two Fluid templates and one page TSconfig file. If your site has its own
theme, copy the pattern into your site package instead of installing this
extension, see [Using the pattern in your own project](https://docs.typo3.org/permalink/flowd/typo3-look-camino:own-project@1.0).

![Camino's preview of the hero element in the page module: headline and subline as bold text, below it five small crops of the image and a line with the link target](../Images/HeroBefore.png)

![Look's preview of the same hero element: headline, subline and button on a light area, on the right the photo, as the frontend shows it](../Images/Hero.jpg)

The whole page module changes with it. The page "Camino Route Comparison" from
the Camino demo content, on the left as Camino shows it, on the right with
Look:

![The page module of a Camino page with Camino's own previews: hero with crop thumbnails, a text element as running text, text with image as a text block with a small map image, on the right the sidebar with author and text teaser as text](../Images/PageModuleBefore.png)

![The same page module with Look: hero with photo and headline, text element in the frontend layout, text with image with a list and a map, on the right the sidebar with the author card and a coloured text teaser](../Images/PageModule.jpg)

## Which elements are covered? {#covered-elements}

All content types Camino ships, and the three core types Camino styles:

-   `camino_hero`, `camino_hero_small`, `camino_hero_text_only`
-   `camino_textmedia_teaser`, `camino_textmedia_teaser_grid`,
    `camino_textteaser`
-   `camino_author`, `camino_testimonial`
-   `camino_linklist`, `camino_sociallinks`
-   `text`, `textmedia`, `textpic`

A few examples of what the previews make visible:

![Camino's preview of a textmedia teaser grid: headline, intro text, link line and five teasers as plain text blocks in three columns](../Images/TeaserGridBefore.png)

![Look's preview of the same teaser grid: dark brown section with serif headline, intro, button and five light cards, each with a more button](../Images/TeaserGrid.png)

![Camino's preview of a text with image element: headline, one long paragraph without list formatting and a small thumbnail of a map below](../Images/TextpicBefore.png)

![Look's preview of the same element: serif headline, a list with distance, difficulty and target group, two paragraphs and below them the map of the Camino Francés in full width](../Images/Textpic.jpg)

![Camino's preview of a textmedia teaser in the narrow sidebar: headline, subline, running text and a small portrait thumbnail of a hilly landscape below](../Images/TextmediaTeaserBefore.png)

![Look's preview of the same teaser: the landscape photo in full card width, below it the serif headline begins and disappears in a fade-out because the preview is limited in height](../Images/TextmediaTeaser.jpg)

## The colour scheme of the site {#colour-scheme}

Camino's colour scheme is a site setting (`camino.colorScheme`). The
previews read it and render with the scheme the site uses. Switching the scheme
switches the previews.

![Hero element in the Look preview in the colour scheme Caramel Cream: light area, dark brown text, orange brown button](../Images/Hero.jpg)

![The same hero element in the colour scheme Forest Mist: grey area, green button](../Images/HeroForestMist.jpg)

## Click to edit {#edit-overlay}

With Look's `editOverlay` feature flag enabled, an edit button appears on
hover and opens the element for editing, see the
[Look documentation](https://docs.typo3.org/p/flowd/typo3-look/main/en-us/Configuration/Index.html).

![Look preview of a text with image element with a map, above the middle a round white edit icon that appears on hover](../Images/EditOverlay.jpg)

## How does it work? {#how-it-works}

The extension is configuration only. Its site set brings the page TSconfig
that routes every Camino content type to one preview template. The template
hands the record to Look's view helper `look:backend.contentPreview`,
which renders it with the frontend TypoScript of its page in a separate,
isolated request. Camino's templates, partials and data processors apply as on
the website, including overrides from your site package, and none of that PHP
runs inside the page module. See [Configuration](https://docs.typo3.org/permalink/flowd/typo3-look-camino:configuration@1.0).