Tutorial: Maak je eigen Joomla! template overrides

Onderstaand artikel heb ik reeds eerder geschreven voor het Web Designers Magazine en is verschenen in uitgave 18.

In uitgave 13 van het Web Designer magazine heb je kunnen lezen hoe je een Joomla! template kan bouwen aan de hand van een Photoshop-ontwerp. In deze tutorial gaan we verder in op het werken met Joomla! templates en gaan we de mogelijkheden verkennen van Joomla! template overrides, een krachtige mogelijkheid om de standaard Joomla! output naar eigen wens aan te passen.

Wellicht ben je het al eens tegengekomen tijdens het bouwen van een Joomla! website, de opbouw van bijvoorbeeld artikelen gebeurt altijd volgens een vast stramien; titel - auteur - publicatiedatum - inhoud - bewerkingsdatum. In- en uitschakelen van de diverse onderdelen is mogelijk, maar de volgorde aanpassen niet. Ook zul je bij het bestuderen van de broncode zien dat er, om de content weer te geven, nog veel tabellen worden gebruikt. Met het oog op de webrichtlijnen (www.webrichtlijnen.nl) kan de pagina beter opgebouwd worden aan de hand van div-tags.

Gelukkig is er sinds Joomla! 1.5 de mogelijkheid om zogenaamde ‘template overrides’ te gebruiken. Met template overrides maken we eigenlijk templates voor de output van Joomla! componenten en modules. Voorwaarde is wel dat de extensie is opgebouwd aan de hand van het Joomla! MVC-model (model-view-controller). Met template overrides bevinden we ons in het view gedeelte van dit model. De bestaande views kunnen we aanpassen als deze niet naar wens zijn, we doen dit echter niet in de broncode van de extensie zelf maar in de template map. Op deze wijze voorkomen we dat er zelf aangebrachte wijzigingen in de code verloren gaan met eventuele updates.

In de tutorial gaan we de standaard Joomla! template ‘rhuk_milkyway’ optimaliseren en gaan we voor de sectieblog weergave een eigen template override maken waarbij enkele mogelijkheden de revue passeren.

01 Aanmaken sectieblog pagina

We starten met het aanmaken van een pagina die we gaan bewerken met template overrides. In de Joomla! backend maken we een sectie aan welke we ‘CMS Nieuws’ noemen. Hierin maken we vier categorieën aan; ‘Joomla!’, ‘Drupal’, ‘WordPress’ en ‘Typo3’. In deze categorieën plaatsen we meerdere artikelen om vulling aan de sectie te geven. Als dit gedaan is maken we een ‘Weergave sectieblog’ menu-item aan. Dit type menu toont alle artikelen binnen een bepaalde sectie in een blog weergave. We stellen in dat er 0 hoofdartikelen en 15 intro-artikelen worden weergeven, verdeeld over 3 kolommen. Voor de ‘Primaire sortering’ stellen we in dat de meest recente artikelen eerst worden weergeven. Als laatste stellen we het modulebeheer zo in dat er op onze aangemaakte pagina’s geen modules worden weergeven aan de rechter- en/of linkerzijde. Zo kunnen we de volledige breedte van de website benutten.
Als we de aangemaakte pagina bekijken zien we dat de artikelen verdeeld worden over 3 kolommen in de standaard Joomla! opmaak. Tijd om hier verandering in te brengen door met de template overrides aan de slag te gaan.

02 Weg met de Joomla! tabellen!

We gaan er eerst voor zorgen dat er in de opbouw van de Joomla! pagina’s geen tabellen meer voorkomen en de pagina’s volledig opgebouwd worden aan de hand van div-tags. Het is veel werk om alle views van Joomla! te ontdoen van tabellen. Gelukkig heeft de Joomla! template club Yootheme al een hoop werk voor ons gedaan. Zij hebben een template overrides set beschikbaar gesteld aan de community die we gratis kunnen downloaden. Je kunt het pakket downloaden van //bit.ly/overrides.

03 Template Overrides set installeren

Na het downloaden en uitpakken van het ZIP-bestand passen we deze set toe op de template ‘rhuk_milkyway’. Kopieer ‘css/joomla.css’ en ‘css/joomla-ie6.css’ naar de map ‘templates/rhuk_milkyway/css/’. Vervolgens is kopiëren we de inhoud van de map ‘html’ naar de map ‘templates/rhuk_milkyway/html/’.
We moeten er nu alleen nog voor zorgen dat de CSS bestanden geladen worden binnen de template. Hiervoor voegen we een aantal regels toe binnen het <head> gedeelte van het bestand ‘index.php’ van de template, achter de andere stylesheets die al geladen worden.

<link rel="stylesheet" href="/templates//css/joomla.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="/templates//css/joomla-ie6.css" type="text/css" />
<![endif]-->

04 Bekijk het verschil

Als we nu naar de site kijken zien we dat het een en ander er net even iets anders uitziet. Door de nieuwe css bestanden zijn een aantal letters wat groter geworden en wordt er bij bepaalde onderdelen een andere afstand aangehouden. Dit is eventueel door aanpassingen in het bestand ‘joomla.css’ weer te veranderen.
Een groter verschil is echter waarneembaar als we de broncode van de pagina vergelijken. Kijken we bijvoorbeeld naar een klein deel van de broncode waar eerst dit stond:

<table class="contentpaneopen">
 <tr>
  <td class="contentheading" width="100%">Joomla! Community Portaal</td>
  <td align="right" width="100%" class="buttonheading">
   <a href="/url" title="PDF"><img src="/url" alt="PDF"/></a>
  </td>
 </tr>
</table>

<table class="contentpaneopen">
 <tr>
  <td valign="top"><span class="small">Geschreven door Administrator</span></td>
 </tr>
 <tr>
  <td valign="top" class="createdate">zaterdag, 07 juli 2007 09:54</td>
 </tr>
</table>

zien we dat de broncode gewijzigd is in:

<div class="joomla ">
 <div class="article">
  <div class="headline">
   <h1 class="title">Joomla! Community Portaal</h1>
   <span class="icon pdf">
    <a href="/url" title="PDF"><img src="/url" alt="PDF"/></a>
   </span>
  </div>
 <p class="articleinfo">
  <span class="created">zaterdag, 07 juli 2007 09:54</span>
 </p>

Zoals we kunnen zien zijn de tabellen verdwenen. Daarnaast wordt de pagina nu netjes opgebouwd volgens een h1, h2, h3 structuur, wat weer goed is voor de zoekmachine optimalisatie van de website. De diverse elementen krijgen ook allemaal netjes een klasse mee waardoor we met CSS meer controle kunnen uitoefenen op het uiterlijk van de pagina.
De enige tabellen die we nu nog in de broncode van de pagina kunnen tegenkomen zijn degene die in ‘index.php’ van ‘rhuk_milkyway’ staan. Als je een template gebruikt die zonder tabellen is opgebouwd en je gebruikt deze overrides set, zal de broncode van Joomla! nu volledig vrij van tabellen zijn.

05 Aanmaken override bestand

Nu we de basis van de output van de Joomla! componenten en modules in orde hebben gemaakt gaan we zelf een eigen template override maken. Dit gaan we doen voor de weergave van een artikel binnen de sectieblog pagina. Het bestand ‘blog_item.php’ dat hiermee gemoeid is staat in de map ‘templates/rhuk_milkyway/html/com_content/section/’. Het bestand komt uit de overrides set. Omdat we een eigen output gaan maken verwijderen we de huidige inhoud van het bestand. Als dit gedaan is plaatsen we, onderstaande code, die er voor zorgt dat alleen de titel en het artikel zichtbaar worden.

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
$canEdit = ($this->user->authorize('com_content', 'edit', 'content', 'all') 
|| $this->user->authorize('com_content', 'edit', 'content', 'own'));
?>

<div class="artikel">	
 <div class="headline">
  <h2 class="titel">
   <a href="/<? php echo $this->item->readmore_link; ? >">
    <?php echo $this->escape($this->item->title); ?>
   </a>
  </h2>
 </div>
 <?php echo $this->item->text; ?>
</div>

06 Aantal tekens bericht limiteren

Per artikel willen we dat alleen de eerste 300 tekens zichtbaar zijn. Bestaat een artikel uit meer tekens moet het artikel automatisch ingekort worden en een ‘lees verder’ link worden getoond. Tevens willen we dat de ‘lees verder’ link een title-attribuut meekrijgen, die getoond wordt als ‘Klik om [titel van artikel] verder te lezen’. De intro tekst geven we een klasse mee welke we later voor de opmaak gebruikt kan worden. We vervangen de huidige regel “<?php echo $this->item->text; ?>” door onderstaande code.

<div class="content">
 <?php
  $limit =300;
  if (strlen($this->item->text) > $limit) {
   echo (substr($this->item->text, 0, $limit)) . '...'. ' 
   <a title="Klik om \''.($this->item->title).'\' verder te lezen" 
   href="'. ($this->item->readmore_link) .'" class="readmore"> '.'lees verder'.' 
   </a></p>';
  }
  else {
   echo $this->item->text;
  }
 ?>
</div>

07 Eenmalig de dag en datum tonen

Normaal gesproken wordt bij een artikel de publicatiedatum en tijd per artikel weergeven. Op onze pagina willen we dat iets anders doen. Op onze website worden er dagelijks meerdere artikelen geplaatst. Boven het eerste artikel op een datum willen we daarom eenmalig de dag en datum tonen, bij andere artikelen van dezelfde datum daarna niet meer. Hiervoor voegen we een stukje PHP toe na de regel “defined('_JEXEC') or die('Restricted access');”. In dit stukje code beschrijven we op welke wijze de datum getoond moet worden en dat de datum eenmalig zichtbaar mag zijn.

// Instellingen voor datum weergave
$Datum = JHTML::_('date', $this->item->created, '%A %d %B %Y');

// Onthouden welke datum we al gebruikt hebben
if (!isset($this->usedDates)) :
 $this->usedDates = array();
endif;

// Hebben we die datum al weergeven?
$toonDatum = !isset($this->usedDates[$Datum]);

// Instellen dat we datum getoond hebben
$this->usedDates[$Datum] = true;

Voor de regel “<div class="artikel">” voegen we nu een if-statement toe waarmee de dag en datum worden getoond. De datum krijgt tevens een klasse voor de opmaak mee.

<?php if ($toonDatum) :?>
	<div class="datum"><?php echo $Datum; ?></div>
<?php endif; ?>

08 Publicatietijd voor artikeltitel tonen

Nu we de dag en datum getoond hebben willen we het publicatietijd per artikel voor de titel weergeven. Achter de regel waarin we de instelling voor de datum weergave hebben beschreven voegen we nu ook een regel voor de tijd toe.

$Tijd = JHTML::_('date', $this->item->created, '%H:%M');

Voor de “<h2 class="titel">” tag plaatsen we nu een regel waarmee het publicatietijd in een div-je voor de titel getoond wordt, wederom met een klasse voor de opmaak.

<div class="tijd"><?php echo $Tijd; ?></div>

09 Opmaken van de pagina

De diverse elementen die we op de pagina willen tonen hebben we zichtbaar gemaakt, tijd om deze elementen van opmaak te voorzien. Aan het bestand ‘template.css’ in de map ‘templates/rhuk_milkyway/css/’ voegen we onderstaande CSS code toe. Hierin worden de diverse elementen opgemaakt, dit is natuurlijk naar eigen wens aan te passen.

/** Begin template override styling **/

h2 {
 margin: 0px;
 display: inline;
 }

div.datum {
 background: #135CAE;
 color: #FFFFFF;
 font-size: 120%;
 text-align: center;
 padding: 5px;
 margin: 0 10px 0 0;
}

div.tijd {
 font-size: 170%;
 color: #888888;
 display: inline;
}

div.headline {
 background: #EEEEEE;
 padding:5px;
 text-align: left;
}

div.content {
 text-align: justify;
 margin: 5px 0 15px 0;
}

a.readmore {
 font-weight: bold;
}

div.artikel {
 margin: 0 10px 0 0;
}

Daarnaast passen we in het bestand ‘joomla.css’ in de map ‘templates/rhuk_milkyway/css/’ de grootte van “div.joomla h2" aan, van 250% naar 170%.

10 Weergave van categorie iconen

Op onze sectieblog pagina zullen berichten verschijnen die over Joomla!, Drupal, WordPress of Typo3 gaan. Voor de herkenbaarheid zou het leuk zijn als we naast de titel van het artikel het logo kunnen tonen van het betreffende CMS. In onze eerste stap hebben we de artikelen per CMS in een categorie geplaatst, daarom kunnen we hier een trucje mee uithalen.
We vragen de titel van een categorie op en plaatsen die in een klasse. Zo kunnen we de specifieke klasse met behulp van CSS styling opmaken. De div krijgt een klasse de vorm van ‘icon-XX’, waar XX staat voor de id van de categorie waar het artikel in staat. In het template override bestand plaatsen we na de regel “<div class="headline">” code die er voor zorgt dat er een div tag met link naar een categorieblog weergave wordt geplaatst. De link krijgt ook een title-attribuut mee welke ‘Bekijk alle items van [titel categorie]’ als formaat heeft.

<?php echo '<a title="Bekijk alle items van '.($this->item->category).'" 
href="'.JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->catslug, 
$this->item->sectionid)).'">'; ?>
<div class="icon-"></div>
<?php echo '</a>'; ?>

11 Categorie logo’s opmaken

Nu moeten we de juiste logo’s aan de juiste categorie-id’s koppelen. In het categorie overzicht van de Joomla! backend vinden we de id’s terug van de gebruikte categorieën. In mijn geval heeft Joomla! id 34, Drupal id 35, WordPress id 36 en Typo3 id 37. Om de http-requests te reduceren hebben we één png afbeelding gemaakt van 80px bij 80px waarin alle logo’s van de CMS systemen staan. De afmeting van elk logo afzonderlijk is 40px bij 40px. Deze afbeelding hebben we in de map ‘images’ van de template geplaatst.
Nu we deze informatie hebben kunnen we de CSS code opmaken voor de weergave van de logo’s. Voeg onderstaande code toe aan het bestand ‘template.css’ onder de code die we reeds eerder hebben toegevoegd.

div.icon-34, div.icon-35, div.icon-36, div.icon-37 {
 width: 40px;
 height: 40px;
 float: right;
 margin-left: 5px;
 background-image: url(../images/cms-logos.png);
}

div.icon-34 {background-position: 0px 0px;}
div.icon-35 {background-position: 40px 0px;}
div.icon-36 {background-position: 0px 40px;}
div.icon-37 {background-position: 40px 40px;}

En voilà, zie daar de logo’s naast de titels verschijnen!

12 Aan de slag!

We hebben nu een aantal mogelijkheden van template overrides bekeken. Tijd om nu zelf aan de slag te gaan en te experimenteren, wees creatief! Je zou bijvoorbeeld op gelijke wijze een foto van de auteur kunnen tonen, of artikelen uit dezelfde categorie dezelfde achtergrond geven aan de hand van het categorie-id, of... inderdaad, mogelijkheden genoeg!

Je zult wel de updates van Joomla! in de gaten moeten houden. Soms worden er in de template veiligheidsaanpassingen gemaakt die ook voor je eigen template overrides gelden. Zorg er dan voor dat je de aanpassingen ook in je overrides verwerkt. Mocht je template overrides toepassen of CSS aanpassingen maken aan een van de standaard Joomla! templates, zoals we nu gedaan hebben, moet je opletten dat die bij Joomla! updates niet worden overschreven.

Een werkend voorbeeld van de template override, de gebruikte code, links naar andere voorbeelden en handige tips zijn te vinden op www.joomlacommunity.nl/WebDesigner18. Laat daar ook je eigen creaties en eventuele trucs achter, ik ben benieuwd!

IN DETAIL: Opbouw van de html map

Het is goed om de opbouw van de template overrides map structuur te begrijpen voordat je een eigen template overrides gaat maken. Binnen de template map komen de template overrides bestanden in de map ‘html’ te staan. Joomla! zal altijd eerst nagaan of er in deze map bestanden aanwezig zijn voordat er terug wordt gevallen op de oorspronkelijk bestanden.

Als je met template overrides begint te werken is het verstandig om de bestaande view bestanden van een extensie als basis te nemen en die verder naar wens aan te passen.

In de map ‘html’ van je template maken we een map aan welke de naam heeft van de extensie, bijvoorbeeld ‘com_content’. In deze map maken een map aan voor de view die we gaan aanpassen, als voorbeeld nemen we nu ‘section’. In deze map plaatsen we het viewbestand. De weergave van een item in de sectieblog staat oorspronkelijk in ‘components/com_content/views/section/tmpl/blog_item.php’. Bij een template override komt dit bestand te staan in ‘templates/naam_template/html/com_content/section/blog_item.php’.

Doen we hetzelfde met de weergave van een weblinks categorie wordt het bestand in ‘components/com_weblinks/views/category/tmpl/default.php’ gekopieerd naar ‘templates/naam_template/html/com_weblinks/category/default.php’.

Vanaf de map ‘com_weblinks’ gezien laten we de ‘views’ en ‘tmpl’ map weg. Deze wijze van structurering is gelijk voor elke extensie zolang die is opgebouwd aan de hand van het Joomla! MVC model. Overigens is het verstandig om in elke map een blanco ‘index.html’ bestand te plaatsen om te voorkomen dat de mapstructuur bekeken kan worden.