IO200 Doku

6 Minuten Lesezeit

Benutzerdefinierte Templates (Plugins)

Inhaltsverzeichnis

IO200 bietet bereits mehrere Templates zur Anzeige von Inhalten wie Sets, Alben, Fotos, Artikeln, Timeline und Blog. Sie können jedoch neue Templates erstellen, wenn Sie Ihre Website weiter anpassen, das Verhalten ändern oder zusätzliche Funktionalität hinzufügen möchten. Benutzerdefinierte Templates bieten volle Flexibilität, um Inhalte auf Ihrer Website so darzustellen, wie Sie es möchten. Wie wäre es z. B. mit einem angepassten Album‑Template für Panoramen, einer Liste all Ihrer Fotos, einer benutzerdefinierten Landing‑Page, einer Shopsintegration oder einem individuellen Kontaktformular?

Erstellen eines Links für ein neues Template im Website‑Menü

  1. Erstellen Sie eine neue Template‑PHP‑Datei und verschieben Sie sie in den Custom‑Ordner (z. B. /storage/custom/newtemplate.php).
  2. Melden Sie sich im CMS an und navigieren Sie zu Menü. Klicken Sie auf die Schaltfläche „Neuer Link“, wählen Sie „Expertenmodus“. Wählen Sie „Custom Template“ als Template und geben Sie den Template‑Namen ein (in diesem Fall newtemplate). Der Template‑Name des (benutzerdefinierten) Links (newtemplate) entspricht direkt der geladenen Template‑Datei (/storage/custom/newtemplate.php). Zusätzlich können Sie ein Asset (Collection, Set, Album oder Seite) angeben, welches in Ihren Template‑PHP‑Datei‑Variablen verfügbar sein wird.

Anpassen eines bestehenden Templates

Anstatt ein neues Template von Grund auf zu erstellen, möchten Sie vielleicht manchmal ein bestehendes bearbeiten. Das ist üblich für häufig genutzte Templates wie der Header, der Footer oder die Foto‑Seiten‑Templates, die in vielen anderen Templates eingebunden sind. Auch die Album‑ und Set‑Templates werden oft angepasst.

So passen Sie ein Template an:

  1. Suchen Sie das Original‑Template im Ordner /templates/.
  2. Kopieren Sie die Datei, nehmen Sie Ihre Änderungen vor und speichern Sie sie im Ordner /storage/custom/.

Hinweis: Dateien im Verzeichnis /storage/custom/ haben immer Vorrang vor den Originalen und werden bei Updates **nicht** überschrieben. Beachten Sie, dass diese benutzerdefinierten Template‑Dateien keine zukünftigen Updates erhalten. Es ist eine gute Praxis, alle Änderungen in diesen Dateien zu kommentieren oder zu kennzeichnen. Nach Updates sollten Sie prüfen, ob es (neue) Unterschiede zur aktualisierten Original‑Template‑Datei gibt.

Erstellen eines neuen Templates

Sie können:

  • Ein bestehendes Template anpassen, indem Sie die Datei kopieren, umbenennen und im Ordner /storage/custom/ speichern.
  • Von Grund auf neu beginnen, zum Beispiel mit /templates/page.php als gute Vorlage (kopieren Sie die Datei nach /storage/custom/ und benennen Sie sie um).

Sie sind frei, beliebiges HTML, JavaScript oder PHP in einem benutzerdefinierten Template zu verwenden.

Template‑Struktur

Alle Templates folgen derselben Grundstruktur:

  1. Start (Datenvorbereitung)
    • Analysieren Sie die $SITE‑Informationen, um zu entscheiden, welche Assets angezeigt werden sollen.
    • Holen Sie die relevanten Daten nach Bedarf.
    • Beispiel: Das Album‑Template prüft $SITE['subpath'], um ein Album mit passendem „Slug“ zu finden, und lädt dann das entsprechende Album mit Funktionen des $CmsPhotosService.
  2. Template (Ausgabe‑Rendering)
    • Generieren Sie die HTML‑Ausgabe basierend auf den in Schritt 1 gesammelten Daten.
    • Verwenden Sie den Output Renderer ($OR), um wiederverwendbare HTML‑Abschnitte einzubinden und Code‑Wiederholungen zu vermeiden.
    • Beispiel: Das Album‑Template ruft $OR‑>AlbumGallery(...) auf, um das HTML für die Fotogalerie zu erzeugen.

Verfügbare Daten und Klassen in Templates

Folgende Daten und Klassen stehen in jeder Template‑Datei zur Verfügung:

  • Seiten‑Informationen: $SITE (enthält den Kontext für den aktuellen Link/Ressource)
    Asset‑Referenzen (falls beim Erstellen eines Links im Admin‑Panel definiert):
    • $SITE['reference_type']
    • $SITE['reference_id']
    • $SITE['subpath']
    • …
  • Website‑Einstellungen: $SETTINGS
  • Sprachvariablen: $LANG
  • Klassen: Eine Übersicht über die verfügbaren Klassen finden Sie unter Erweiterung von Klassen und Überschreiben von Methoden.

Caching‑Überlegungen

Bitte beachten Sie, dass IO200 Caching verwendet, um die Leistung der Website zu verbessern. Daher müssen Sie den Website‑Cache im Admin‑Panel zurücksetzen, nachdem Sie ein (benutzerdefiniertes) Template angepasst haben. Der Website‑Cache wird automatisch zurückgesetzt, wenn Sie ein Asset (z. B. ein Foto) bearbeiten oder die Website‑Einstellungen aktualisieren (Klick auf „Aktualisieren“ unter Einstellungen ). Sie können das Seiten‑Caching für ein beliebiges Template verhindern, indem Sie innerhalb des Templates $SETTINGS['SITECACHING'] = false; einfügen (z. B. wenn Sie dynamische/zufällige Inhalte anzeigen möchten).

Erweiterung von Klassen und Überschreiben von Methoden

Folgende Klassen stehen in jedem Template zur Verfügung:

  • Output Renderer: $OR
  • Editor Elements Renderer: $EditorElementsRenderer
  • Path Access: $CmsAccessService
  • Funktionen für Fotos und Kollektionen: $CmsPhotosService
  • Funktionen für Artikel: $CmsArticlesService
  • Funktionen für Seiten: $CmsPagesService
  • Funktionen für Links: $CmsLinksService
  • Datenbankverbindung: $CmsDatabaseConnection

Sie können diese Klassen erweitern und Methoden überschreiben, indem Sie eine benutzerdefinierte Klasse im Verzeichnis /storage/custom/ erstellen. Die Klasse muss mit „Custom“ umbenannt werden (z. B. CustomOutputRenderer für OutputRenderer) und wie folgt gespeichert werden: /storage/custom/CustomOutputRenderer.class.php. Die folgende benutzerdefinierte Klasse erweitert OutputRenderer und überschreibt die Funktion Date():


<?php
class CustomOutputRenderer extends OutputRenderer {
   public function Date($date_timestamp, $options = []) {
     $format = SystemUtils::GetOptionValue($options, 'format', $this‑>_SETTINGS['DATEFORMAT']);
     $parent_value = parent::Date($date_timestamp, $options);
     return '(' . $parent_value . ')';
   }
}
?>

Verwendung von JavaScript‑Hooks

Sie können das Verhalten Ihrer Website anpassen, indem Sie Funktionen an verschiedene vom System bereitgestellte JavaScript‑Hooks anhängen. Diese Hooks werden bei bestimmten Ereignissen während der Nutzerinteraktion ausgelöst. Folgende Hooks sind verfügbar:


MyApp.hooks.onChangedBasket = () => { } // nach Änderung des Warenkorbs
MyApp.hooks.onPhotoDownload = () => { } // ausgelöst nach Foto‑Download (Lightbox oder Fotoseite)
MyApp.hooks.onFinishedAlbumDownload = () => { } // nach Abschluss aller Album‑Downloads
MyApp.hooks.onInitializedAlbumUpload = () => { } // nach Initialisierung des Modal/Formulars
MyApp.hooks.onValidateAlbumUpload = () => { } // nach Klick auf Upload‑Button (Rückgabe false stoppt Aktion)
MyApp.hooks.onFinishedAlbumUpload = () => { } // nach Abschluss aller Uploads

Beispiel: Reaktion auf abgeschlossene Album‑Downloads

Um nach dem Download von Fotos aus einem Album eine Aktion auszuführen (z. B. eine E‑Mail zu senden), fügen Sie folgendes Skript unter Einstellungen » Code Injection ein:


<script>
   MyApp.hooks.onFinishedAlbumDownload = function(data) {
     // eine E‑Mail senden oder andere Aktionen durchführen
     console.log(data) // photo_ids, photo_urls
   }
</script>

Hinzufügen von Sprachvariablen

Sie können eigene Sprachvariablen definieren, die in allen Templates verfügbar sind:

  1. Erstellen Sie eine neue PHP‑Datei unter /storage/custom/lang.php.
  2. Fügen Sie eine oder mehrere Sprachvariablen hinzu, z. B.: $LANG['new_variable'] = „foo bar“;.

Die neuen Variablen erscheinen automatisch unter Einstellungen » Lokalisierung, wo Sie den Text für jede verfügbare Sprache bearbeiten können. Schlüsselwörter mit demselben Präfix (dem Text vor dem ersten „_“) werden im Admin‑Panel gruppiert.

Letzte Änderung am 02.11.2025