Configure custom backend preview for content element

Extend the default preview renderer

There are two ways to provide previews for your custom content types: via page TSconfig or hook.

mod.web_layout {
  tt_content {
    preview {
      # Your CType
      example_ctype = EXT:my_extension/Resources/Private/Templates/Preview/ExampleCType.html
    }
  }
}

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem'][]
    = MyVendor\MyExtension\Backend\DrawItem::class;

Writing a PreviewRenderer

A custom preview renderer must implement the interface \TYPO3\CMS\Backend\Preview\PreviewRendererInterface which contains the following API methods:

interface PreviewRendererInterface

Fully qualified name

\TYPO3\CMS\Backend\Preview\PreviewRendererInterface

Interface PreviewRendererInterface

Contract for classes capable of rendering previews of a given record from a table. Responsible for rendering preview header, preview content and wrapping of those two values.

Responsibilities are segmented into three methods, one for each responsibility, which is done in order to allow overriding classes to change those parts individually without having to replace other parts. Rather than relying on implementations to be friendly and divide code into smaller pieces and give them (at least) protected visibility, the key methods are instead required on the interface directly.

Callers are then responsible for calling each method and combining/wrapping the output appropriately.

renderPageModulePreviewHeader ( TYPO3\\CMS\\Backend\\View\\BackendLayout\\Grid\\GridColumnItem $item)

Dedicated method for rendering preview header HTML for the page module only. Receives the the GridColumnItem that contains the record for which a preview header should be rendered and returned.

param TYPO3\\CMS\\Backend\\View\\BackendLayout\\Grid\\GridColumnItem $item

the item

returntype

string

renderPageModulePreviewContent ( TYPO3\\CMS\\Backend\\View\\BackendLayout\\Grid\\GridColumnItem $item)

Dedicated method for rendering preview body HTML for the page module only. Receives the the GridColumnItem that contains the record for which a preview should be rendered and returned.

param TYPO3\\CMS\\Backend\\View\\BackendLayout\\Grid\\GridColumnItem $item

the item

returntype

string

renderPageModulePreviewFooter ( TYPO3\\CMS\\Backend\\View\\BackendLayout\\Grid\\GridColumnItem $item)

Render a footer for the record to display in page module below the body of the item's preview.

param TYPO3\\CMS\\Backend\\View\\BackendLayout\\Grid\\GridColumnItem $item

the item

returntype

string

wrapPageModulePreview ( string $previewHeader, string $previewContent, TYPO3\\CMS\\Backend\\View\\BackendLayout\\Grid\\GridColumnItem $item)

Dedicated method for wrapping a preview header and body HTML. Receives $item, an instance of GridColumnItem holding among other things the record, which can be used to determine appropriate wrapping.

param string $previewHeader

the previewHeader

param string $previewContent

the previewContent

param TYPO3\\CMS\\Backend\\View\\BackendLayout\\Grid\\GridColumnItem $item

the item

returntype

string

Implementing these methods allows you to control the exact composition of the preview.

This means assuming your preview renderer returns <h4>Header</h4> from the header render method and <p>Body</p> from the preview content rendering method and your wrapping method does return '<div>' . $previewHeader . $previewContent . '</div>'; then the entire output becomes <div><h4>Header</h4><p>Body</p></div> when combined.

Should you wish to reuse parts of the default preview rendering and only change, for example, the method that renders the preview body content, you can extend \TYPO3\CMS\Backend\Preview\StandardContentPreviewRenderer in your custom preview renderer class - and selectively override the methods from the API displayed above.

Configuring the implementation

Individual preview renderers can be defined by using one of the following approaches:

1. Any record

   $GLOBALS['TCA'][$table]['ctrl']['previewRenderer']
       = MyVendor\MyExtension\Preview\MyPreviewRenderer::class;

   Copied!

   This specifies the preview renderer to be used for any record in $table.

2. Table has a type field/attribute

   $GLOBALS['TCA'][$table]['types'][$type]['previewRenderer']
       = MyVendor\MyExtension\Preview\MyPreviewRenderer::class;

   Copied!

   This specifies the preview renderer only for records of type $type as determined by the type field of your table.

3. Table and field have a subtype_value_field TCA setting

   If your table and field have a subtype_value_field TCA setting (like tt_content.list_type for example) and you want to register a preview renderer that applies only when that value is selected (assume, when a certain plugin type is selected and you can't match it with the "type" of the record alone):

   $GLOBALS['TCA'][$table]['types'][$type]['previewRenderer'][$subType]
       = MyVendor\MyExtension\Preview\MyPreviewRenderer::class;

   Copied!

   Where $type is, for example, list (indicating a plugin) and $subType is the value of the list_type field when the type of plugin you want to target is selected as plugin type.