HTML Tags in Contao Navigation und Überschrift

Um in älteren Contao Versionen HTML Tags in Überschriften und Navigation zu ermöglichen, ist ein Eingriff in die dcaconfig.php notwendig. In den aktuellen Contao Versionen genügt die Modifizierung des Templates.

HTML Tags in Navigation und Überschriften von Contao erlauben

Nicht oft, aber ab und an kommt es vor, dass in Website-Navigation ein Zeichen oder Wort in italic oder bold dargestellt werden soll.
Hin und wieder wird auch das Hochstellen von Zeichen oder Wörtern notwendig. Schon bei einer Quadratmeter Angabe wäre es wünschenswert das Quadratzeichen an seinen Platz zu rücken.
Damit diese Formatierung auch im Navigationselement dargestellt wird, wäre es notwendig, in den Seitentitel der Contao Website einfache HTML Tags einzugeben. Für das Quadratzeichen wäre z.B. der HTML Tag <sup>2</sup> notwendig. In älteren Versionen entfernt Contao jedoch aus Sicherheitsgründen alle HTML Tags aus den Seitentiteln direkt nach dem Speichern des Elements.
Ein Verhalten, das sich aber relativ einfach ändern lässt.

Dazu benötigen wir ein FTP Programm, da wir in die Systemkonfiguration von Contao eingreifen müssen. Via FTP öffnen wir die Datei dcaconfig.php, zu finden ist diese im Verzeichnis: \system\config\.

In die Datei kopieren wir folgende Zeilen:

/* HTML in der Navigation und in Seitentitel */
$GLOBALS['TL_DCA']['tl_page']['fields']['title']['eval']['allowHtml'] = true;  
$GLOBALS['TL_DCA']['tl_page']['fields']['title']['eval']['preserveTags'] = true;

In den aktuellen Versionen von Contao 3 ist das Eingreifen in die dcaconfig.php für die Navigation bzw. die Seitentitel nicht mehr notwendig.Hier lässt Contao  HTML Tags in den Eingabefeldern stehen, ersetzt allerdings die Tagidentifier "<" ">" gehen die entsprechenden HTML Entitys "&lt;" und "&gt;".

Leider ist uns kein Befehl bekannt, mit dem wir dieses Verhalten global zurücksetzen könnten. Wahrscheinlich wäre das auch nicht sinnvoll und würde zu unvorhersehbaren Effekten innerhalb von Contao führen. Eine Möglichkeit wäre jedoch, die HTML Entitys direkt im Template zurück zu übersetzen.
Dazu gibt es den PHP Befehl: "html_entity_decode".
Allerdings sollten wir an dieser Stelle vorsichtig sein, da dieser Befehl alle HTML Entitiys zurückverwandelt, also auch solche, die unter Umständen gewünscht sind.

Für unsere Navigationselemente sollte dies aber in der Regel kein Problem darstellen. Nach Eingabe des gewünschten HTML Tags im Seitentitel, müssen wir nur noch das Navigationstemplate modifizieren - wie in den folgenden Zeilen Code dargestellt. Ggf. genügt es dabei auch, die einzelnen Wörter mit einem String Replace str_replace("&lt;","<";$item['link'])zu korrigieren.

Modifiziertes nav_default Template:

/*------------------------------------*/
nav_default.html5
/*------------------------------------*/
<ul class="<?= $this->level ?>" role="<?= ($this->level == 'level_1') ? 'menubar' : 'menu' ?>">
  <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
      <li class="<?= $item['class'] ?>"><span class="<?= $item['class'] ?>" role="menuitem"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?= html_entity_decode($item['link']) ?></span><?= $item['subitems'] ?></li>
    <?php else: ?>
      <li<?php if ($item['class']): ?> class="<?= $item['class'] ?>"<?php endif; ?>><a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']): ?> class="<?= $item['class'] ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?= $item['accesskey'] ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?= $item['tabindex'] ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?= $item['target'] ?> role="menuitem"<?php if (!empty($item['subitems'])): ?> aria-haspopup="true"<?php endif; ?>><?= html_entity_decode($item['link']) ?></a><?= $item['subitems'] ?></li>
    <?php endif; ?>
  <?php endforeach; ?>
</ul>

HTML-Tags in Contao Überschriften

Möchten wir HTML Tags in Überschriften verwenden, ist die Vorgehensweise die gleiche wie für die Navigation oben beschrieben. In älteren Contao Versionen wird die dcaconfig.php angepasst:

/* HTML in Überschriften */
$GLOBALS['TL_DCA']['tl_content']['fields']['headline']['eval']['allowHtml'] = true;
 
/* HTML in News Überschriften */
$GLOBALS['TL_DCA']['tl_news']['fields']['headline']['eval']['preserveTags'] = true;

Für Contao ab Version 3 müssen die entsprechenden Templates angepasst werden.

Wir haben die vorgeschlagenen Lösungen erfolgreich getestet und diese sind, wenn die modifiziertem Templates im Templateverzeichnis überschrieben werden, auch updatesicher. Ggf. gibt es für die aktuellen Contao Versionen elegantere Lösungen, ohne das in die Templates eingegriffen werden muss. Uns ist derzeit allerdings keine bekannt -  wer eine kennt, möge sie uns gerne mitteilen.

Zeilenumbruch in Überschriften

Viel einfacher ist es hingegen, wenn in einer Überschrift oder auch in einem Seitentitel ein Zeilenumbruch erzwungen werden soll.

Dazu kennt Contao den Insert-Tag "br" in doppelten geschweiften Klammern (siehe Bild). Diesen müssen wir einfach in unser Eingabefeld an der gewünschten Stelle einsetzen. Zum Beispiel:

Zeilenumbruch in Contao Headline mit insert Tag erzwingen

 

Das Ergebnis sieht dann so aus:

sehr lange
Überschrift mit erzwungenem Zeilenumbruch

Im allgemeinen sei aber vor harten Umbrüchen gewarnt. Gerade bei einem modernen Layout, dass sich flexibel (responsiv) an die gegebene Monitorgröße anpasst, können dabei unschöne Effekte auftreten.

zur Blogübersicht

Online Website Check

Einzelne Webseiten in wenigen Sekunden auf Fehler überprüfen, Optimierungspotenziale herausfinden und direkt verbessern. Kostenlos und anonym mit unserem Website Check Tools.

Hilfe & Support

Sie haben eine Contao Website und benötigen professionelle Unterstützung für Ihr Projekt im Bereich Webdesign, Programmierung, Software oder Online Marketing? Nehmen Sie Kontakt zu uns auf, wir freuen uns auf Sie.  

Cookie- & Analyse Einstellungen

Voreingestellt sind ausschließlich zulässige Cookies, für die keine Einwilligung benötigt wird. Analyse und Tracking, sowie weiteren funktionellen Cookies, können Sie unter "Mehr" durch Anwählen von "Ja" zustimmen.
Weitere Infos zu Cookies und Ihrem Datenschutz stellen wir Ihnen in der Datenschutzerklärung vor.

Verweigern
Akzeptieren
Mehr