Joomla! 2.5 (Teil 36): Eigene Templates entwickeln (7)

Joomla! ist ein äußerst flexibles System. So kann man auf jeder einzelnen Seite bestimmen, welche Module dort an welcher Position angezeigt werden. Das ist praktisch, schließlich könnte man so beispielsweise auf einer Unterseite Module links und rechts vom Inhalt anzeigen, während auf einer anderen Seite lediglich links ein Modul zu sehen ist. Wer nun sein Template entsprechend präpariert, kann dafür sorgen, dass sich der Inhalt dynamisch anpasst, je nachdem, ob in einer Modulposition überhaupt Module angezeigt werden.

Wir empfehlen:
Joomla!-Training

Die meisten Joomla!-Templates verwenden Spaltenlayouts.

 

Das ist einfach die praktischste Lösung für Joomla!-basierte Seiten. Schließlich kann man so die Module beispielsweise links und rechts des eigentlichen Inhalts (also der Beiträge) platzieren. Das Problem dabei: Es werden nicht immer auf allen Unterseiten tatsächlich in allen Spalten Module angezeigt.

 

In solchen Fällen wäre es natürlich besser, wenn sich der Inhalt der Seite dynamisch anpasst.

 

So etwas lässt sich in Joomla!-Templates tatsächlich umsetzen. Dazu muss man die Anzahl der Spalten ermitteln. Joomla! stellt dafür countModuls() zur Verfügung. Die allgemeine Anwendung sieht folgendermaßen aus:

countModules('condition')) : ?>
   tu was

   etwas anderes

Im einfachsten Fall überprüft man, ob innerhalb des Templates an der angegebenen Position ein Modul eingeblendet wurde:

countModules( 'left' )) : ?>
  

Hier wird kontrolliert, ob es innerhalb der Position left wenigstens ein Modul gibt. Ist das der Fall, wird ein entsprechender div-Bereich ins Dokument geschrieben. Befindet sich hingegen in der angegebenen Position kein Modul, wird dieser div-Bereich nicht im Dokument angezeigt.

Nun kann man nicht nur eine Position überprüfen, auch die Kombination mehrerer Positionen ist möglich. So könnte man beispielsweise überprüfen, ob es in den Positionen left und right ein Modul gibt.

countModules('left and right')) : ?> 
    

Hier wird also überprüft, ob in den beiden Positionen left und right mindestens ein Modul enthalten ist. Ist das der Fall, wird der div-Bereich mit der ID mainwrapper_full geladen. Ist kein Modul vorhanden, wird automatisch mainwrapper verwendet. Diese unterschiedlichen CSS-Klassen sind wichtig, schließlich lassen sich darüber die Spalten unterschiedlich gestalten. Mehr dazu, wie sich so eine unterschiedliche CSS-Definition (inklusive der passenden Grafiken) darstellt, dann im weiteren Verlauf dieses Tutorials.

Ähnlich gestaltet sich das für den mittleren Bereich:

countModules('left and right')) : ?>
       

 

Die Syntax zur Überprüfung der beiden Positionen wird das Schlüsselwort and verwendet. Man kann diese Abfragen durch den Einsatz zahlreicher Operatoren allerdings noch weiter verfeinern. Die Operatoren sind dabei der PHP-Syntax entlehnt. So wird im folgenden Beispiel überprüft, ob innerhalb der Position top ein Modul vorhanden ist. Und wenn hier von "ein Modul" die Rede ist, ist damit tatsächlich exakt ein Modul gemeint. Enthält die Position also zwei oder mehr Module, ist die Bedingung nicht erfüllt.

countModules('top') == 1) : ?>
  

Als Operator wird in diesem Beispiel das doppelte Ist gleich (==) genommen. Das Gegenstück zu diesem Operator ist !=. Dieser liefert wahr (true) zurück, wenn die angegebene Bedingung unwahr ist.

countModules('top') != 1) : ?>
  

Das bedeutet in diesem Fall: Hier wird true zurückgeliefert, wenn die Anzahl der innerhalb von top angegebenen Module ungleich 1 ist. Die Bedingung ist also immer dann erfüllt, wenn in top weniger oder mehr als 1 Modul steht.

Joomla! stellt tatsächlich eine ganze Menge dieser Operatoren zur Verfügung. Hier einige Beispiele, die durchaus praxistauglich sind:

if($this->countModules('top - left') == 2) : – Die Bedingung ist dann erfüllt, wenn die Anzahl der in der Position top minus der Anzahl in der Position left enthaltenen Module exakt 2 ist.
if($this->countModules('top == left')) : – Liefert true, wenn die Anzahl der Module in den Positionen top und left identisch ist.
if($this->countModules('top != left')) : – Liefert true, wenn die Anzahl der Module in den Positionen top und left ungleich ist.
if($this->countModules('top > left')) : – Liefert true, wenn innerhalb von top mehr Module als in left enthalten sind.
if($this->countModules('top or left')) : – Liefert true, wenn in top oder left oder in beiden mindestens ein Modul enthalten ist.

 

Das sind lediglich einige der Möglichkeiten, die Joomla! auf diesem Gebiet aufweisen kann. Wenn ihr das Beispiel-Grundlayout dieser Tutorial-Reihe verwendet, habt ihr bereits bemerkt, dass dort standardmäßig drei Spalten verwendet werden.

 

Das Template soll nun aber so funktionieren, dass immer dann, wenn in der rechten Spalte kein Modul enthalten ist, diese Spalte ausgeblendet wird. Zusätzlich soll sich der mittlere Bereich den nun freien Anzeigenplatz nehmen.

Dazu muss zunächst überprüft werden, ob in den Positionen left und right jeweils mindestens ein Modul enthalten ist.

countModules('left and right')) : ?> 
      

Ist das der Fall, wird der div-Bereich mit der ID mainwrapper_full geladen. Ist kein Modul vorhanden, wird automatisch mainwrapper verwendet.
Ähnlich gestaltet sich das für den mittleren Bereich:

countModules('left and right')) : ?>
         

Für die rechte Spalte sieht es etwas anders aus. Hier wird ausschließlich überprüft, ob in der rechten Spalte etwas enthalten ist. Nur, wenn diese Abfrage erfüllt ist, wird der rechte Bereich eingeblendet.

countModules('right')) : ?>
  

Was jetzt noch fehlt, sind die eigentlichen CSS-Definitionen.

#mainwrapper {
     margin-top:10px;
     width:860px;
     min-height:260px;
  }
  #mainwrapper_full {
     margin-top:10px;
     width:860px;
     min-height:260px;
  }
  #contentwrapper {
     width:630px;
     float:left;
     margin-left:30px;
     padding-bottom:10px;
  }
  #contentwrapper_full {
     width:440px;
     float:left;
     margin-left:30px;
     padding-bottom:10px;
  }

 

Die Grafiken, die für die verschiedenen Hintergründe verwendet werden, muss man natürlich ebenfalls einblenden.

Diese Definitionen stehen in der blue.css. (Wenn ihr über Parameter verschiedene CSS-Dateien ladet, müsst ihr die green.css natürlich ebenfalls anpassen).

#mainwrapper {
     background:transparent url('../images/blue/bg_main.gif') 
     repeat-y left top;
  }
  #mainwrapper_full {
     background:transparent 
     url('../images/blue/bg_main_full.gif') repeat-y left top;
  }

Auf diese Weise könnt ihr gezielt Spalten ein- und ausblenden.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Joomla! für Einsteiger und Aufsteiger

Joomla! für Einsteiger und Aufsteiger

Was liegt wo und ist wie, mit welchem Inhalt verknüpft?! Nach diesem Kurs ist das keine Frage mehr! Mit Joomla! erstellst du Webseiten und behältst deren Inhalte jederzeit im kontrollierenden und koordinierenden Blick.

  • 28 Lektionen in über fünf Stunden Video-Training zum praktischen Umgang mit Joomla!
  • Lerne das CMS von Grund auf kennen und verwalte damit deine redaktionellen Webseiten-Inhalte
  • Praxisnah lernen: inklusive Arbeitsmaterialien zum Mitmachen und Nachvollziehen
  • Auf dem neuesten Stand: Optimiert für die aktuelle Joomla!-Version 3.6

Zum Training