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>me@provider.de</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):

geschrieben von Jens (2 Kommentare), , ,

Du kannst diese Seite via PayPal unterstützen: paypal.me/jensbh

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.


2 Kommentare "TYPO3 – TCA Erweiterung für Seiten"

Michael sagt:

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.

Jens sagt:

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.

Mit und gemacht in Kassel / Nordhessen. 2022