Templates in Contao bearbeiten und sinnvoll verwalten

Ein Überblick über das Template-System von Contao: Wie es verwendet wird, wann und wie Templates verändert werden können, was es dabei zu beachten gibt und ein paar hilfreiche Tips für die Praxis.

Template-Verwaltung in Contao Theme

Das Template-System in Contao

In Contao werden alle Inhaltselemente über ein Template ausgegeben. Das macht Contao ausgesprochen flexibel, da wir die Templates überschreiben und so an unsere Bedürfnisse anpassen können.

Templates in der Praxis

Wir können zum Beispiel verschiedene Templates für ein und das selbe Element anlegen. So ist es möglich, dass ein Textelement einmal Text in einer Box und einmal ohne Box ausgibt, ohne das wir dafür ein Extra Modul programmieren müssten. Dazu müssen wir am Element "Text" lediglich das modifizierte Template auswählen.

Template-Verwaltung

Templates werden in der Templateverwaltung von Contao im Bereich Layout verwaltet.
Möchten wir also ein neues Template anlegen, klicken wir auf "Neues Template" und wählen dann das Originaltemplate aus, dass wir überschreiben oder als Grundlage für unser eigenes Template verwenden möchten.

Template-Beispiel und Gruppierung

Als Beispiel haben wir das Template für ein Text-Element ausgewählt: "ce_text.html5". Dazu wählen wir in der Templateverwaltung "Neues Template" und geben "ce_t" ein - aus der Liste können wir nun das Template "ce_text" auswählen. Haben wir vorher Verzeichnisse angelegt - via FTP oder die Option "neuer Ordner" - können wir über das Menü "Zielverzeichnis" unsere Templates auch noch zu sinnvollen Gruppen zusammenfassen.

TIP

Die Templates finden wir via FTP als eines der Hauptverzeichnisse mit dem Namen templates. Dort können wir Unterverzeichnisse anlegen. Diese sind über Contao unterhalb des oben genannten Zielverzeichnisses auswählbar.

Templates bearbeiten

Klicken wir auf "Template erstellen" wird das Originaltemplate in das Template-Verzeichnis kopiert. Wichtig ist, dass Contao fortan dieses Template verwenden wird, solange wir unser Template nicht umbenennen. 

TIP

Wenn Änderungen an den Templates vorgenommen werden, sind diese nicht - wie z.B. in den Artikel-Elementen üblich - einfach über die Versionsverwaltung rückgängig zu machen, da es diese hier nicht gibt. Zwar kann man die Dateien mit dem Contao internen Editor bearbeiten, aber besser und schneller geht es via FTP und mit einem Texteditor. Das erspart im Zweifelsfall Arbeit und Stress.

Nach dem das Template erstellt ist, können wir dieses umbenennen. Bei der Namensgebung des Templates sollten wir den Originalnamen erhalten und nur eine Erweiterung an den Dateinamen anhängen. Aus "ce_text.html5" wird z.B. "ce_text_erweitert.html5".

Das hat den Grund, dass die Module ihre Templates anhand der ersten Buchstaben zur Auswahl stellen. Würden wir unser "ce_text_erweitert.html5" in "erweitert_ce_text.html5" umbenennen, könnten wir es in den Templateeinstellungen des Textfeldelements nicht auswählen, da dieses nur Templates anbietet, die mit "ce_" beginnen.

Nachdem wir nun ein neues Template erstellt haben, können wir dieses bearbeiten und an unsere Bedürfnisse anpassen.

TIP

Nach der Bearbeitung des Templates nicht vergessen, dieses auch am gewünschten Element auszuwählen. Ansonsten wird weiterhin das Standard-Template verwendet und von unseren Änderungen ist damit natürlich nichts zu sehen. Haben wir also das Template ce_text umbenannt und überschrieben, müssen wir nun über den Bereich Artikel zu unserem Text-Element und dort unter Templateeinstellungen das eben geänderte Template auswählen. 

Contao Update und Templates

Durch die Templates lässt sich Contao updatesicher erweitern. Zu Inkompatibilitäten kann es so gut wie nicht kommen. Im schlimmsten Fall wird von Contao Seite her ein Datenfeld nicht mehr verwendet und bleibt dann bei der Ausgabe leer.
Bei einem manuellen Update müssen Sie nur darauf achten, dass Verzeichnis "templates" nicht zu überschreiben. Das wiederrum wäre fatal.

Template Beispiel ce_text

Das Template "ce_text" ist relativ einfach aufgebaut und bietet im Grunde nicht viele Möglichkeiten für Änderungen. Dafür lässt sich an diesem Beispiel recht gut veranschaulichen, wie das Prinzip funktioniert.
Das ist das Original "ce_text" Template aus Contao 3.5.9

<?php $this->extend('block_searchable'); ?>
 
<?php $this->block('content'); ?>
 
  <?php if (!$this->addBefore): ?>
    <?= $this->text ?>
  <?php endif; ?>
 
  <?php if ($this->addImage): ?>
    <figure class="image_container<?= $this->floatClass ?>"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>
 
      <?php if ($this->href): ?>
        <a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
      <?php endif; ?>
 
      <?php $this->insert('picture_default', $this->picture); ?>
 
      <?php if ($this->href): ?>
        </a>
      <?php endif; ?>
 
      <?php if ($this->caption): ?>
        <figcaption class="caption"><?= $this->caption ?></figcaption>
      <?php endif; ?>
 
    </figure>
  <?php endif; ?>
 
  <?php if ($this->addBefore): ?>
    <?= $this->text ?>
  <?php endif; ?>
 
<?php $this->endblock(); ?>

Möchten wir beispielsweise einen zusätzlichen div mit der Klasse "beispielklasse"  um unser Text-Element legen, sähe das modifizierte Template wie folgt aus: 

<?php $this->extend('block_searchable'); ?>
 
<?php $this->block('content'); ?>
 
<div class="beispielklasse"> <?php  // Hier ist der öffnende Tag ?>
 
  <?php if (!$this->addBefore): ?>
    <?= $this->text ?>
  <?php endif; ?>
 
  <?php if ($this->addImage): ?>
    <figure class="image_container<?= $this->floatClass ?>"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>
 
      <?php if ($this->href): ?>
        <a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
      <?php endif; ?>
 
      <?php $this->insert('picture_default', $this->picture); ?>
 
      <?php if ($this->href): ?>
        </a>
      <?php endif; ?>
 
      <?php if ($this->caption): ?>
        <figcaption class="caption"><?= $this->caption ?></figcaption>
      <?php endif; ?>
 
    </figure>
  <?php endif; ?>
 
  <?php if ($this->addBefore): ?>
    <?= $this->text ?>
  <?php endif; ?>
 
</div> <?php  // Hier schließt der Tag ?>
 
<?php $this->endblock(); ?>

In diesem Beispiel umschließt der div mit "beispielklasse" das Textfeld und das gegebenenfalls hinzugefügte Bild. Haben wir allerdings auch das Feld Überschrift des Text-Elementes verwendet, wird dieses nicht vom div umschlossen. 
Das liegt daran, dass die Überschrift aus dem davor liegenden <?php $this->block('content'); ?> kommt. Legen wir unser div im Template noch davor, wird kein div ausgegeben. 

Die einfachste Möglichkeit diese Problematik zu umgehen wäre, die Überschrift ebenfalls im Textfeld des Text-Elements über den Reiter Format zu definieren und das Überschriften-Feld leer zu lassen. Dann umschließt unser div auch das gesamte Element. Andernfalls ist der Umbau des Templates doch etwas komplexer und aufwendiger.

Die häufigsten Änderungen fallen in der Praxis übrigens am Template fe_page an. Was wir dort alles Ändern und Anpassen können und wollen, beschreiben wir demnächst in einem weiteren Artikel.

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