TopLinks: Die HTML-Ausgabe von Contao ändern

von Peter Müller

In Kapitel 9 wird ab Seite 258 das Inhaltselement "Top-Link" vorgestellt. Ein Leser fragte dazu, ob man die HTML-Ausgabe etwas anders gestalten kann. Kann man natürlich. Hier ein Beispiel ... 

Templates bestimmen, welches HTML Contao erzeugt

Zum Ändern des HTML-Codes, den Contao im Frontend erzeugt, gibt es die Templates im Backend-Modul Templates. Am Ende von Kapitel 6 wird dieses Backend-Modul vorgestellt, inklusive Beispiel (ab Seite 147). Das Template für den TopLink heißt ce_toplink.tpl. Das "ce" ist kurz für "content element".

Grafik statt Text — Die Ausgabe für den Toplink ändern

Auf little-boxes.de erscheint im Frontend eine Grafik als Toplink, der Text aus dem Inhaltselement selbst (zum Beispiel "nach oben") wird für das Attribut title des Links verwendet und erscheint im Quickinfo. Probieren Sie es aus: Beispielseite auf little-boxes.de (in neuem Fenster).

Und das geht so:

  • Um den folgenden grafischen Pfeil nach oben namens up.gif zu speichern, klicken Sie einfach mit der rechten Maustaste drauf und speichern die Grafik im Grafikordner für Ihres Themes: Nach oben 
  • Wechseln Sie in das BE-Modul Templates
  • Klicken Sie auf den Link Neues Template und erstellen Sie eine Kopie von ce_toplink.tpl.
  • Löschen Sie zwischen <a ...> und </a> den folgenden PHP-Block: 
    <?php echo $this->label; ?>.
  • Fügen Sie stattdessen ein img-Element oder einen Insert-Tag zum Einfügen von Bildern ein (siehe Buch, Seite 528). 

Jetzt erscheint auf der Webseite der Pfeil nach oben und der Text aus dem Inhaltselement wird für den Title des Links benutzt.

Falls irgendwas nicht klappen sollte, löschen Sie einfach die Kopie von ce_toplink.tpl im BE-Modul Templates. Contao nimmt dann wieder das Original.

Zurück