Eigene Joomla Modul Chromes

Achtung, öffnet in einem neuen Fenster. Drucken

eigener-module-chromeIn unserer Übersicht zu den wichtigsten Joomla 1.5 Template Befehlen haben wir bereits erklärt, dass es 4 bzw. 5 vordefinierte Modul Chromes/Styles gibt. In diesem Tutorial zeigen wir Ihnen, wie Sie Ihren eigenen Modul Chrome erstellen können und führen einige Beispiele auf, die Ihnen zeigen sollen, was Sie mit Module Chromes alles machen können.

Was sind Modul Chromes?

Ein Modul Chrome ist ein vordefinierter HTML Code, mit dessen Hilfe man die Ausgabe der Module im Template beeinflussen kann.

Kurz zusammengefasst:

1. ein Module Chrome wird über das Attribut style="" beim Aufruf des Moduls bestimmt: 

<jdoc:include type="modules" name="left" style="xhtml" />

2. Es gibt 4 bzw. 5 vordefinierte Joomla Module Chromes (xhtml, rounded, table, raw und none).

Welche Ausgabe die einzelnen Chromes erzeugen erfahren Sie in unserem Tutorial zu den wichtigsten Joomla 1.5 Template Befehlen.

3. Neben diesen vordefinierten Chromes können Sie auch eigene Chromes erstellen und aufrufen. Der Aufruf des Chromes "NameDesChromes" sähe dann so aus:

<jdoc:include type="modules" name="left" style="NameDesChromes" />

Wie erstelle ich meinen eigenen Modul Chrome?

Sie können mit Joomla 1.5 Ihren eigenen, individuellen Module Chrome erzeugen und so die Ausgabe der Module bestimmen, beispielsweise um Modultitel zu splitten und das erste Wort einzufärben oder um die Überschriftensystematik auf Ihrer Website zu optimieren.

Um einen oder mehrere Module Chromes zu erstellen, müssen Sie zunächst eine Datei mit dem Namen modules.php im Ordner "HTML" in Ihrem Template erstellen

  • JoomlaRoot
  • templates
  • IhrTemplate
  • html
  • modules.php

In dieser Datei definieren Sie zunächst eine Funktion namens "modChrome_NameDesChromes", welche 3 Argumente ($module, &$params und &$attribs) übernimmt. Später können Sie Ihren neu erstellten Chrome dann mit dem Namen des Chromes im Style Attribut beim Modulaufruf (siehe oben) aufrufen.

Sie können mehrere Chromes in der Datei modules.php definieren und sind nicht auf einen beschränkt.

Die Grundfunktion

<?php function modChrome_NameDesChromes( $module, &$params, &$attribs ) {
...
}
?>

Innerhalb dieser Funktion können Sie nun auf alle im folgenden aufegeführten Moduleigenschaften zugreifen.

Eigenschaften der Module

$module->id /* Die ID des Moduls */
$module->title /* Der Titel des Moduls */
$module->content /* Der Inhalt des Moduls */
$module->position /* Die Modulposition des Moduls */
$module->module /* Das Modul zB.: mod_mainmenu */
$module->showtitle /* ist TRUE, wenn der Titel angezeigt und FALSE, wenn er nicht angezeigt werden soll */
$module->params /* alle Parameter des Moduls zB. die Anzahl der anzuzeigenden Beiträge der latest news */
$module->name /* Der Name des Moduls zB.: mainmenu */
$module->style /* Der Style des Moduls */

Mit diesen Informationen ausgestattet lässt sich auch schon das erste eigene - zugegebenermaßen noch nicht besonders aufwendige - Module Chrome erstellen.

Mit einer einfachen PHP if Abfrage überprüfen wir zunächst, ob der Titel ausgegen werden soll und falls ja, geben wir diesen aus. Hier also die modifizierte Funktion von oben:

<?php function modChrome_NameDesChromes( $module, &$params, &$attribs ) {
  if ($module->showtitle) : ?>
  <h3> <?php echo $module->title; ?> </h3>
  <?php endif;
}
?>

Natürlich wird jetzt erstmal nur der Titel des Moduls ausgegeben und kein Inhalt selbst, aber dieses Beispiel soll zunächst auch nur die Funktionsweise der selbst erstellten Chromes verdeutlichen.

Auf Modul Parameter zugreifen

Jetzt soll das Beispiel erweitert werden. Natürlich soll unser Modul neben dem Titel auch den eigentlichen Modulinhalt ausgeben und zwar in einem DIV, dass - falls angegeben - den Module class Suffix als Klassennamen übernimmt. Das ganze jedoch nur, wenn das Modul überhaupt Inhalt hat:

<?php function modChrome_NameDesChromes( $module, &$params, &$attribs ) {
if (!empty ($module->content)) : ?>
<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
  <?php if ($module->showtitle) : ?>
     <h3><?php echo $module->title; ?></h2>
   <?php endif; ?>
   <?php echo $module->content; ?>
</div>
<?php endif;
}
?>

Soweit so gut! Noch nichts Bedeutendes. Einzig neu ist, dass wir mit $params->get('NameDesParameters') in unserem Fall auf den Parameter moduleclass_sfx zugreifen und diesen ausgeben können.

Natürlich können Sie auch auf alle weiteren Parameter des Moduls zugreifen und diese in Abfragen und Ausgaben einbauen. Denkbar wäre beispielsweise eine Abfrage wie viele Newseinträge beim Joomla standard Modul "latest news" angezeigt werden sollen oder Ähnliches.

Eigene Attribute erstellen und verarbeiten

Jetzt kommen wir zum wirklich interessanten Teil des Tutorials; es ist nämlich möglich der Modul Chrome Funktion eigene Attribute zu übergeben. Diese Attribute werden im Array $attribs gespeichert und können so in die Verarbeitung einfließen. 

Denkbar ist hier vieles. In der Praxis haben sich insbesondere Attribute durchgesetzt, die beispielsweise das sog. headerlevel (h1-h6) oder bestimmte Farbeigenschaften des Moduls regeln.

Die Übergabe der Attribute an die Funktion erfolgt wie auch schon der Aufruf des Chromes selbst über <jdoc:include />

Ein gutes Beispiel für ein bestimmbares Headerlevel für die Modulposition können Sie der modules.php Datei des BEEZ Templates entnehmen. In der index.php des Beez Templates sehen Sie beispielsweise in Zeile 85 den Aufruf des Chromes für die Modulposition "left":

<jdoc:include type="modules" name="left" style="beezDivision" headerLevel="3" />

Hier wird über das style Attribut zunächst das eigens erstellte Modul Chrome namens "beezDivision" aufgerufen und diesem sodann das Attribut headerLevel="3" übergeben. Wenn Sie statt headerLevel="3" beispielsweise headerLevel="6" angeben, sehen Sie auf Ihrer Website, dass die Module in der linken Spalte jetzt keine h3 Überschriften, sondern h6 Überschriften besitzen.

Gleiches gilt für Farbvariation als Attribute. Erweitern wir unseren Module Chrome dahingehend, dass er nun Farb Attribute aufnehmen und verarbeiten kann. Ist kein Farbattribut angegeben, soll "blau" der Standardwert sein:

<?php function modChrome_NameDesChromes( $module, &$params, &$attribs ) {
if (isset( $attribs['background'] )) {
  $background = $attribs['background'];
} else {
  $background = 'blue';
}
if (!empty ($module->content)) : ?>
<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
  <?php if ($module->showtitle) : ?>
    <h3><?php echo $module->title; ?></h2>
  <?php endif; ?>
<div class="<?php echo $background; ?>"><?php echo $module->content; ?>
</div>
</div>
<?php endif;
}
?>

Wie Sie sehen, geschieht das ganz einfach durch eine PHP if Abfrage. Zunächst wird überprüft, ob das Attribut "background" übergeben wurde und im Array $attribs enthalten ist. Wenn dies der Fall ist wird die Farbangabe in der Variable $background gespeichert, falls nicht, wird auf den Standardwert "blue" zurückgegriffen.

Die Variable wird an das den Modulinhalt enthaltene DIV als Klassenname übergeben und kann dann per CSS angesprochen und gestylt werden. Will man nun den Hintergrund des Moduls rot einfärben, kann man in der index.php des Templates einfach folgendes Code einfügen/editieren:

<jdoc:include type="modules" name="left" style="NameDesChromes" background="red" />

Sie können auch mehrere Attribute gleichzeitig übergeben (zB.: background="green", headerLevel="4"...)

Jetzt sind Sie eigentlich bestens ausgestattet, um Ihr eigenes Modul Chrome zu erstellen und in Ihr Template zu integrieren. Sie wissen, wie Sie den Chrome einbauen und aufrufen, wie die Grundfunktion aussieht, wie Sie auf Modul Parameter zugreifen und, wie Sie Attribute übergeben.

Weil es häufig erfragt wird, möchte ich Ihnen noch eine weitere Einsatzmöglichkeit der Modulchromes zeigen. Sie können damit nämlich auch den Inhalt eines Moduls verarbeiten, beispielsweise um die Überschrift eines Moduls zu splitten und das erste Wort des Titels anders zu stylen. Dies möchte ich Ihnen abschließend noch kurz erläutern:

Wie man das erste Wort eines Joomla Modul Titels anders stylt

<?php function modChrome_splitTitle ($module, &$params, &$attribs) {
    if (!empty ($module->content)) : ?>
        <div class="moduletable">
          <?php if ($module->showtitle) : ?>
            <h3>
            <?php
            $title = $module->title;
            $title = split(' ', $title);
            $title[0] = '<span>' . $title[0] . '</span>';
            $title = join(' ', $title);
            echo $title;
            ?>
            </h3>
          <?php endif;
          echo $module->content; ?>
        </div>
    <?php endif;
}
?>

Zunächst erfolgt wieder der Aufruf der nun bekannten Funktion, sodann die ebenfalls bekannten Abfragen, ob das Modul Inhalt enthält und der Titel angezeigt werden soll.

Dann kommt der neue Part: der Modultitel wird zunächst gesplittet, das erste Wort wird mit <span></span> umschlossen, der Rest des Titels wird hinzugefügt und dann der Titel ausgegeben.

Der Aufruf des Moduls geschieht über:

<jdoc:include type="modules" name="left" style="splitTitle" />

Bei dem Modultitel "Mein Titel" sähe das dann im HTML Quelltest so aus:

<div class="moduletable">
<h3><span>Mein</span>Titel</h3>
...Modulinhalt...
</div>
Jetzt kann das erste Wort des Modul Titels mittels CSS angesprochen und gestylt werden (.moduletable span {...}) und man hat eine flexible Möglichkeit geschaffen, das Template mit schönen Effekten und Variationen auszustatten.

Kommentare 

 
#1 Bambi 2010-08-23 13:53
Vielen Dank für diese küre übersichtliche und gute Einführung.

G Bambi
Zitieren
 
 
#2 Andreas 2010-11-09 13:29
Erstmal danke für diese Beschreibung sitze gerade bei einer Template Änderung und habe mir dabei die Zähne ausgebissen. Mal schauen ob ich es so einsetzen kann.

Gruß Andreas
Zitieren
 
 
#3 Klaus 2011-07-23 09:36
Herzlichen dank fuer die doch recht Umfassende Erlaeuterung !
Ich bin noch auf der Suche, wie man geteilte Hintegrundbilde r im ein Modul einfuegen kann.
Ich moechte eine Hintergrundgraf ik mit einer Sprechblase bei einem Newsfeed-modul hinterlegen. Der Haken ist das die Grafik aus entsprechend mehreren Teilen besteht, da die Sprechblase ja gemaess dem Inhalt wachsen oder schrumpfen muss.Also Konkret muss der Mittelteil der Sprechblase einen repeat-Y bekommen.
Leider ist mir die Vorgehensweise bei Modulen ueberhaupt nicht klar.

Gruss

Klaus
Zitieren
 
 
#4 gerfriedd 2011-09-21 11:29
Hallo.

Super Erläuterung um in dieses Thema "reinzukommen"

Frage:

Ich habe mir ein eigenes Modul Chromes somit angepasst, bekommen aber folgendes nicht hin ( auch nicht mit Google Recherchen ):

Ich brauche einen DIV Container um den content bei den Modulen, aber eben nicht bei der Navigation..

PHP Versuch ( absoluter Anfänger in Sachen PHP ):
function modChrome_mysty le($module, &$params, &$attribs)
{
$headerLevel = isset($attribs[ 'headerLevel']) ? $attribs['headerLevel'] : '3';

if (!empty ($module->content)) : ?>
">













versucht, aber meine if Abfrage ist definitv falsch.

jemand einen Tip ?

Danke im voraus

Gruß
gerfriedd
Zitieren
 
 
#5 gerfriedd 2011-09-21 11:31
[quote name="gerfriedd"]Hallo.

Super Erläuterung um in dieses Thema "reinzukommen"

Frage:

Ich habe mir ein eigenes Modul Chromes somit angepasst, bekommen aber folgendes nicht hin ( auch nicht mit Google Recherchen ):

Ich brauche einen DIV Container um den content bei den Modulen, aber eben nicht bei der Navigation..

PHP Versuch ( absoluter Anfänger in Sachen PHP ):

function modChrome_mysty le($module, &$params, &$attribs)
{
$headerLevel = isset($attribs[ 'headerLevel']) ? $attribs['headerLevel'] : '3';

if (!empty ($module->content)) : ?>
">
Zitieren
 
 
#6 gerfriedd 2011-09-21 11:33
Hallo.

Super Erläuterung um in dieses Thema "reinzukommen"

Frage:

Ich habe mir ein eigenes Modul Chromes somit angepasst, bekommen aber folgendes nicht hin ( auch nicht mit Google Recherchen ):

Ich brauche einen DIV Container um den content bei den Modulen, aber eben nicht bei der Navigation..

PHP Versuch ( absoluter Anfänger in Sachen PHP ):

function modChrome_mysty le($module, &$params, &$attribs) { $headerLevel = isset($attribs[ 'headerLevel']) ? $attribs['headerLevel'] : '3'; if (!empty ($module->content)) : ?> ">
Zitieren