Joomla Templates 1.5 - beez

In het vorige artikel zijn we aan het einde gekomen van de bespreking van het rhuk_milkyway template, een van de standaard templates van Joomla. Ik ga ervan uit dat je dat inmiddels hebt gelezen. We gaan nu kijken naar een aantal extra mogelijkheden van het beez template. Onderdelen die gelijk zijn zal ik achterwege laten.

Het instellen van 2 basisvariabelen: $url en $showRightColum
Het beez template heeft een aantal handige aanvullingen die goed zijn om te kennen. Bovenaan het template staat de volgende code:

Wat valt hiervan te leren?
$url
1) In de eerste regel wordt een variabele gevuld met een kopie van de waarde van het adres van de pagina. Door een kopie ervan te maken met clone() kan het bewerkt worden zonder dat het oorspronkelijke object wordt aangepast. Als je dat vergeet kan dit tot ongewenste effecten leiden. Waarom het hier gedaan wordt is echter niet duidelijk. Het wordt verderop in de pagina niet meer gebruikt. Misschien voor een volgende versie van het template?
$showRightColum
2) Hierna wordt gekeken of een van de vier modules (user1, user2,right,top) voorkomt. Zo ja, dan krijgt de variabele $showRightColumn de waarde 1: deze vier modules staan in de rechterkolom. Ze komen overeen met de nieuwsflash, het laatste nieuws, populaire berichten en de enquete. Als een of meer van deze modules voorkomen moet de rechterkolom getoond worden.
3) Vervolgens een tweede check, die controleert of de layout van de pagina ongelijk is aan een formulier (want dan is er onvoldoende plek voor de rechterkolom).
4) En een derde check of de taak van de pagina niet gelijk is aan ‘aanpassen’; hier geldt namelijk hetzelfde voor als bij de vorige check.
(Een kleine opmerking over het gebruik van ‘&=’: dit zorgt ervoor dat de oorspronkelijke variabele wordt geupdate.)

Een print stylesheet
Ten aanzien van de stylesheets heeft beez een interessante extra:een stylesheet voor het afdrukken van een pagina.

Door bij media Print in te vullen wordt het print.css stylesheet gebruikt als je de pagina wilt printen. Dit heeft het volgende effect…

Veelvuldig gebruik van JText()
In tegenstelling tot rhuk_milkyway gebruikt het Beez template veel vaker JText() om vertalingen te maken. Het gebruik van JText() hebben we eerder toegelicht in het vorige artikel van deze serie.

Het aanpassen van de fontgrootte
Rechts bovenin het template heeft beez een paar knopje om de fontgrootte van de pagina aan te passen.

Het stukje code maakt gebruik van twee javascript functies: changeFontSize() en revertStyles().
1) Aan changeFontSize() kan je een positieve of negatieve waarde meegeven. Bij een positieve waarde van 2 wordt de lettergrootte van de pagina 10% groter, bij een negatieve van -2 10% kleiner.
2) Met revertStyles() kan een bezoeker de oorspronkelijke instelling terughalen (terug naar 100%).
Het is zo geschreven dat je maximaal kunt vergroten naar 220% en minimaal kunt verkleinen naar 60% en dat je voorkeuren onthouden worden met behulp van een cookie. De precieze werking hiervan valt wat buiten de scope van deze serie. Wil je zelf weten hoe het werkt, bekijk dan de werking van deze functies via het javascript bestand javascript/md_stylechanger.js.

Wel of geen rechterkolom?
De variabele $showRightColumn wordt in de body van het document gebruikt om te switchen tussen verschillende classes: op regel 82 tussen contentarea en contentarea2 en op regel 90 tussen main en main2. Het switchen gebeurt met het volgende stukje code:

De php notatie “? :” in het bovenstaande stukje code kan je als volgt verwoorden: “Test op de variabele $showRightColumn. Als die gelijk is aan 1, print dan contentarea2. Als die gelijk is aan 0, print dan contentarea.” Deze handige techniek geeft je dus compacte code. De variabele $showRightColumn is nu een soort schakelaar geworden waarmee je kan wisselen tussen verschillende ’standen’ van het template.
In het position.css stylesheet kan je zien dat het verschil tussen deze twee varianten is dat de ene class wel een breedte heeft en de andere niet.

Op regel 103 wordt het nog een keer gebruikt om een heel blok code wel of niet te laten zien.

Hier staat: als $showRightColumn gelijk is aan 1 pas dan alle code toe die volgt tot aan ‘end if’ (regel 117).

De grootte van de headers
Er is nog een interessant verschil tussen beez en rhuk_milkyway: het instellen van de grootte van de headers. Het is je misschien opgevallen dat in de jdoc:includes van deze pagina er een extra mogelijkheid is die wordt gebruikt: headerLevel. Dit kan je gebruiken om de titel van de module een grootte mee te geven. Vul je een 3 in, dan wordt de titel omsloten met H3 tags. Vul je een 2 in, dan worden dat H2 tags.

Tot slot: de unseen class
Tot slot nog 1 leuke feature van dit template: de unseen class. Soms wil je als ontwerper wel wat teksten in je template opnemen tijdens het ontwikkelen, die je na oplevering niet wilt tonen. Dat lijkt hier ook het geval. De ontwerper heeft hiervoor de unseen class bedacht. Een kijkje in position.css (regel (104) leert dat hier de volgende code achter zit:

Dit maakt dat deze tekst volledig uit beeld is. Zou je dit wel laten zien, dan zie je pagina er zo uit:

Tot zover
Je ziet dat het beez template een aantal leuke extra’s heeft. Minder opmaak, maar wel wat slimmer in het gebruik dan het rhuk_milkyway template. Dit is het laatste artikel in deze basis-serie.