Überschriften-Klasse per Twig ergänzen

Wenn du regelmäßig Layouts in Contao umsetzt, bist du mit großer Wahrscheinlichkeit schon über diese Schwäche gestolpert: Wenn du nicht gerade ein Überschriften-Element verwendest, fehlt der Überschrift eine Klasse, um sie einfach und unabhängig von der Hierarchie gestalten zu können.

Als Theme-Entwickler:in kannst du eine Anweisung für Überschriften deshalb nicht einfach per Klasse festlegen, sondern musst jede mögliche Überschrift berücksichtigen, z. B. so:

h1, h2, h3, h4, h5, h6 {
  color: var(--color-brand);
}

Daran hat auch Contao 5 zunächst nichts geändert. Aber dank der Twig-Template-Struktur für Inhaltselemente kannst du die Klasse nun einfach ergänzen.

Das Snippet

Lege ein neues Template component/_headline.html.twig im Templates-Ordner an (in einem Theme-Ordner funktioniert es nicht) — mit diesem Inhalt:

{% block headline_attributes %}
  {% set headline_attributes = attrs()
    .addClass('headline')
    .mergeWith(headline.attributes|default)
  %}
  {{ headline_attributes }}
{% endblock %}

Nachdem du den Cache geleert hast, sollten deine Überschriften die zusätzliche Klasse headline haben.

Einschränkung

Das funktioniert nur für Inhaltselemente — Frontend-Module, die noch die alten PHP-Templates nutzen, bleiben außen vor.

Vielen Dank an Benny Born, der das Problem ebenfalls hatte und die Lösung im Contao Slack gepostet hat.

Mehr zu Überschriften in Contao: Neutrale Überschriften-Option per DCA ergänzen und Dachzeilen semantisch korrekt umsetzen.