Zur Startseite
Tag 13 - Joomla Overrides

Tag 13 - Joomla Overrides

Template Overrides sind eine großartige Möglichkeit, Funktionen, Layout oder Design von Komponenten, Modulen und Plugins individuell anzupassen, ohne den Core-Code zu ändern. Somit bleiben die Änderungen bestehen, auch wenn Updates von Joomla installiert werden.

Schauen wir uns das an einem einfachen, praktischen Beispiel an.

Joomla bietet von Haus aus (noch) keine Möglichkeit, sog. OpenGraph Metadaten [Erklärung: Was ist OpenGraph? https://ogp.me/] einzubinden. Diese werden von sozialen Netzwerken wie z. B. Facebook verwendet, um das kleine Vorschaubild und den Teasertext zu generieren, die dann beim Teilen angezeigt werden.

Bild 1: Teilen von joomla.org auf Facebook. Bild und Titel kommen aus den OG-Metadaten

Wir versuchen heute unsere Beiträge, um die wichtigsten Metadaten zu ergänzen. Das sind:

  • og:title - Die Überschrift generieren wir aus dem Beitragstitel
  • og:image - Für das Vorschaubild nehmen wir das Einleitungsbild
  • og:description - Ein Teasertext, den wir aus der Metabeschreibung des Beitrags erstellen
  • og:url - Die URL des Beitrags

Ja, es gibt für Open Graph viele tolle Erweiterungen in der Joomla Extensions Directory, aber vielleicht reicht uns etwas Einfaches? Außerdem wollen wir ja etwas lernen!

Was soll ich überhaupt “overriden”?

Um herauszufinden, welche Datei wir overriden wollen, müssen wir zuerst wissen, welche View für unsere Darstellung zuständig ist. Dazu können wir unter Konfiguration > Site kurz die Suchmaschinenfreundlichen URLs deaktivieren und zu unserem Beitrag im Frontend navigieren.

Bild 2: SEF-URL deaktivieren

Dann sollte die URL in unserem Browser in etwa so aussehen:

https://j5.test/index.php?option=com_content&view=article&id=3:welcome-to-your-blog&catid=8&Itemid=102

Die für uns interessante Info lautet: für die Darstellung des Beitrags ist die Komponente com_content zuständig und die verwendete View heißt article

Mit diesem Wissen gewappnet können wir die SEF-URLs wieder einschalten und unsere Overrides erstellen.

Erstellen von Overrides

Zunächst Navigieren wir im Adminbereich zu System > Site Templates und klicken unser Template an. In unserem Demobeispiel arbeite ich mit dem Standard-Template Cassiopeia.

Wir wählen den Reiter Overrides erstellen und suchen unter Komponenten com_content und klicken darunter article an
 

Bild 3: Override für die article-view erstellen

Wir können jetzt zurück zum Reiter Editor gehen. 

Alle Overrides werden im Unterordner “html” gespeichert. Darunter wurden noch weitere Ordner für uns erstellt: com_content und darin article mit den zwei Dateien default.php und default_links.php

Bild 4: Dateistruktur Overrides

Code Bearbeiten

Wir öffnen die Datei default.php im Joomla-Editor, indem wir sie anklicken. 
Am Ende des php-Codeblocks (Zeile 37) setzen wir unseren Code ein:

// Bilder für OG Data Vorbereiten
$images  = json_decode($this->item->images);

// Basis-URL des Beitrags generieren
$url = Route::_(ContentHelperRoute::getArticleRoute($this->item->id, $this->item->catid));
// Volle URL erstellen (inkl. Domain)
$url = Uri::root() . ltrim($url, '/');

// Dokument laden
$doc = Factory::getDocument();

// Metatags setzen
$doc->setMetaData('og:image', JUri::root() . $images->image_intro , 'property');
$doc->setMetaData('og:title', $this->item->title, 'property');
$doc->setMetaData('og:description', $this->item->metadesc, 'property');
$doc->setMetaData('og:url', $url, 'property');

Wir speichern die Datei und laden die Seite im Frontend neu. Falls die Änderungen nicht sofort sichtbar sind, müssen wir eventuell unter System > Wartung den Cache leeren.

Mit einer Browsererweiterung wie z.B. OGraph Previewer können wir schnell testen, ob alles geklappt hat. (Online auch testbar unter: https://opengraph.dev)

Bild 5: Vorschau der OG-Metadaten in einer Browsererweiterung

Aufräumen

Wenn man mit dem Erstellen von Overrides fertig ist, sollte man die Dateien löschen, die man nicht braucht. So vermeidet man nicht nur unnötigen Dateimüll, sondern auch die mühselige Fehlersuche in der Zukunft. 

Beim Erstellen des Overrides hat uns Joomla zwei Dateien angelegt: default.php und default_links.php. Die zweite davon haben wir nicht bearbeitet, deswegen löschen wir sie am besten gleich. Wenn man sich nicht sicher ist, ob man eine Override-Datei bearbeitet hat oder nicht, hilft uns der Joomla-Editor mit der praktischen Vergleichsfunktion. Aktiviert man den Switch Änderungen anzeigen kann man sofort sehen, ob die Override-Datei und die Core-Datei gleich sind. Ist das der Fall, kann man die Override-Datei ohne Bedenken löschen. 

Bild 6: Änderungen zwischen Override und Core-Datei anzeigen

Wer mehr wissen will

Overrides sind also eine super einfache Möglichkeit, Joomla und Erweiterungen an die eigenen Bedürfnisse anzupassen. Beim Reiter Overrides Erstellen haben wir gesehen, dass man nicht nur Komponenten wie com_content, com_contact oder com_finder anpassen kann, sondern auch die Ausgabe der Module wie z.B. mod_breadcrumbs oder mod_articles und auch die Ausgabe mancher Plugins und spezieller Joomla-Layouts.
Auch Views von Drittanbieter-Erweiterungen lassen sich oft so anpassen.

Mehr zum Thema Overrides gibt es natürlich in der offiziellen Doku:
https://docs.joomla.org/J4.x:Template_Overrides

Eine Sammlung von Ideen für Overrides zum Inspirieren findet Ihr auf der Website von Daniel Dubois: https://web-eau.net/en/development/joomla-overrides

 

 

 

 

 

 

Mastodon