Eigenen PreviewRenderer für CType shortcut im TYPO3 backend

Egal ob man die Extension gridelements gut oder nicht so gut findet. Diese bringt eine Menge nützlicher Funktionen mit. So auch eine einfache Vorschaufunktion für den Seiteninhalt Shortcut bzw. Referenz. Wenn man dann als Redakteur später wieder kommt, erkennt man bereits in der Übersicht des Pagemoduls, welche referenzierten Inhalte sich hinter diesem einen Content Element verbergen.

Setzt man jedoch beispielsweise lieber auf die Erweiterung container oder benötigt vielleicht überhaupt keine Grid-Lösung, kommt man in der Regel nicht in den Genuss dieser hilfreichen Vorschaufunktion. Wir zeigen euch, wie ihr diese dennoch mit ein paar Zeilen Code über euer Sitepackage an den Start bekommt.

Alle Codebeispiele basieren auf TYPO3 11 und gehen davon aus, dass ihr wisst, was ein Sitepackage (in unserem Fall "in2template") ist, und dieses auch erweitern könnt.

Zuerst definieren wir für den Seiteninhalt vom Typ Shortcut einen anderen PreviewRenderer. Das geht über TCA sehr einfach in der EXT:in2template/Configuration/TCA/Overrides/tt_content.php:

<?php

// Use a different preview renderer for CType shortcut
$GLOBALS['TCA']['tt_content']['types']['shortcut']['previewRenderer']
    = \In2code\In2template\Backend\ShortcutPreviewRenderer::class;

Die eigentliche Klasse, die uns die Vorschau zusammenbaut befindet sich dann in EXT:in2template/Classes/Backend/ShortcutPreviewRenderer:

<?php
declare(strict_types=1);
namespace In2code\In2template\Backend;

use Throwable;
use TYPO3\CMS\Backend\Utility\BackendUtility;
use TYPO3\CMS\Backend\View\BackendLayout\Grid\GridColumn;
use TYPO3\CMS\Backend\View\BackendLayout\Grid\GridColumnItem;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Core\Utility\MathUtility;
use TYPO3\CMS\Fluid\View\StandaloneView;
use TYPO3\CMS\Frontend\Preview\TextmediaPreviewRenderer;
use UnexpectedValueException;

class ShortcutPreviewRenderer extends TextmediaPreviewRenderer
{
    const TABLE_NAME = 'tt_content';

    protected string $template = 'EXT:in2template/Resources/Private/Templates/PreviewRenderer/Shortcut.html';

    public function renderPageModulePreviewContent(GridColumnItem $item): string
    {
        try {
            $contentIdentifiers = $this->getContentIdentifiers($item->getRecord());
            $elements = '';
            foreach ($contentIdentifiers as $identifier) {
                $elements .= $this->getPreviewOfSingleContentElement($item, $identifier);
            }
        } catch (Throwable $exception) {
            $elements = $exception->getMessage() . ' (' . $exception->getCode() . ')';
        }
        return $elements;
    }

    protected function getPreviewOfSingleContentElement(GridColumnItem $item, $identifier): string
    {
        $record = BackendUtility::getRecord(self::TABLE_NAME, $identifier);
        $gridColumn = GeneralUtility::makeInstance(GridColumn::class, $item->getContext(), []);
        $gridColumnItem = GeneralUtility::makeInstance(GridColumnItem::class, $item->getContext(), $gridColumn, $record);
        $standaloneView = GeneralUtility::makeInstance(StandaloneView::class);
        $standaloneView->setTemplatePathAndFilename($this->template);
        $standaloneView->assignMultiple([
            'preview' => $gridColumnItem->getPreview(),
            'identifier' => $identifier,
            'data' => $record,
            'iconIdentifier' => $this->getIconIdentifier($record['CType']),
        ]);
        return $standaloneView->render();
    }

    protected function getContentIdentifiers(array $data): array
    {
        if (isset($data['records']) === false) {
            throw new UnexpectedValueException('Key records not available', 1676669367);
        }
        $identifiers = [];
        $mixedIdentifiers = explode(',', $data['records']);
        foreach ($mixedIdentifiers as $identifier) {
            $cleanedIdentifier = str_replace(self::TABLE_NAME . '_', '', $identifier);
            if (MathUtility::canBeInterpretedAsInteger($cleanedIdentifier)) {
                $identifiers[] = (int)$cleanedIdentifier;
            } else {
                throw new UnexpectedValueException($identifier . ' is not a supported identifier', 1676669672);
            }
        }
        return $identifiers;
    }

    /**
     * @param string $cType
     * @return string
     * @SuppressWarnings(PHPMD.Superglobals)
     */
    protected function getIconIdentifier(string $cType): string
    {
        $typeiconClasses = $GLOBALS['TCA'][self::TABLE_NAME]['ctrl']['typeicon_classes'];
        if (array_key_exists($cType, $typeiconClasses)) {
            return $typeiconClasses[$cType];
        }
        return 'mimetypes-x-content-text-media';
    }
}

Weil wir auch ein wenig HTML und CSS haben, bringen wir ein Fluid Template an den Start EXT:in2template/Resources/Private/Templates/PreviewRenderer/Shortcut.html:

<f:asset.css identifier="ce-preview-shortcut-container">
	.reference {
		position: relative;
		margin-left: 0;
		margin-right: 0;
	}

	.reference .t3-page-ce {
		margin: 0;
	}

	.t3-page-ce:hover .reference .t3-page-ce-header {
		border: 1px solid #ccc;
		border-bottom: 0;
		background: #eaeaea;
	}

	.t3-page-ce:hover .reference .t3-page-ce-body {
		border: 1px solid #ccc;
		border-top: 0;
		box-shadow: none;
	}

	.reference-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #427BAB;
		opacity: 0.15;
		filter: alpha(opacity=15);
	}
</f:asset.css>


<div class="t3-page-ce t3js-page-ce reference" id="element-tt_content-{identifier}">
	<div class="t3-page-ce-header row m-0 g-0">
		<div class="col t3-page-ce-header-icons-left">
			<core:icon identifier="{iconIdentifier}" size="small" />
		</div>
	</div>

	<div class="t3-page-ce-body">
		<div class="t3-page-ce-body-inner">
			<span class="exampleContent">
				{preview -> f:format.raw()}
			</span>
		</div>
	</div>

	<div class="reference-overlay"></div>
</div>

Ihr könnt das CSS im Fluid auch in eine Datei auslagern und es noch etwas verfeinern, wenn wir noch etwas vergessen haben. Die Beispielfunktion unterstützt auch nur referenzierte Tabellen vom Typ tt_content. Referenzierung auf pages, tx_news_domain_model_news oder andere müsstet ihr selbst hinzufügen.

Happy Coding!