CSS-Klasse bei Rootseiten und Abfrage in fe_page.html5 je nach CSS-Klasse

[jenda]

Falls man auch der Rootseite eine CSS-Klasse vergeben will und diese dann im Template fe_page.html5 abfragen will und den zugehörigen Seiten eine CSS-Klasse zuweisen will, ist dieser Tutorial dafür gedacht.

1. Hinzufügen des Standardfeldes für die Rootseit(en) für Backend

Folgende Datei unter folgendem Pfad anlegen

contao/dca/tl_page.php

<?php
use Contao\CoreBundle\DataContainer\PaletteManipulator;

PaletteManipulator::create()
    ->addLegend('expert_legend', 'chmod_legend', PaletteManipulator::POSITION_AFTER)
    ->addField('cssClass', 'expert_legend', PaletteManipulator::POSITION_APPEND)
    ->applyToPalette('root', 'tl_page')
    ->applyToPalette('rootfallback', 'tl_page');

2. Abfrage für fe_page.html5 vorbereiten

Folgende Datei unter folgendem Pfad anlegen

src/EventListener/LoadPageDetailsListener.php

<?php
// src/EventListener/LoadPageDetailsListener.php
namespace App\EventListener;

use Contao\CoreBundle\DependencyInjection\Attribute\AsHook;
use Contao\PageModel;

#[AsHook('loadPageDetails')]
class LoadPageDetailsListener
{
    public function __invoke(array $parentModels, PageModel $page): void
    {
        // Add additional data from the root page to the processed page
        if (count($parentModels) > 0) {
            $rootPage = end($parentModels);
            $page->rootCssClass = $rootPage->cssClass;
        }
    }
}

3. Abfrage in fe_page.html5

folgendes in fe_page.html5 eintragen

<?php

$classes = array_filter(explode(' ', $this->class ?? ''));

if ('rootCustomClass' === $GLOBALS['objPage']?->rootCssClass) {
    $classes[] = 'frontendCustomClass';
}

$this->class = implode(' ', $classes);

?>

<?php $this->extend('fe_page') ?>

Danach muss man den Applikationscache löschen und neu aufbauen lassen.