Anleitung: Joomla Overrides

In dieser Anleitung versuchen wir die Geheimnisse rund um die Overrides in Joomla! zu lüften und in einem relativ häufig gesuchten Praxisbeispiel zu verdeutlichen.

Tutorial: Unser Praxisbeispiel für Joomla! Overrides

Bevor wir zu theoretisch werden, möchten wir all den ungeduldigen Lesern zunächst das Praxisbeispiel erklären. 

In einem Kategorieblog unserer Website werden alle neuen Beiträge in der bekannten Blog-Ansicht ausgegeben. Das heißt konkret wird angezeigt:

• Beitragstitel
• Einleitungsbild
• Einleitungstext
• Weiterlesen-Link

In den Beitragseinstellungen haben wir den Beitragstitel verlinkt, so dass wir jetzt zwei Links pro Beitrag haben, die auf einen Beitrag weiterleiten.
Allerdings kann man auf das Bild klicken, so oft man will - der Beitrag lässt sich durch den Klick auf das Bild nicht öffnen.

Das Ziel unseres Joomla Overrides ist es, eine Box um die komplette Ansicht zu legen und auch den Einleitungstext und das Bild zu verlinken, sodass der Besucher auf alles draufklicken kann, um in den Beitrag zu gelangen.

Hier gehts direkt zum Praxisbeispiel: Joomla! Template (Blog-Ansicht komplett verlinken)

Tutorial: Joomla! Override - was ist das?

Nach der wörtlichen Übersetzung ist ein Override eine "Übersteuerung". Sinngemäß überschreibt man damit eine bereits vordefinierte Regel. Eigentlich ist der Begriff der Übersteuerung nicht schlecht. Man steuert mit dem Override über einer bereits festgelegten Regelung. Das heißt, dass es für alles was man mit einem Override erreichen kann bereits eine feste Regelung gibt. Man könnte sich eigentlich die ganze Override-Geschichte sparen, wenn man die Regeln, die es bereits gibt direkt überschreiben würde, denkt sich vielleicht der ein oder andere an dieser Stelle. Allerdings wirkt dabei noch etwas mit, bei dem man diese Entscheidung spätestens bereuen würde. Die Updates, die regelmäßig in Joomla! erscheinen, würden alle überschriebenen Regeln erneut überschreiben. Das ist der Grund, warum in Joomla! das System der Overrides entstanden ist - eine Updatesichere Methode seine eigenen Regeln über das Template zu definieren.

Welche Joomla! Overrides gibt es?

In Joomla! kennt man hauptsächlich zwei verschiedene Arten von Overrides.

Die Joomla! Sprachoverrides

Die Sprachoverrides hier aufzuzählen, soll nur der Vollständigkeit halber geschehen. Unser Praxisbeispiel befasst sich nicht mit diesem Thema.
Jede Joomla! eigene und von externen Dienstleistern gut geschriebene Extension ist mit Sprachvariablen ausgestattet.

Zwei Gründe sprechen für die Verwendung von solchen Sprachvariablen.

1. Die Möglichkeit zur Mehrsprachigkeit ist von Anfang an gegeben
2. Der Anwender kann die Sprachvariablen über das Backend überschreiben.

Wir erstellen schnell ein Beispiel und bleiben in unserer, im Praxisbeispiel erwähnten, Blog-View:

Hier kann man den Autor im Einleitungstext einblenden. Das Wort Autor gefällt uns aber nicht. Wir wollen ihn lieber "Verfasser des Beitrags" nennen.

Vorgehensweise:

• 
• 
• 
• 
•  

• Einloggen im Joomla! Backend
• Reiter "Erweiterungen" anklicken und auf "Sprachen" wechseln
• Auf der linken Seite "Overrides" anklicken
• Darauf achten, dass beim Filter "German (DE-CH-AT) - Site" ausgewählt ist
• Auf "Neu" klicken, um einen Sprachoverride anzulegen
• Auf der rechten Seite nach dem zu überschreibenden Wort "Autor" suchen
• Oftmals kommt es vor, dass man hier auf mehrere Ergebnisse trifft. Das Wort Autor ist in Joomla! allgegenwärtig. Weshalb die zugehörige Sprachvariable nur "JAUTHOR" heißt. Klicken auf die JAUTHOR Sprachvaribale - dadurch erscheint auf der linken Seitenhälfte die Sprachvariable im Feld "Sprachschlüssel"
• In das Feld "Text" den gewünschten Override eintragen (hier: Verfasser des Beitrags)
• Klicken auf "Speichern & Schließen" zum Speichern des neu angelegten Joomla! Overrides für Sprachvariablen

Zusatzinformation: Wenn man sehr viele Suchergebnisse in den vorgeschlagenen Sprachvariablen findet, kann man sich an der Namenskonvention in Joomla orientieren. Die Komponente com_content (also alles was in Joomla! nativ die Beiträge betrifft) haben in der Regel vor der eigentlichen Bezeichnung der Sprachvariable das Präfix COM_CONTENT_.... 

Die Joomla! Template-Overrides

Zu wissen, wozu ein Template generell verwendet wird, wird größtenteils vorausgesetzt. Generell werden die Inhalte durch das Template positioniert und durch die Styles in einer optisch ansprechenden Form ausgegeben.

Es gibt mehrere Positionen für verschiedenste Module (wie z.B. neueste Beiträge, Besucherzähler, etc.) und eine Position für das eigentliche Kernstück der Website - die Komponente.

Welche Komponente aktuell in der Position "components" geladen wird, wird über die Menüs in Joomla! gesteuert. Um unser Praxisbeispiel nachvollziehen zu können benötigen wir folgende Punkte auf der Website eingerichtet:

• Eine Beitragskategorie
• Mehrere Beiträge mit einem Weiterlesen-Link im Beitrag und mit einem Einleitungsbild ausgestattet
• Ein Menüpunkt vom Menütyp "Kategorieblog", die auf die Beitragskategorie verweist

Was muss "overridet" werden?

Um auch im Frontend zu erkennen, welche Komponente und welche Ansicht davon gerade verwendet wird, deaktivieren wir die suchmaschinenfreundlichen URLs. Die nicht so schönen URLs haben nicht nur den Nachteil, dass sie einfach hässlich aussehen, sie helfen uns auch dabei das, was gerade passiert, leichter zu verstehen.

index.php?option=com_content&view=category&layout=blog&id=2&Itemid=267

Wenn man einen Override einer Komponente erstellen möchte, sollte man ziemlich genau wissen, wo man suchen muss. Den o.g. Code kann man wie folgt zerlegen:

• option = com_content (Komponente com_content)
• view = category (Die aktuelle Blog-Ansicht)
• layout = blog (Das verwendete Layout der Ansicht)
• id = ID des Beitrags
• Itemid = ID des Menüpunktes

So nun wissen wir: Unser Override muss für "com_content" und die View "category" angelegt werden.

Wo muss "overridet" werden?

Ein Override ist seit längerem sehr komfortabel im Joomla! Backend anzulegen. Es wird außerdem gleich angezeigt, wofür man grundsätzlich Overrides erstellen kann.

So gehts:

• Einloggen im Joomla! Backend
• Klicken auf Erweiterungen -> Templates
• Auf der linken Seite den Reiter "Templates" auswählen (Standard: Stile)
• Das aktuelle Frontend-Template (= Bereich Site) auswählen
• Den Reiter "Overrides erstellen" anklicken
• Klicken auf "com_content" und darin auf "category"

Unser Template-Pfad bzw. Name heißt hier "sketch_base-template". Je nach Template unterscheidet sich dieser Pfad also von dem unseren. 

Was ist hier passiert?

In dem ausgewähltem Template wurde ein neuer Ordner angelegt. Wenn noch keine Overrides existierten, dann gab es bis zu diesem Zeitpunkt den Ordner "html" in eurem Template-Pfad noch gar nicht.

Der Ordner HTML ist der "Trigger" für die Template-Overrides. Intern wird geprüft, ob in dem verwendeten Template ein solcher Ordner existert und welche Ordner darin liegen. Wenn jetzt, wie in unserem Fall, ein Ordner com_content darin liegt, weiß Joomla, dass wir für die com_content Komponente eine eigene Regel geschrieben haben und verwendet diese dann automatisch. Sollte kein entsprechender Override-Ordner vorhanden sein, so greift Joomla! auf die Standard-Pfade zurück

Basis-Pfad für unser Praxisbeispiel

-WEBSITE_GRUNDPFAD-/components/com_content/views/category/tmpl

Joomla Override-Pfad für unser Praxisbeispiel

-WEBSITE_GRUNDPFAD-/templates/sketch_base-template/html/com_content/category

Werfen wir einen Blick in unseren Override-Ordner:

Als Grundlage für unseren Joomla! Template Override werden uns alle View-Dateien vom Basis-Ordner zur Verfügung gestellt. Die Dateinamen innerhalb des "category" Ordners verraten uns, wie die Layouts der Views zugewiesen werden. Grundsätzlich denkbar simpel: Der Dateiname ist der Name des Layouts. Da wir das Layout = Blog als "Opfer" gewählt haben, beginnt hier jetzt auch die Arbeit und der erste Schritt zum eigenen Override.

Keine Scheu - Man hat ja immer eine Vorlage!
Testet ruhig durch, was passiert, wenn man irgendwo etwas ändert. Die betroffene Datei aus dem Ordner des Templates zu löschen bringt euch automatisch wieder in den Orinalzustand. Man kann also nichts kaputt machen, was man nicht wiederherstellen könnte!

Der Override wird endlich erstellt

Wir haben die Blog.php Datei geöffnet und werden von jede Menge Code erschlagen. Da wir Beiträge haben, die einen Weiterlesen-Link besitzen und unser Menüpunkt so eingestellt ist, dass ausschließlich Einleitungstexte angezeigt werden, können wir einiges an Code überspringen. Ab jetzt möchte ich mich auch kurz halten, um schnell einen Erfolg zu erzielen. Die richtige Stelle zu finden, kann gerade bei wenig Übung recht lange dauern. Unser Tipp ist hier einige Stellen auszukommtieren oder einfach mal eben eine Zeile einzufügen wie z.B.

<?php echo <h1>Hier bin ich also gerade</h1> ?>

In Zeile 75-95 wird die foreach-Schleife dargestellt, welche die Intro-Items also die Einleitungsbeiträge laden soll. Vom Prinzip würde man jetzt hierin gleich das <a>-Tag für die Beitragsüberschrift erwarten. Da die com_content - Views aber relativ komplex sind wird hier nur eine weitere Datei eingebunden. Ein sogenanntes Template namens "item". Die zugehörige Datei wird auch wieder durch den Dateinamen gefunden. Der Dateiname für ein Template eines Layouts wird zusammengesetzt mit LAYOUTNAMEN + Unterstrich + TEMPLATENAME . php  - also in unserem Fall blog_item.php.

Also müssen wir in unserem Fall jetzt noch eine Datei tiefer gehen und öffnen die blog_item.php. Hier ist endlich mal etwas Greifbares zu finden. Der Link zum Beitrag wird in Zeile 54-64 erzeugt. Dieser Link wird aktuell nur erstellt, wenn der Readmore angezeigt wird. Wir benötigen den Link aber global. D.h. wir nehmen die Zeilen 54-64 und legen diese bereits in Zeile 17 fest.

Zeile 16: $info = $params->get('info_block_position', 0);

if ($params->get('access-view')) :
$link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language));
else :
$menu = JFactory::getApplication()->getMenu();
$active = $menu->getActive();
$itemId = $active->id;
$link1 = JRoute::_('index.php?option=com_users&view=login&Itemid=' . $itemId);
$returnURL = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language));
$link = new JUri($link1);
$link->setVar('return', base64_encode($returnURL));
endif; 

Zeile 28: ?>

Die Variable $link steht uns jetzt zur Verfügung einen Link an der Stelle unserer Wahl zu erstellen. Um das gleich mal auszuprobieren schreibt in Zeile 29 einen Testlink, der dann jeweils über dem Beitragstitel ausgegeben wird. Um unseren Link auf im Quellcode später zu identifizieren geben wir gleich noch eine Klasse mit:

Zeile 29: <a class="my_first_override" href="/ <?php echo $link; ?> ">TESTLINK</a>

Wunderbar. Jetzt müsste man nur noch das Wort "TESTLINK" wieder entfernen und das schließende </a>-Tag ans Ende der blog_item.php verschieben.

Leider funktioniert das Ganze dann aber noch nicht wie gewünscht. Schuld daran ist, dass ja von Grund auf bereits Links erzeugt werden. Zum Beispiel beim Titel, wenn dieser als Link eingestellt ist, oder der Weiterlesen-Link. Um noch ein paar kleine Joomla! Overrides zu demonstrieren, entfernen wir die Links und geben stattdessen klar aus, was gewünscht wird.

Wenn euch interessiert, was das $this->item object alles beinhaltet, könnt ihr das mit dem PHP-Befehl print_r($this->item); ausgeben.

Alte Zeile:
<?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>
Ändern in:
<?php echo "<h2>".$this->item->title."</h2>"; ?>

Alte Zeile:
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
Ändern in:
<?php $own_image = json_decode($this->item->images);
echo "<img src='" . $own_image->{'image_intro'} . "' alt='" . $own_image->{'image_intro_alt'} . "'>"; ?>

Und zu guter Letzt runden wir das durch eine neue - eigene - Sprachvariable ab, die ihr ja schon in den Sprachoverrides anzulegen gelernt habt!

Alte Zeile:
echo JLayoutHelper::render('joomla.content.readmore', array('item' => $this->item, 'params' => $params, 'link' => $link)); ?>
Ändern in:
echo "<p class='readmore'>".JTEXT::_("COM_CONTENT_EIGENE_VARIABLE_READMORE")." ".$this->item->title."</p>"; ?>

Diesen Override downloaden?

Hier kann man den Override downloaden.
Wir würden uns über ein Feedback zum Artikel als Gegenleistung freuen!