Überschriften in Contao: Überschriften um eine Klasse erweitern

Moin!

Vor einiger Zeit habe ich eine kleine Serie gestartet, in der ich über Überschriften in Contao schrieb. Damals gab es noch ein Problem mit den Twig-Templates, sodass ich die Serie nicht wie gewollt abschließen konnte.

Das will ich heute nachholen. Hier kommt also der 3. und letzte Teil der Miniserie zu Überschriften in Contao:

In der heutigen Flaschenpost möchte ich dir zeigen, wie du eine – meiner Meinung nach – elementare Schwäche in Contao lösen kannst. Wenn du regelmäßig Layouts in Contao umsetzt, dann bist du über diese Schwäche mit großer Wahrscheinlichkeit schon gestolpert:

Wenn du nicht gerade ein Überschriften-Element verwendest, dann fehlt der Überschrift eine Klasse, um sie einfach und unabhängig von der Hierarchie gestalten zu können!

Ich habe mich schon häufig darüber geärgert, denn als Theme-Entwickler kann ich eine Anweisung für Überschriften nicht einfach per Klasse festlegen, sondern muss jede mögliche Überschrift berücksichtigen, z.B. so:

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

Leider hat sich das auch mit Contao 5 noch nicht geändert. Doch dank der Twig-Template-Struktur für Inhaltselemente, kannst du die Klasse nun noch einfacher ergänzen. Lege dafür einfach ein neues Template components/_headline.html.twig im Templates-Ordner (in einem Theme Ordner funktioniert es nicht) mit folgendem Inhalt an:

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

Nachdem du den Cache geleert hast, sollte deine Überschrift die zusätzliche Klasse headline haben. Leider funktioniert das im Moment nur für die Inhaltselemente, da die meisten Frontend-Module noch die alten PHP-Templates nutzen.

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

***

Erstma'
Dennis

PS: Gefällt dir Flaschenpost? Dann würdest du mir einen riesigen Gefallen tun, wenn du den Newsletter hier bewerten würdest: Newsletter bewerten.

Zurück