25.07.2022 | TYPO3, Webentwicklung
TYPO3 – TCA Erweiterung für Seiten
Für ein kleines TYPO3 Projekt möchte ich spezielle CSS Klassen via Backend festlegen können. Diese sollen für einen Wrapper genutzt werden, um den Seiten ein unterschiedliches und eindeutiges Aussehen für einen bestimmten Bereich der Seite zu geben. Hierfür bietet sich eine kleine TCA Erweiterung für die Seiten an. Grundlage ist der Sitepackage Builder, den ich um meine Erweiterung ergänze.
1) ext_tables.sql erweitern
Zunächst muss ich mir klar sein, was für ein Datensatz ich speichern will. Mir genügt einfacher Text (varchar(64)). Zu diesem Zweck erweitere ich zunächst die ext_tables.sql um das Feld tx_pv_pageclass.
CREATE TABLE pages (
tx_pv_pageclass varchar (64) DEFAULT '0' NOT NULL
);
2) pages.php anlegen
Nutzt du das Bootstrap Package, findest du die Ordnerstruktur für die TCA Erweiterungen bereits vor. Diese befindet sich an dem Ort „/typo3conf/ext/pv/Configuration/TCA/Overrides/“ An dieser Stelle legst du die Datei pages.php mit folgendem Inhalt an.
2.1) Variante mit Input Feld
Diese Variante bietet die Möglichkeit eine komplett eigene CSS Klasse zu vergeben.
// Erweiterung tx_pv_pageclass
// Ergänzt ein einfaches Textfeld für eine CSS Klasse
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
'pages',
[
'tx_pv_pageclass' => [
'exclude' => 0,
'label' => 'LLL:EXT:pv/Resources/Private/Language/locallang_db.xlf:pages.tx_pv_pageclass',
// 'label' => 'CSS Klasse',
'config' => [
'type' => 'input',
'renderType' => 'input',
],
],
]
);
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
'pages',
'title',
'--linebreak--,tx_pv_pageclass',
''
);
2.2) Variante mit Select Auswahl
Diese Variante bietet die Möglichkeit eine vordefinierte Klasse aus einer Select Auswahl zu nutzen. Dieser Weg ist für Redakteure mitunter praktischer, sicherer und unanfälliger für Fehler oder XSS „Angriffe“.
// Erweiterung tx_pv_pageclass
// Ergänzt eine Select Auswahl für eine vordefinierte CSS Klasse
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
'pages',
[
'tx_pv_pageclass' => [
'exclude' => 0,
'label' => 'LLL:EXT:pv/Resources/Private/Language/locallang_db.xlf:pages.tx_pv_pageclass',
'config' => [
'type' => 'select',
'renderType' => 'selectSingle',
'items' => [
['CSS Klasse 1', 'class-1'],
['CSS Klasse 2', 'class-2'],
['CSS Klasse 3', 'class-3'],
],
'size' => 3,
],
],
]
);
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
'pages',
'title',
'--linebreak--,tx_pv_pageclass',
''
);
3) locallang_db.xlf
Die Übersetzung kannst du wie nachfolgend in der locallang_db.xlf aufnehmen. Diese befindet sich ebenfalls in deinem Extension Verzeichnis „/typo3conf/ext/pv/Resources/Private/Language/locallang_db.xlf“
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<xliff version="1.0">
<file source-language="en" datatype="plaintext" original="messages" date="2022-07-24UTC11:53:110">
<header>
<authorName>Jens</authorName>
<authorEmail>[email protected]</authorEmail>
</header>
<body>
<trans-unit id="pages.tx_pv_pageclass">
<source>CSS Klasse</source>
</trans-unit>
</body>
</file>
</xliff>
4) Einbindung via ViewHelper
Die Einbindung kannst du jetzt in deinem Template vornehmen.
<div class="wrapper <f:format.stripTags>{data.tx_pv_pageclass}</f:format.stripTags>">
Mein Inhalt...
</div>
Edit: Via Twitter wurde ich darauf aufmerksam gemacht, dass die Ausgabe im Frontend via f:format.raw sicherheitsanfällig ist. Was natürlich vollkommen richtig ist. Auf diese Weise kommt ungefiltert HTML durch. Eine Alternative kann f:format.stripTags sein. Danke @calien_666 via Twitter. Ein anderer Vorschlag war, dem Redakteur grundsätzlich nur eine Select Liste zur Auswahl anzubieten. Das Beispiel ergänze ich noch – Danke @kaystrobach.
5) Im Backend
5.1) Variante mit Input Feld
Jetzt kannst du für jede Seite eine CSS Klasse vergeben, die du dann in deinem Template via ViewHelper abrufen kannst.
5.2) Variante mit Select Auswahl
In dieser Variante wählst du eine vordefinierte CSS Klasse.
Nicht vergessen:
- FE & BE: Seitencache löschen
- BE: Analyze Database Structure (nach Erweiterung der ext_tables.sql
Link(s):
- Der Sitepackage Builder von Benjamin Kott
Aktuell für TYPO3 Version 8,9,10 und 11.
www.sitepackagebuilder.com - TYPO3 TCA Referenz
docs.typo3.org/m/typo3/reference-tca/[…]
2 Kommentare "TYPO3 – TCA Erweiterung für Seiten"
Viele Dank für Deine Artikel. Ist alles sehr gut und nachvollziehbar beschrieben.
Würde es sich nicht anbieten direkt das vorhanden Feld page.layout dafür zu nutzen? Per PageTS und als Select sollte das quasi out-of-the-box gehen. Für freie Klassen müssten man den DB field type dann ändern.
Generell finde ich den Select Ansatz stabiler. Weniger fehleranfällig und für Redakteur einfacher bedienbar.
Ja, das stimmt. Damit wäre es einfacher und schnell umzusetzen. Für CSS Klassen ist das Beispiel sicherlich etwas übertrieben. Ich stand kürzlich vor der Aufgabe verschiedene Inhalte über die Seitenkonfiguration steuerbar zu machen. Wenn man es etwas weiter fasst, kann man auf diese Weise bspw. auch seitenbezogen Partials durch die Redakteure einfügen lassen, oder via ViewHelper abfragen auslösen usw. – Vielen Dank für den Kommentar.