Joomla! Template Tutorial Teil 5 - Content Overrides

In diesem Teil des Template Tutorials wollen wir uns mit den sogenannten Content Overrides beschäftigen.

Bevor wir jedoch anfangen, möchte ich Ihnen zeigen, wie vielfältig das Flows Template einsetzbar ist. Wir haben kürzlich zwei kleine Kundenprojekte realisiert, für dessen Templateumsetzung wir die Flows Basis herangezogen haben. Sie finden die entstandene Seiten unter www.cmcpu.de und www.vaircon.com. Wie Sie sehen, haben wir einen Slider und eine Dropdown Navigation integriert. Der Rest ist allerdings nur eine Flows Variation, wie in Teil 3 des Joomla Template Tutorials beschrieben. Die index.php mussten wir nicht anfassen.

Keine Sorge, nachdem Sie diesen etwas trockenen Teil des Tutorials hinter sich gebracht haben, werden wir uns im nächsten Teil (und vielleicht letzten) so schicken Dingen wie Slidern und Dropdown Navigationen widmen.

Warum Joomla schlecht kochen kann

Zurück zu den Content Overrides. Diese sind eine Technik, die mit Joomla 1.5 eingeführt wurde. Bei Joomla 1.0 wurden die darzustellenden Inhalte, z. B. der Text eines Artikels, größtenteils durch HTML-Tabellen realisiert. Jeder Webdesigner weiß, dass dies kein guter Ansatz ist, wenn es um Flexibilität, Barrierefreiheit, Semantik und Suchmaschinenoptimierung geht. Bei Joomla 1.0 konnte man nicht viel dagegen tun. Joomla 1.5 hat dies zur Enttäuschung vieler immer noch getan, bot aber gleichzeitig die Möglichkeit, durch Content Overrides Einfluss zu nehmen. Wie also funktionieren Content Overrides?

Stellen Sie sich vor, die darzustellenden Inhalte (also die reinen Daten) entsprechen den Zutaten für ein leckeres Essen. Die Zubereitung und Anrichtung des Essens entspricht dann dem Layout welches die Daten darstellt. Es hängt wie immer am Koch, etwas vernünftiges aus den Zutaten bzw. Daten zu machen. Der Joomlaeigene Koch hat leider schlechte Rezepte und sein Essen entspricht von der Qualität der HTML-Struktur ungefähr einer Pommesbude. Content Overrides sind sozusagen alternative Köche, die man Joomla für die Zubereitung seiner Daten anbieten kann. Der Webdesigner kann seinen Köchen ganz genau sagen, wie er die Zutaten zubereitet haben möchte.

Dies ist möglich, durch das sogenannte MVC-Prinzip, welches bei Joomla 1.5 eingeführt wurde. Sie müssen nicht wirklich wissen, was MVC bedeutet. Für Sie als Templatebauer ist das einzig Wichtige das "V". Dies bedeutet "View" und der View kümmert sich darum, die Daten in ein passendes Layout zu gießen. Dabei kommt es immer darauf an, welche Daten dargestellt werden sollen. In der Regel werden Artikel innerhalb von Joomla von der integrierten Artikel Komponente dargestellt (com_content). Zum Standardumfang gehören aber auch Kontaktdaten, Umfragen, Weblinks usw. All dies sind Komponenten, welche Joomla bereithält und welche auf MVC Basis umgesetzt wurden. Dies ist wichtig, da nur solche Komponenten den Vorteil der Content Overrides nutzen können. Sie können also für jede MVC-Komponente ein Override erstellen. Komponenten wie z. B. Virtuemart oder der Community Builder basieren (noch) nicht auf MVC und können somit nicht auf diese Weise beeinflusst werden.

Ein wichtiger Vorteil hierbei ist, das sämtliche Updates, welche Sie auf Ihrem Joomla System durchführen, ihre Overrides nicht berühren und diese somit weiterhin funktionieren. Wollte man bei Joomla 1.0 die Ausgabe beeinflussen, hätte man das am Core, also an den Joomla Kerndateien selbst tun müssen. Erschien ein Joomla Updat, musste man sich die Änderungen merken, das Update einspielen und die Änderungen erneut durchführen. Da sind Content Overrides viel praktischer, den diese befinden sich außerhalb des Joomla Core und bleiben von Updates unberührt.

Um ein Content Override zu erstellen, müssen Sie nur die entsprechenden Layoutdateien (alternative Köche) in das richtige Verzeichniss legen und Joomla nutzt von da an diese zur Ausgabe der Daten. In welches Verzeichniss müssen die Dateien also rein? Und wie müssen diese Dateien aussehen?

Zur ersten Frage: Ein Content Override muss immer vom aktuellen Template angeboten werden. Wenn Sie also das mitgelieferte Purity Template nutzen, sucht Joomla in dessen Verzeichniss nach vorhandenen Overrides. Das gleiche gilt für das Milkyway, Beez und jedes andere Joomla Template. Sind keine Overrides vorhanden, wird der komponenteneigene View zur Ausgabe genutzt (buuuh!). Ein Joomla Template, welches heutzutage keine Overrides anbietet sollte recht kritisch beäugt werden. Content Overrides gehören zum guten Ton eines jeden Joomla Templates. Auf jeden Fall sollten Overrides für die Artikelkomponente (com_content) vorhanden sein.

Die Umsetzung eines einfachen Content Overrides

Gehen wir nun zum praktischen Teil über, indem wir ein Override für das Flows Template erstellen. Um ein Override anzubieten, müssen wir uns erstmal überlegen, für welche Komponente wir eines erstellen wollen. Natürlich muss Flows ein Override für die Artikelkomponente bereithalten. Overrides für diese Komponente sind allerdings etwas umfangreicher, und deswegen möchte ich mit etwas einfacherem anfangen.
Nehmen wir die Kontakt Komponente. Diese kümmert sich um die Darstellung der unter "Kontakte" vorhandenen Inhalte. Also eines einzelnen Kontakts und einer Kontaktkategorie. Wenn kein Override vorhanden ist, stellt Joomla die Daten auch hier in einem hässlichen Tabellenlayout dar. Hier wollen wir Abhilfe schaffen und ein Override erstellen, welches eine vernünftige Darstellung sicherstellt.

Im Bild links sehen Sie eine beispielhafte Kontaktansicht ohne Override. In dem blauen Bereich sehen sie die Firebug Ausgabe der HTML-Struktur. Hier kann man sehen, dass der entsprechende Inhalt mit HTML-Tabellen ausgegeben wird.

Um dies zu ändern, müssen wir ein Override für die Komponente (com_contact), dessen Ausgabe wir beeinflussen wollen, erstellen und an den richtigen Ort legen. Wie bereits oben erwähnt, befinden sich Overrides in den Template Ordnern. Die Platzierung der Overrides hängt direkt mit den Views der entsprechenden Komponente zusammen. Wenn wir also ein Menüpunkt erzeugen, welcher auf die Detailansicht eines Kontakts verweist, sieht das wie auf dem Bild unten aus. Sie sehen hier die zwei möglichen Views der Kontakt Komponente. Einmal die Anzeige einer Kontakt Kategorie und einmal die Anzeige eines einzelnen Kontaktes. Für das Zweitere wollen wir ein Override erstellen.

Es gibt verschiedene Wege, damit zu beginnen. Am einfachsten ist es, das Joomla Standard Layout (den hauseigenen Koch) zu nehmen, in das passende Override Verzeichnis zu kopieren und anzupassen. Also das Tabellenlayout in ein tabellenfreies Layout umzuwandeln. Das Joomla eigene Layout finden Sie im Verzeichnis der Kontaktkomponente. Sie können aber auch ein Override eines anderen Templates als Ausgangsbasis nehmen.

Im Bild links sehen sie die Joomla Verzeichnisstruktur der Kontakt Komponente. Im Verzeichnis views sehen Sie die beiden Layoutverzeichnisse contact und categorie. Diese entsprechen den beiden möglichen Views der Kontakt Komponente.

Nun wollen wir endlich das Override erstellen. Im Flows Verzeichnis haben wir bereits ein html Verzeichnis erstellt, welches das im Teil 4 des Template Tutorials behandelte Modul Chrome enthällt. In diesem Verzeichnis sucht Joomla auch nach evtl. vorhandenen Content Overrides. Wir erstellen also im html Verzeichnis des Flows Templates das Verzeichnis com_contact. Darin werden sich die Overrides für die Kontakt Komponente befinden. Nun bietet die Komponente die oben beschriebenen zwei möglichen Views. Um ein Override für die Kontakt Detailansicht zu erstellen, erstellen wir im com_contact Verzeichnis das Verzeichnis contact. Hier hinein plazieren wir die Overrides für die Darstellung eines einzelnen Kontaktes. Wie gesagt können wir das tun, indem wir das Joomla eigene Layout für diesen Fall einfach übernehmen und anpassen.

Das Joomla eigene Layout für diesen Fall entnehmen wir also dem tmpl Verzeichnis innerhalb des contact Verzeichnisses wie auf Bild 3 dargestellt. Die Layout Dateien, welche wir benötigen heißen default.php, default_address.php und default_form.php.

Warum drei Dateien für die Darstellung der Kontakt Detailansicht, werden Sie fragen?
Nun, Layouts können auch Sublayouts beinhalten. Wenn Sie z. B. an die Blogansicht einer Kategorie denken, werden dort alle Artikel einer Kategorie untereinander dargestellt. Um sich die Arbeit zu erleichtern, kann man also in einer Schleife alle darzustellenden Artikel durchgehen und mit Hilfe eines Subtemplates darstellen. Dieses Subtemplate ist dann nur für die Darstellung eines Artikels zuständig und wird vom Haupttemplate beliebig oft aufgerufen.

Ähnlich ist es bei unserem Kontakt Override. Das Haupttemplate heisst hier default.php. Dieses Haupttemplate bindet die beiden Subtemplates default_address.php und default_form.php ein. Sie können Ihr Override natürlich auch ohne Subtemplate erstellen. Mit wird das Override einfach etwas unübersichtlicher.
Nachdem Sie also die Joomla eigenen Layouts in das passende Flows Verzeichnis kopiert haben, sollte das Verzeichnis wie in Bild 4 ausschauen.

Nun schauen wir uns mal die Joomla eigenen Köche an, in der Hoffnung Ihnen ein besseres Rezept beibringen zu können. Sehen wir uns zunächst (und nur kurz!!) den Quellcode des Hauptlayouts default.php an:

<?php
/**
 * $Id: default.php 11917 2009-05-29 19:37:05Z ian $
 */
defined(
'_JEXEC' ) or die( 'Restricted access' );
$cparams =
JComponentHelper::getParams ('com_media');
?>
<?php if (
$this->params->get( 'show_page_title', 1 ) &&
!$this->contact->params->get( 'popup' ) &&
$this->params->get('page_title') != $this->contact->name ) :
?>
    <div class="componentheading<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>"> 
     <?php echo $this->params->get( 'page_title' ); ?>  
 </div>
<?php endif; ?>
<div
id="component-contact">
<table width="100%" cellpadding="0"
cellspacing="0" border="0" class="contentpaneopen<?php echo
$this->escape($this->params->get('pageclass_sfx')); ?>">
<?php
if ( $this->params->get( 'show_contact_list' ) && count(
$this->contacts ) > 1) : ?>
<tr>
    <td
colspan="2" align="center">
        <br />
      
 <form action="<?php echo JRoute::_('index.php') ?>"
method="post" name="selectForm" id="selectForm">
        <?php
echo JText::_( 'Select Contact' ); ?>:
            <br />
  
         <?php echo JHTML::_('select.genericlist', 
$this->contacts, 'contact_id', 'class="inputbox"
onchange="this.form.submit()"', 'id', 'name',
$this->contact->id);?>
            <input type="hidden"
name="option" value="com_contact" />
        </form>  
 </td>
</tr>
<?php endif; ?>
<?php if (
$this->contact->name &&
$this->contact->params->get( 'show_name' ) ) : ?>
<tr> 
 <td width="100%" class="contentheading<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>"> 
     <?php echo $this->escape($this->contact->name); ?> 
 </td>
</tr>
<?php endif; ?>
<?php if (
$this->contact->con_position &&
$this->contact->params->get( 'show_position' ) ) : ?>
<tr> 
 <td colspan="2">
    <?php echo $this->escape($this->contact->con_position); ?>      
 <br /><br />
    </td>
</tr>
<?php
endif; ?>
<tr>
    <td>
        <table border="0" width="100%">
        <tr>          
 <td></td>
            <td rowspan="2" align="right" valign="top">
            <?php if ( $this->contact->image && $this->contact->params->get( 'show_image' ) ) : ?>     
         <div style="float: right;">                  
 <?php echo JHTML::_('image', 'images/stories' . '/'.$this->contact->image, JText::_( 'Contact' ), array('align' => 'middle')); ?>
                </div>          
 <?php endif; ?>
            </td>
        </tr> 
     <tr>
            <td>
                <?php echo $this->loadTemplate('address'); ?>
            </td> 
     </tr>
        </table>
    </td>  
 <td> </td>
</tr>
<?php if ( $this->contact->params->get( 'allow_vcard' ) ) : ?>
<tr> 
 <td colspan="2">
    <?php echo JText::_( 'Download information as a' );?>
        <a href="<?php echo JURI::base(); ?>index.php?option=com_contact&task=vcard&contact_id=<?phpecho $this->contact->id; ?>&format=raw&tmpl=component">          
 <?php echo JText::_( 'VCard' );?></a>
    </td>
</tr>
<?php
endif;
if ( $this->contact->params->get('show_email_form') && ($this->contact->email_to || $this->contact->user_id))
    echo $this->loadTemplate('form');
?>
</table>
</div>  

Halt! Bevor Sie die Flinte ins Korn werfen, werde ich Ihnen zu einem schnellen Erfolgserlebnis verhelfen. Ersetzen Sie den Quelltext des Layouts (im Flows Override Verzeichnis!) mit folgenden vier Zeilen:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
echo $this->contact->name;
?> 

Ihr Override für die Kontakt Detailansicht ist fertig! Wenn Sie die Webseite neu laden, sollte Joomla Ihr Override finden und das Ergebnis sollte so aussehen, wie auf Bild 5 dargestellt. Wir kümmern uns in diesem Override um nichts anderes als die Ausgabe des Kontaktnames. Das ist zugegeben nicht viel, aber wenn Sie den Prozess bis hierhin verstanden haben, wissen Sie wie Content Overrides funktionieren. Sie haben Joomla soeben einen neuen Koch verpasst!

Alles, was jetzt folgt, ist die Anpassung bzw. Übernahme der verschiedenen Elemente aus dem großen Layout oben (dem Joomla Koch) in unser eigenes Override. Wenn Sie also wollen, dass die Position des Kontaktes auch ausgegeben wird, machen Sie folgendes:

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<p><?php echo $this->contact->name; ?></p>
<p><?php echo $this->contact->con_position; ?></p>

Knaller! Damit sind wir dem Joomla eigenem Layout schon voraus, denn es stellt diese Informationen mit Tabellen dar. Wir nutzen dafür Paragraphen.

Sie werden sich nun zwei Dinge fragen:

1. Was zum Teufel ist das dort oben alles für PHP-Code?
2. Woher weiß ich, was es alles für Datenfelder gibt, z. B. con_position?

PHP-Code? Hilfe!

Natürlich stellt ein Layout nicht nur stupide Daten dar. Vielmehr kann es auf bestimmte Einstellungen reagieren und entsprechend die Darstellung der Daten beeinflussen. In der Joomla Kontaktverwaltung sehen sie in der Detailansicht z. B. Kontaktparameter wie in Bild 6 dargestellt.

Welchen Sinn hätte es, diese zu konfigurieren, wenn das Layout nicht darauf reagiert? Wenn unser Override also auf die Einstellung, ob der Kontaktname dargestellt werden soll oder nicht reagieren soll, passen wir das Override wie folgt an:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<?php
if ($this->contact->params->get('show_name')) : ?> 
<p><?php echo $this->contact->name; ?></p>
<?php endif; ?>
<p><?php echo $this->contact->con_position;
?></p>

Ähnlich wie bei den im Tutorial Teil 4 besprochenen Modulparametern, greifen wir hier mittels $this->contact->params->get auf Komponentenparameter zu, um die aktuelle Einstellung zu erfahren. Mann kann diese Abfrage noch wie folgt erweitern:

<?php if ($this->contact->name && $this->contact->params->get('show_name')) : ?> 

Damit ist auch sichergestellt, das kein leerer Paragraph dargestellt wird, wenn der Name zwar ausgegeben werden soll, aber ein Name in der Kontaktverwaltung gar nicht eingegeben wurde. Der Name ist nämlich kein Pflichtfeld.

Nun, ein Teil des PHP-Codes erklärt sich also durch die Abfragen der Komponenteneinstellungen. Und da es für die Kontaktkomponente einige davon gibt, muss auch ein wenig PHP-Code rein. Natürlich können Sie in Ihren Overrides auf PHP-Code verzichten und nur die Daten darstellen, von denen Sie wissen, dass Sie sie sehen wollen. Dann sind die Einstellungen der Komponente im Backend für die Katz, aber genau dafür gibt es Overrides. Hier sind Sie Herr und Meister und können sämtlichen Unsinn anstellen.

Zur zweiten Frage: Auf welche Felder Sie überhaupt in Ihrem Override Zugriff haben, richtet sich natürlich nach der Komponente, für die das Override erstellt wird. Im Backend sehen Sie zwar wie in Bild 6 die vorhandenen Felder, jedoch nicht deren konkrete Variablennamen. Diese erfahren Sie nur von den Joomla eigenen Layouts/Köchen. Bei der Erstellung eines Overrides sollten Sie also immer einen Blick entweder in die Joomla eigenen Layouts oder in sein bereits vorhandenes Override eines anderen Template werfen, z. B. des Beez Templates. Dieses besitzt Overrides für alle elementaren Komponenten.

Templates, die Templates laden: Subtemplates!

Schauen wir uns weitere, nicht triviale Elemente des Kontakt Overrides an. Sie finden im Joomla eigenem Layout folgende Zeile:

<?php echo $this->loadTemplate('address'); ?>

Damit wird ein Subtemplate geladen. Das Kontaktlayout besitzt also ein Sublayout, welches allein für die Ausgabe der Adresse zuständig ist. Hierbei ist wichtig zu wissen, dass Namen von Subtemplates immer der Name ihres Haupttemplates vorangestellt ist. Die Datei des Adressen Subtemplates heisst also default_address. Richtig, diese Datei mit Namen default_address.php befindet sich bereits in unserem Override Verzeichniss.

Passen Sie unser Override wie folgt an:

<?php defined('_JEXEC' ) or die( 'Restricted access' ); ?>
<?php if ($this->contact->params->get('show_name')) : ?> 
<p><?phpecho $this->contact->name; ?></p>
<?php endif; ?>
<p><?php echo $this->contact->con_position;?></p>
<?php echo $this->loadTemplate('address'); ?>

<?php defined( '_JEXEC' ) or die( 'Restricted access' );
echo $this->contact->address; 
?>

Damit haben Sie auch Ihr erstes Subtemplate fertiggestellt. Dieses gibt einfach die in der Adressverwaltung eingegebene Adresse des Kontaktes aus. Da ich sämtlichen PHP-Code weggelassen habe, werden die Komponentenparameter nicht berücksichtigt.

Von hier an sollten Sie in der Lage sein, das Override für die Kontaktkomponente fertigzustellen. Natürlich wird Ihnen das Leben durch Exzesse in Sachen Abfragelogik, welche Sie in den Joomla Layouts finden,  schwer gemacht, wie z. B.:

<?php if ( ( $this->contact->params->get( 'address_check' ) > 0 ) &&  ( $this->contact->address || $this->contact->suburb  || $this->contact->state || $this->contact->country || $this->contact->postcode ) ) : ?> 

Aber was passiert hier schlimmes? Hier wird geprüft, ob der Parameter address_check gesetzt ist und ob wenigstens eins der folgenden Felder eingegeben wurde. Damit wird also einfach geprüft, ob überhaupt eine Adresse dargestellt werden soll.

Dann taucht auch folgender Code auf:

<?php echo JHTML::_('image', 'images/stories' . '/'.$this->contact->image, JText::_( 'Contact' ), array('align' => 'middle')); ?> 

Wie Sie wissen, kann in der Kontaktverwaltung einem Kontakt ein Bild zugeordnet werden. Um dieses auszugeben, gibt es verschiedene Möglichkeiten. Mit Hilfe von JHTML geht es natürlich besonders elegant. Aber denken Sie daran: Es ist Ihr Override! Wenn Sie noch nie etwas von JHTML gehört haben, können Sie folgendes machen:

<?php echo '<img  src="images/stories/'.$this->contact->image" />'; ?>

Es geht schließlich nur darum ein Bild auszugeben, richtig? Natürlich ist die obere Methode besser und wenn Sie ernsthaft Joomla Templates bauen wollen, werden Sie früher oder später ein wenig in das Joomla Framework abtauchen müssen.

Das fertige Override für die Kontakt Komponente finden Sie im Download für das Flows Template dieses Tutorial Teils. Dort befindet sich ebenfalls das Override für die zweite Ansicht der Kontaktkomponente, die Kategorieansicht der Kontakte.

com_content - Die Königsdisziplin in Sachen Overrides

Das Override, welches Angst und Schrecken verbreitet ist natürlich jenes für die Hauptkomponente von Joomla, die Artikelverwaltung (com_content).

Alleine die möglichen Anzeigearten, wie links zu sehen, lassen erahnen, wieviele Overrides hier zum Zuge kommen können.

Im Prinzip geht hier aber auch nichts anderes vor, als in der Kontaktkomponente. Wir wollen auch für die Artikelkomponente ein beispielhaftes Override erstellen. Und zwar werden wir ein Override für die Darstellung eines einzelnen Artikels erstellen. Die Prozedur gleicht jener der Kontaktkomponente.
Innerhalb des html Verzeichnisses unseres Flows Templates erstellen wir das Verzeichnis com_content. Darin Erstellen wir das Unterverzeichnis article. Das entspricht wieder genau den Verzeichnissen des Joomla Views (Bild rechts).

In das Verzeichnis article kommen also die Overrides für die Darstellung eines Artikels.  Kopieren Sie die drei Dateien default.php und form.php in unser Override Verzeichniss. Die Datei default.php ist das Hauptlayout, die form.php ignorieren wir fürs erste. Wenn Sie sich diese Datei ansehen, werden Sie feststellen...so schlimm ist es nicht, oder?

Frontend Editing - wer's braucht...

Was bei den com_content Overrides natürlich ins Gewicht fällt ist der Umstand, dass Joomla auch das sogenannte Frontend Editing erlaubt. Damit können Artikel nicht nur im Backend bearbeitet werden, sondern (wenn die Rechte vorliegen) auch im Frontend, d. h. direkt in der Webseite. Um dies zu ermöglichen, muss das Layout natürlich einiges beachten.
Falls Sie wie ich kein Freund des Frontend Editing sind, können Sie in Ihren Overrides die ganzen Funktionalitäten, welche dafür benötigt werden einfach weglassen. Dann ist Ihr Override einfach für die Darstellung zuständig. Ich werde für das Flows Template natürlich alle Funktionalitäten integrieren, aber im Rahmen des Tutorials das Frontend Editing weglassen.

OK, wir waren beim default.php Override. Löschen Sie alles, was Sie hier sehen und ersetzen Sie es mit:

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
echo $this->article->title; 
?>

Das war's! Ihr Override für die übermächtige com_content ist fertig. Es kann zwar nur den Titel des Artikels ausgeben, aber immerhin. Auch bei diesem Override geht es wieder darum, alle möglichen Komponentenparameter zu berücksichtigen und in das Override zu integrieren.
Wie Sie wissen, kann bei der Erstellung eines Menüpunktes, welcher auf einen einzelnen Artikel verweist, ein alternativer Seitentitel eingegeben werden, wie links zu sehen. Um diesen in unserem Override darzustellen und auch die Option "Seitentitel darstellen", weiter unten, einzubauen, machen wir folgendes:

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($this->params->get('show_page_title', 1)) : ?>
<h1><?php echo  $this->escape($this->params->get('page_title')); ?></h1>
<?php endif; ?>
<?php if 
($this->params->get('show_title')) : ?>
<h2><?php echo $this->article->title;  ?></h2>
<?php endif; ?>

Mit dem Parameter show_page_title fragen wir ab, ob der alternative Seitentitel dargestellt werden soll, und falls ja stellen wir ihn innerhalb eines H1 Tags dar. Den eigentlichen Artikeltitel stellen wir darunter in einem H2 Tag dar, aber nur wenn es im Backend so konfiguriert wurde (show_title).

Sie kennen sicherlich den Parameter "Verlinkte Titel" aus dem Backend (Bild links). Damit kann erreicht werden, dass bei Klick auf den Artikeltitel auf den Artikel verlinkt wird. Dies ist in einer Blogansicht sehr praktisch, um nicht immer auf das "weiterlesen" klicken zu müssen.

Nichts weiter als Parameterabfragen:

<?php // no direct access
defined('_JEXEC') or die('Restricted access');?>
<?php if ($this->params->get('show_page_title', 1)) : ?>
<h1><?php echo $this->escape($this->params->get('page_title')); ?></h1>
<?php endif; ?>
<h2>
    <?php if ($this->params->get('link_titles') && $this->article->readmore_link != '') : ?>
    <a  href="<?php echo $this->article->readmore_link; ?>"><?php echo $this->escape($this->article->title); ?></a>
    <?php else :
        echo $this->escape($this->article->title);
    endif; ?>
</h2>

Der fertige Titel Abschnitt des Flows Content Overrides für einen einzelnen Artikel sieht wie folgt aus:

<?php if ($this->params->get('show_page_title',1) && $this->params->get('page_title') != $this->article->title) :?>
<h1 class="componentheading<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
       <?php echo $this->escape($this->params->get('page_title'));
?>
</h1>
<?php endif; ?>
<?php $hlvl = ($this->params->get('show_page_title',1) && $this->params->get('page_title') != $this->article->title) ? 2 : 1; ?>
<?php if ($this->params->get('show_title')) : ?>
<h<?php echo $hlvl; ?> class="contentheading<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
  
<?php if ($this->params->get('link_titles') && $this->article->readmore_link != '') : ?>
    <a  href="<?php echo $this->article->readmore_link; ?>" class="contentpagetitle<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">  
     <?php echo $this->escape($this->article->title); ?></a>
    <?php else :
        echo $this->escape($this->article->title);
    endif; ?>
</h<?php echo $hlvl; ?>>
<?php endif; ?> 

Ich finde es immer dumm, wenn der Administrator die Darstellung des Pagetitles deaktiviert und das Template dann den Seitentitel mit einem H2 ausgibt. Hier habe ich mich darum gekümmert, dass eine korrekte Überschriftenstruktur entsteht, egal was man im Backend konfiguriert.

So gilt es, das Artikel Override weiter anzupassen. Wie oben beschrieben, existieren für die Artikelkomponente com_content weitere Darstellungsarten, die hier kurz beschrieben werden und sich im Override Verzeichnis des Flows Templates wiederfinden.

Ein professionelles Joomla 1.5 Template sollte mindestens diese Overrides besitzen.

Was beim Styling von Overrides beachtet werden muss

Die Generierung semantischem, suchmaschinenfreundlichem und barrierefreien HTML-Codes mit Hilfe von Overrides ist eine Sache. Natürlich sollen die Inhalte der Overrides auch gut aussehen. Um die Inhalte mit CSS zu stylen, benötigen diese natürlich ein paar Klassen und IDs. Das haben wir bis jetzt ausgeklammert.

Den Artikelnamen haben wir wie folgt ausgeben:

<h1><?php echo 
$this->escape($this->params->get('page_title')); 
?></h1>

Das Styling des H1 Tags ist also nur über das Tag selbst möglich. Nun kommt eine wichtige Lektion für alle Templatebauer. Joomla selbst und die meisten Templateentwickler nutzen einen kleinen Pool an CSS-Klassen und IDs zum stylen Ihrer Tags. Sie werden in den CSS-Dateien verschiedener Joomla Templates Überschneidungen finden, welche diesen Pool darstellen. Ich hätte es befürwortet, wenn man sich hier, besonders in Richtung Semantik, auf einen wirklch festen Bestand an CSS-Auszeichnungen festgelegt hätte. Damit wäre beim Styling des HTML Codes immer klar, welche Elemente der Seite, welche Klassen bekommen können. Auch könnten Komponentenentwickler damit sicherstellen, dass die Ausgaben ihrer Komponente bereits vom Template selbst gestylt werden. Stattdessen binden viele Komponenten weitere, eigene CSS-Dateien ein, um ihre Ausgabe zu stylen. Joomla 1.6 geht diesen Weg glücklicherweise etwas konsequenter.

Um den Artikeltitel von oben passend zu stylen können wir folgendes machen:

<h1 class="componentheading"><?php echo $this->escape($this->params->get('page_title')); ?></h1>

Damit haben wir dem Titel die Klasse componentheading verpasst. Diese Klasse ist in fast jedem Joomla Template definiert und muss somit nicht neu beschrieben werden.

Wenn Sie das Erstellungsdatum des Artikels ausgeben machen Sie folgendes:

<span class="createdate">
        <?php echo JHTML::_('date', $this->article->created, JText::_('DATE_FORMAT_LC2')); ?>
</span>

Hier kümmert sich die meistens definierte createdate Klasse um das passende Styling. Sie sollten also, besonders wenn Sie Overrides für Joomla eigene Komponenten erstellen, immer CSS-Klassen nutzen, welche bereits im Joomla Template definiert wurden.

Hier ein Auszug einiger in den meisten Joomla Templates eingesetzten CSS-Klassen:

Diese und weitere Klassen werden zum Stylen von Buttons, Tabellen, Artikeln, Links, Navigationen usw. eingesetzt. Natürlich müssen sie sinnvoll innerhalb der CSS-Struktur genutzt werden. Wenn Sie also die Seitennavigation der Blogansicht stylen wollen schreiben sie z. B. ul.pagination li.

Overrides leichtgemacht

Niemand erstellt Overrides für Standardkomponenten von der Pike auf neu. Der einfachste Weg ein Override zu erstellen ist, die Overrides eines anderen Templates einfach in das eigene Templateverzeichnis zu kopieren und wo nötig anzupassen. Joomla bringt die drei Templates Purity, Beez und Milkyway mit sich. Milkyway nutzt leider keine Overrides, hier ist also nichts zu holen. Purity und Beez haben beide Overrides für die Artikelkomponente. Beez enthällt auch Overrides für die Kontakt-, User-, Newsfeeds-, Umfragen-, Such- und Weblinks Komponente. Die Jungs von Yootheme bieten Ihr Override Paket ebenfalls zum Download an.

Overrides für Module

Sie werden feststellen, dass es in den html Override Verzeichnissen der Templates nicht nur Overrides für Komponenten, sondern auch für Module gibt. Damit kann analog zur Ausgabe von Komponenten auch die Ausgabe von Modulen beeinflusst werden.

Sie werden sich fragen, wozu wir ein Override für Module erstellen sollten, wenn wir im vorigen Teil des Tutorials bereits ein eigenes Module Chrome erstellt haben. Die Antwort lautet Module Chromes steuern das HTML-Konstrukt mit dem Module generiert werden können. Modul Overrides dagegen beeinflussen den Inhalt der Module und werden individuell für jedes Modul erstellt.

Nehmen wir als Beispiel das klassische "Latest News" Modul. Dieses teasert eine bestimmte Anzahl an Artikeln einer bestimmten Kategorie an. Das Joomla eigene Template hierfür sieht wie folgt aus:

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<ul class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
<?php foreach ($list as $item) :  ?>
    <li class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
        <a href="<?php echo $item->link; ?>" class="latestnews<?php echo $params->get('moduleclass_sfx'); ?>">
            <?php echo $item->text; ?></a>
  </li>
<?php endforeach; ?>
</ul>

In einer Listendarstellung werden die Artikeltitel untereinander dargestellt. Viel gibt es hierzu nicht zu sagen. Was kann ein Override hier verbessern?
Nun das Override des Beez Templates z.B. sieht wie folgt aus:

<?php // no direct access
defined('_JEXEC') or die('Restricted access');?>
<?php if (count($list)) : ?>
<ul class="latestnews<?php echo $params->get('pageclass_sfx'); ?>">
    <?php foreach ($list as $item) : ?>
    <li class="latestnews<?php echo $params->get('pageclass_sfx');?>">
        <a href="<?php echo $item->link; ?>" class="latestnews<?php echo $params->get('pageclass_sfx'); ?>">
            <?php echo $item->text; ?></a>
   </li>
    <?php endforeach; ?>
</ul>
<?php
endif; 

Der einzige Unterschied ist, das hier überprüft wird, ob es überhaupt auszugebende Artikel gibt. Denn falls nicht, wird auch nicht die Liste mit dem ul-Tag ausgegeben. Das ist sinnvoll, um nicht eine leere Liste in seiner Webseite stehen zu haben.

Um das Override etwas individuell auszubauen, könnten wir das Bedürfniss haben die Anzahl der vorhandenen News über der Liste auszugeben. Nichts leicher als das:

<?php // no direct access
defined('_JEXEC') or die('Restricted access');
?>
<?php if (count($list)) : ?>
<ul class="latestnews<?php echo $params->get('pageclass_sfx'); ?>">
    <h4><?php echo count($list); ?> News</h4>
    <?php foreach ($list as $item) : ?>
    <li class="latestnews<?php echo $params->get('pageclass_sfx'); ?>">    
        <a  href="<?php echo $item->link; ?>" class="latestnews<?php echo $params->get('pageclass_sfx'); ?>">
        <?php echo $item->text; ?></a>
    </li>
    <?php endforeach; ?>
</ul>
<?php endif;

Sie sehen, wie leicht es ist, sowohl Aussehen als auch die Ausgabe und sogar gewisse Funktionalitäten von Modulen Ihren Bedürfnissen anzupassen. Das Beste dabei ist, dass Sie durch die Nutzung von Overrides nicht den "Core hacken", also Joomla eigene Dateien verändern. Wenn Sie das tun, um Einfluss auf bestimmte Dinge zu haben, werden Ihre Anpassungen mit dem nächsten Joomla Update höchstwahrscheinlich verloren gehen. Ihre Overrides aber werden durch ein Update nicht beeinflusst und funktionieren weiter.

Bei manchen Kundenprojekten haben wir mit Hilfe von Overrides im Komponentenbereich umfangreiche Aufgabenstellungen gelöst. In Overrides können Sie auf die Datenbank zugreifen und das gesamte Joomla Framework nutzen. Sie können also beliebig Funktionalitäten erweitern oder verändern (ohne Joomla anfassen zu müssen).

Im nächsten und vielleicht letztem Teil des Tutorials werden wir neben kleinen Optimierungen im Hintergrund eine schicke Suckerfish Dropdown Navigation und einen Contentslider für den Header einbauen.

Flows-Template mit Overrides:
Ansehen: Flows Template Step 10
Download: Flows Template Step 10

16 Kommentare

Zeige/Verstecke Kommentareingabe