Source

The Source folder contains private resources. If you are familiar with the directory structure of extensions, this would be the Resources/Private folder. There is a limited set of directories and files, which you can place here.

EditorPreview.html

This file is only available for Content Elements and Page Types.

The EditorPreview.html can be added to customize the backend preview for your editors. By default, TYPO3 comes with a standard preview renderer. However, it is specialized in rendering the preview of Core Content Elements. This means only Core fields like header, subheader or bodytext are considered. Therefore, it is advised to provide an own preview for custom Content Elements. Previews for Page Types are displayed at the top of the content area and beneath the page title.

Note

In backend context, all hidden relations like Collections or file references are displayed by default. Thus, the integrator should style those hidden elements accordingly or simply not render them.

<!-- Hidden relations like Collections -->
<f:for each="{data.relations}" as="item">
    <f:if condition="{item._raw.hidden}"><!-- Style or hide --></f:if>
</f:for>

<!-- Hidden file references -->
<f:for each="{data.images}" as="file">
    <f:if condition="{file.properties.hidden}"><!-- Style or hide --></f:if>
</f:for>

Frontend.html

This is the default frontend rendering definition for Content Elements. You can access your fields by the variable {data}.

Learn more about templating.

Partials

For larger Content Elements, you can divide your Frontend.html template into smaller chunks by creating separate partials here.

Partials are included as you normally would in any Fluid template.

<f:render partial="Component.html" arguments="{_all}"/>