Joomla Template Parameter

  • Gelesen 47730 mal
Artikel bewerten
(10 Stimmen)

Wir bauen uns eine Template-Steuerung über die Parameters. Keine Angst, dafür muss man kein Programmierer sein.

 

Template-Parameters

In den Tutorial-Seiten zuvor haben wir ausführlich die Basis-Arbeiten für ein neues Template besprochen. In den meisten Fällen wird dieses Wissen völlig ausreichen. Jedoch stehen uns weit aus mehr Möglichkeiten zur Verfügung als wir mit einem Blick erfassen können. So widmen wir uns im nächsten Teil ein paar kleinen Erweiterungen die wir ohne große Mühe bewerkstelligen können. Hauptsächlich geht es mir darum, wie die Dinge miteinander "zusammen geschaltet sind", weniger darum wie sinnvoll sie an sich sind.

Die Aufgabe

Wir schaffen uns eine Möglichkeit das Header-Bild der Webseite mit ein paar Klicks über das Joomla Backend zu wechseln.

Was benötigen wir dafür?

  1. einen Schalter, der für die Wechsel zuständig ist
  2. ein paar Header-Bildchen
 

Schalter einbauen

Erinnern wir uns an die templateDetails.xml, die für dieses Template unsere Steuerungsdatei ist. Das war der obere Teil über das Template und den Autor, der mittlere Teil in dem es um die Installation ging und zu guter Letzt der Teil in dem wir die Positionen steuern können. Die templateDetails.xml bohren wir noch ein wenig auf und übergeben ihr noch einen Steuerungsteil, vergleichbar mit dem Armaturenbrett im Auto (aufblenden, abblenden).

Also fügt bitte den folgenden Teil an das Ende besagter .xml jedoch oberhalb vom schließenden </extension> Tag.

Joomla 1.6 bis Joomla 3.0

  <!-- Parameter Block start -->
  <config>
    <fields name="params">
      <fieldset name="advanced">
      <field name="unser_header_bild"
					type="media" 
					default=""
					label="TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_LABEL"
					description="TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_DESC"
					filter="string" 
					/>
      </fieldset>
    </fields>
  </config>
  <!-- Parameter Block ende --> 

Das sieht dann so aus:

Joomla 3.0

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> 
<!-- MUSS Seit Joomla 1.6 ist der Installer universell. Also wichtig, version="2.5" type="template" client="site" angeben -->
<extension
	version="3.0"
	type="template"
	client="site"> 
  <!-- SOLLTE, Der Annzeige-Name in Joomla -->
  <name>test_template</name>
  <title>test_template</title>
  <!--SOLLTE Erstellungsdatum -->
  <creationDate>11.04.13</creationDate>
  <!-- SOLLTE, Wer ist der Urheber -->
  <author>Joomla-Templates</author>
  <!-- SOLLTE, für ausgelieferte Templates immer eine Kontakt-E-Mail-Adressse -->
  <authorEmail>info(at)joomla-templates.de</authorEmail>
  <!-- SOLLTE, klar, die Webseite gehört dazu -->
  <authorUrl>http://www.joomla-templates.de</authorUrl>
  <!-- SOLLTE, die eigene Versionsnummer des Templates -->
  <version>1.0.0</version>
  <!-- SOLLTE, Die Template-Beschreibung wird hier als Joomla language mit einem Platzhalter versehen. In diesem Template-Ordner befindet sich die Sprachdatei in der TPL_TEST_TEMPLATE_XML_DESCRIPTION hinterlegt ist -->
  <description>TPL_TEST_TEMPLATE_XML_DESCRIPTION</description>
  <!-- MUSS, der Files-Tag bezeichnet den Block mit den Dateien und Ordnern die mit installiert werden -->
  <files> 
    <!-- Der Folder-Tag weist Joomla an, den Ordner bspw. html samt dem Inhalt im Template-Ordner zu Speichern -->
    <folder>html</folder>
    <folder>css</folder>
    <folder>images</folder>
    <folder>language</folder>
    <folder>js</folder>
    <!-- MUSS, die Hauptdatei für die Ausgabe des Templates -->
    <filename>index.php</filename>
    <!-- MUSS, jeder Ordner in Joomla ist mit einer Dummy-Html ausgestattet, so werden Server Fehlermeldungen verhindert, falls sich doch ein Webseitenbesucher in ein Verzeichnis verirrt -->
    <filename>index.html</filename>
    <!-- SOLLTE, das Browser-Tab icon macht sich immer gut -->
    <filename>favicon.ico</filename>
    <!-- MUSS, diese Datei muss natürlich mit installiert werden -->
    <filename>templateDetails.xml</filename>
    <!--SOLLTE, im Joomla Backend in der Template-Verwaltung wird dieses Bild vom Layout angezeigt. Am besten einen Screenshot der Webseiten Vorlage einfügen oder wenn die Seite fertig ist ein Browser-Screeensho -->
    <filename>template_thumbnail.png</filename>
    <!-- SOLLTE, in dieser Datei kann eine individuelle Fehlerseite erstellt werden (404) -->
    <filename>error.php</filename>
  </files>
  <!-- MUSS, das sind letztendlich die Positionen an die die Module geschickt werden-->
  <positions>
    <position>meine-topposition</position>
    <position>linke-position</position>
    <position>brotkrumen</position>
    <position>zu-guter-letzt</position>
    <position>so-soll-die-positon-heissen</position>
    <position>neuigkeiten</position>
    <!-- <position>ich-kann-später-noch-weitere-positionen-einfügen</position> --> 
  </positions>
  <!--Sollte, Sollten unterschiedliche Sprachen genutzt werden, ist hier der richtige Platz um diese zu installieren-->
  <languages folder="language">
  	<language tag="de-DE">de-DE/de-DE.tpl_test_template.sys.ini</language>
  	<language tag="de-DE">de-DE/de-DE.tpl_test_template.ini</language>
  	<language tag="de-DE">en-GB/en-GB.tpl_test_template.sys.ini</language>
  	<language tag="de-DE">en-GB/en-GB.tpl_test_template.ini</language>
  </languages>
  <!-- Parameter Block start -->
  <config>
    <fields name="params">
      <fieldset name="advanced">
      <field name="unser_header_bild"
					type="media" 
					default=""
					label="TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_LABEL"
					description="TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_DESC"
					filter="string" 
					/>
      </fieldset>
    </fields>
  </config>
  <!-- Parameter Block ende --> 
</extension>

Wie der obige ist xml-Teil vermuten lässt, ist es mit der Sonnenschein-Programmierei vorbei. Eine Entscheidung muss her. Möchte ich den Part zwischen <config> und </config> verstehen und können oder reicht nicht ein einfaches Nachmachen? Ich denke, einfach nachmachen und es so hinnehmen wie es ist, das schont hier unsere Zeit. Dennoch möchte ich auf die wichtigsten Attribute kurz eingehen, die werden euch joomlaweit immer wieder begegnen. Keine Sorge, den Teil den wir wissen müssen, ist leichter als gedacht.

Richten wir unseren Fokus auf <field> und </field>, denn dies ist unser eigentlicher Schalter.

  • name="" Systemwichtig
    Das name="" Attribute ist der Name für den Schalter mit dem wir das Header-Bild austauschen. Im Auto ist dies der Lichtschalter. Der Name kann frei gewählt werden, aber bitte beachtet hier die Schreibweise, keine Sonder- und Lerrzeichen.
  • type="media" Systemwichtig
    Ist dafür zuständig, dass wir die Bilder aus dem joomla-root/images Ordner auswählen können
    Vielleicht für ein besseres Verständnis: Joomla stellt diverse Formular-Element wie Buttons mit spezieller Funktion oder andere Formulare-Elemente als Formular-To-Go(..ja, wie fix nen Kaffee holen) zur Verfügung.
  • label="" Usabiltity Sprachen
    Dies ist 1:1 der Inhalt, welcher html-Tag "<label>..." Formularelemente verwendet wird. Also hier ein kurzes und einprägsames Wort eintragen
  • description="" Usabiltity Sprachen
    Wie der Name schon sagt, "Beschreibung", Ihr werdet es sicher kennen, fährt man mit der Maus über ein Formular-Element, erscheint dezent eine Information. Hier sollten ein paar beschreibende Informationen hinterlegt werden bspw. warum das Feld, was macht es, worauf soll der Admin achten usw.

Ein neugieriger Blick ins Joomla-Backend und direkt in unser Test-Template zeigt uns im rechten Teil (allgemein Parameter) eine Veränderung an. Optimal, wir haben "Erweiterte Optionen" bekommen und wir können etwas auswählen. Aber nur was? Das Label und der Tooltip sehen katastrophal aus. Also machen wir fix die Bezeichnungen ordentlich. Dafür öffnen wir mit dem Editor die die Datei: joomla-root/templates/test-template/language/de-DE/de-DE.tpl_test_template.ini. Damit es schneller geht kopiert ihr die folgenden 2 Zeilen jeweils in eine neue Zeile.

TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_LABEL="Header-Bild"
TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_DESC="Es kann ein neues Headerbild für die Webseite verwendet werden. Die Bilder werden im Joomla Image Ordner ausgewählt oder können heraufgeladen werden"

Nun die .ini Speichern und ein Browser-Refresh (F5). Die Ergebnisse werden für sich sprechen. Die Beschreibung und das Label könnt ihr anpassen wie ihr wollt, ein paar Trainingsrunden mit kleinen Veränderungen sind für den Lernerfolg sicher hilfreich. Bitte auch gleich den "Auswählen" Button auf Funktion testen, speichern, aktualisieren (die üblichen Runden zum Thema "läuft das, was ich geändert habe, so wie es soll").

Den ersten Abschnitt zum Thema eigene Template Parameter haben wir soweit absolviert. Die Bereitstellung der Einstellung im Backend ist zwar da, nur wird im Frontend unsere Mühe nicht honoriert. Darum kümmern wir uns jetzt und nehmen uns unsere Template index.php vor.

Wir arbeiten in diesem Ausdruck weiter...

<div class="headerlogo" > &nbsp; </div>

...und ersetzten dies mit folgendem Part

<div class="headerlogo" ><?php echo $this->params->get('unser_header_bild','sauerei, der Admin hat das Bild vergessen');?> </div>

Speichern und Browser-Refresh!

Je nachdem welches Bild ihr ausgewählt habt, wird im Frontend nun ein relativer Pfad angezeigt. Bei mir ist es images/joomla_black.gif. Das hat geklappt. Nun noch den html image-Tag gezielt einsetzen

So ist es

<div class="headerlogo" ><?php echo $this->params->get('unser_header_bild','Sauerei, der Admin hat das Bild vergessen');?></div>

So soll es

<div class="headerlogo" ><img title="Unser tauschbares headerbild" alt="Hier fehlt leider das Bild, ein guter Grund den Admin zu informieren" src="/<?php echo $this->params->get('unser_header_bild');?>" /></div>

Testen, und es sollte geklappt haben.

Die beiden Schritte zuvor haben leider keine Fehler-Bremse. Sollte hier einmal das Bild fehlen, weil es versehentlich gelöscht wurde oder es wurde kein Bild im Backend gewählt, sieht die Seite liederlich aus.

So ist es

<div class="headerlogo" ><img title="Unser tauschbares headerbild" alt="Hier fehlt leider das Bild, ein guter Grund den Admin zu informieren" src="/<?php echo $this->params->get('unser_header_bild');?>" /></div>

So soll es

<div class="headerlogo" >
    <?php if ( $headerBildchen = $this->params->get( 'unser_header_bild' ) ):
    if ( JFile::exists( $headerBildchen ) ): ?>
    <img title="Unser tauschbares headerbild" alt="hier ist was nicht in Ordnung ;-)" src="/<?php echo $headerBildchen; ?>" />
    <?php else: ?>
    <h2>Das Bild wurde zwar im Backend eingtragen, leider scheint es gel&ouml;scht worden zu sein.</h2>
    <?php endif;
    else: ?>
    <h2>Der Administrator dieser Webseite hat leider unser Header Bildchen vergessen.</h2>
    <?php endif; ?>
</div>
 

Geschafft

Zu diesem Kapitel möchte noch ein paar Anmerkungen anfügen.
Die Bauweise oder Machart von Template-Parametern ist vom grundsätzlichen Aufbau immer die selbe. In unserer xml schaffen wir die Voraussetzungen. Im Backend stellen wir die Parameter ein und über die index.php geben wir das ganze aus. Wir hatten diese 3 Schritte in ähnlicher Weise bei der Erstellung unseres Basis-Templates. Dadurch dass wir bei den Parametern ein wenig tiefer in die Programmstruktur eintauchen, ist es sicher ratsam einen PHPler oder erfahrenen Joomlaner abschließend das Template zu zeigen. Er wird gegebenenfalls die if else Anweisung und die Filter- Einstellung in der xml anpassen.

Letzte Änderung am Montag, 23 September 2013 14:16