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.

Ihre Meinung ist uns wichtig! Bewerten Sie diesen Artikel!

Je höher die Prozentzahl, desto höher Ihre Zustimmmung: 0 = überhaupt nicht | 100% = volle Zustimmung

Ø 50% von 2 Bewertungen

50%
 
50%
 

Einen Kommentar schreiben

Latest Security News

Vorsicht vor gefälschten Mails von DHL!

Derzeit sind  Mails im Umlauf, die vorgeben von DHL zu stammen und veränderte Zustelltermine ankündigen. Die Mails sind überaus gut gemacht und kaum von originalen DHL Mails zu unterscheiden. Keinesfalls auf einen der enthaltenen Links klicken!

Hallo!

Hier schreibt das Team der Pergamon interactive GmbH über das CMS Contao, SEO, Rechtliches und eigene Projekte. Wir freuen uns über Feedback, Kommentare & Bewertungen.

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.  

Ähnliche Beiträge

Contao Upload Element

Contao Upload Element

Das Upload Element innerhalb des Contao Formulargenerators eignet sich hervorragend um Usern die Möglichkeit des Datei-Uploads zu ermöglichen. Wir zeigen, wie es in wenigen Schritten einsatzbereit ist. 

Contao auf einem Webserver installieren

Contao auf einem Webserver installieren

In diesem Beitrag dreht sich alles um die Contao Installation auf einem Webserver: Wie das Contao-ZIP-Archiv direkt auf dem Server entpackt und installiert werden kann, was zu beachten ist und welche Vorraussetzungen gegeben sein müssen. 

Contao FAQ System

Contao FAQ System

FAQs eignen sich hervorragend zur übersichtlichen Ausgabe von Antworten zu einem bestimmten Themengebiet. Contao bringt standardmäßig ein FAQ-System mit. Wir zeigen, wie das System konfiguriert und eingesetzt wird.