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

Einen Kommentar schreiben

Kommentar von makcie |

Danke für den Tipp.

Beim dritten (!) Anlauf hat es mit dem letzten Insert-Tag von Seite 528 geklappt. *)

Wer nur den Text des Toplinks ändern will, gibt im Eingabeformular des Inhaltselements „Top-Link“ im Eingabefeld „Link-Text“ den gewünschten Text ein, zum Beispiel „Zum Seitenanfang“. Bleibt dieses Eingabefeld leer, erstellt Contao automatisch den Text „Nach oben“.

*)
Leider wird hier im Kommentar die richtige Schreibweise des Insert-Tags völlig entstellt wiedergegeben.

Kommentar von Peter Müller |

*)
Ein in einem Kommentar eingefügter Insert-Tag wird von Contao wahrscheinlich ausgeführt. Um das zu verhindern, einfach z. B. zwischen den beiden geschweiften Klammern eine Leerstelle lassen. 

Wenn man bei allen Top-Links denselben Text wie z. B. "Zum Seitenanfang" stehen haben will, könnte man den Text auch in das Template schreiben.

Kommentar von makcie |

Da will ich doch gleich mal den Vorschlag mit der Leerstelle zwischen den geschweiften Klammern ausprobieren.

In die Kopie des Templates ce_toplink.tpl habe ich eingefügt:
{ {image::/files/themes/cover_theme/grafiken/up.gif?width=14&height=10} }

Kommentar von makcie |

Der Trick mit den Leerstellen hat tatsächlich geholfen.
Danke!