Verslag JUG Eindhoven 23 september

Gepubliceerd: 23 september 2025.Door: Hans Kuijpers.Categorie: Eindhoven.

De dagen worden merkbaar korter en kouder. Tijd gaat net wat te snel en voor je het weet is de week weer voorbij. Daarom geen presentatie, maar een demo die de basis zal leggen voor de presentatie Template Overrides van de JoomlaDagen. ;-)

Template Overrides

Vrijdag 3 en zaterdag 4 oktober zijn er de JoomlaDagen. Hans Kuijpers geeft er een presentatie over template overrides. Tijdens deze editie van de JUG040 Online laat hij middels een demo zien wat er voorbij kan komen.

Joomla is zo opgebouwd dat er een verschil is tussen het ophalen van informatie en het tonen van informatie. Het ophalen van informatie gaat via Models en Controllers. Het tonen van informatie gaat via Views. De Views geven hun informatie aan bestanden in de tmpl directory, die het vervolgens op scherm tonen. Door het plaatsten van de bestanden uit de tmpl directory in je eigen template kun je invloed uitoefenen hoe de informatie in jouw template getoond wordt. Dit noemen ze een template override.

De meest bekende template override is de template zelf. Standaard wordt Joomla aangeboden met Cassiopeia en wereldwijd zijn er legio Joomla websites die er toch anders uitzien dan Cassiopeia. Met de installatie en toepassen van een nieuw template overschrijf je de standaard look & feel van Joomla. De standaard Cassiopeia template meer naar eigen hand zetten gaat ook. Om te voorkomen dat doorgevoerde wijzigingen verloren gaan bij een volgende update is het met Joomla mogelijk te werken met Child Templates. Bij het tonen van de website wordt eerst gekeken naar jouw standaard child template, dan naar de parent template en als laatste naar de tmpl directory van het component. In je child template maak je de template overrides.

Het maken van een template override kan op twee manieren:

via een interface in Joomla Administrator
Klik op "Maak override" in het overzicht "details en bestanden" van je template.
via de bestanden zelf
Kopieer een bestand uit de tmpl map naar de gelijknamige plek in de html directory van je template.

Werk je graag vanuit Joomla Administrator of heb je te weinig kennis om via bestanden te werken is de eerste mogelijkheid aan te raden. Wat Hans als nadeel ervaart is dat er vaak te veel gekopieerd wordt. Je kiest vanuit de admin interface om een override te maken van een bepaalde view en krijgt daarmee alle bestanden uit die directory mee. Bij het maken van een override op een JLayout van Joomla/Content zijn dit direct 15 bestanden en twee directories met daarin ook nog eens een aantal bestande. En dit terwijl je bijvoorbeeld alleen een override wilde maken van Joomla/content/info_block.php om daarmee de meta data bovenaan een artikel te wijzigen.

Werk je vanuit de bestanden dan heb je meer controle en kopieer je het bestand layouts/joomla/content/info_block.php naar templates/[jouw-template]/html/layouts/joomla/content/info_block.php. Slechts één bestand.... die niet gaat werken als je een tikfout gemaakt hebt in de aanmaak van de directory structuur. Je moet dus wel opletten... meer controle, maar ook zorgvuldig blijven werken.

Voorbeeld 1 ... template override voor button

Als voorbeeld .... de button 'inloggen' op https://cassiopeia.joomla.com/login

Deze Cassiopeia demo website is gevuld met blog sample data. Op de pagina login staat er een button over de gehele breedte met de tekst "Sign in with a passkey". De button met de tekst "Log in" staat er een beetje klein onder. Het zou mooi zijn als deze ook over de gehele breedte staat. En dat kan. Vanuit Joomla Administrator > Systeem > Templates > Website Templates > Cassiopeia Child gegevens en bestanden > tabblad 'Maak overrides' > com_users - login. De php bestanden van de directory components/com_users/tmpl/login zijn nu gekopieerd naar templates/cassiopeia_child/html/com_users/login. Hetgeen je wil wijzigen zit in het bestand default_login.php op regel 107. Cassiopeia is gemaakt met Bootstrap 5. Om een element een breedte van 100% mee te geven voeg je de className `w-100` toe. Zie codevoorbeeld hieronder. Met deze wijziging zal de button zich over het geheel uitstrekken.

<button type="submit" class="btn btn-primary w-100">
    <?php echo Text::_('JLOGIN'); ?>
</button>

Voorbeeld 2 ... Custom fields plaatsen op de plek waar jij wil.

Met het maken van custom fields kun je op het tweede tabblad bij "Automatische weergave" aangeven waar deze geplaatst moet worden. Standaard komt de output van de custom field direct na de titel. Omdat ik graag controle heb waar en hoe een custom field op de website moet verschijnen zet ik de positie op "Niet automatisch weergeven". Ik moet er dan via een template override voor zorgen dat de output op het scherm komt.

Hieronder stapsgewijs hoe je met var_dump() aan de slag kunt gaan. :-)

Als voorbeeld de custom field "About the Author" uit de blog sample data van Joomla.

Deze is zichtbaar onderaan de pagina https://cassiopeia.joomla.com/blog/about-your-home-page tussen de button "< prev" en het blok met titel "Similar items". Werk je in een eigen omgeving met Cassiopeia en blog sample data, dan staat dit op pagina /help/about-your-home-page

noteer het id van de custom field. Ga naar Joomla Administrator > Inhoud > Velden en zie dat het id van "About the Author" = 1
open het veld om te bewerken en wijzig op tabblad "Opties" het veld "Automatische weergave" naar "Niet automatisch weergeven"
maak via Joomla Admin of via de bestanden een override van com_content/articles/default.php
open je favoriete editor of werk vanuit Joomla Administrator. Beide zal werken.. hieronder laat ik het werk vanuit Joomla Administrator zien.
- ga naar en klik op om te bewerken.... Joomla Administrator > System > Templates > Website templates > Cassiopeia Child Details en Bestanden > Tekstverwerker > /templates/cassiopeia_child/html/com_content/article/default.php
- en ga aan de gang met var_dump() om uiteindelijk te komen tot de weergave die jij wil...

bijvoorbeeld... tik het volgende op regel 49

    ?>
  <pre>
    <?php var_dump($this->item->jcfields); ?>
  </pre>
    <?php $useDefList

Sla dit op en ververs de pagina op de voorzijde.... zie dat er een blok code bij gekomen is. Dit is een array van alle beschikbare Custom Fields voor dit artikel. We zijn alleen geïnteresseerd in Custom Field met ID = 1, dus je var_dump() kun je herschrijven en uitbreiden met een id naar:

  <pre>
    <?php var_dump($this->item->jcfields[1]); ?>
  </pre>

Sla dit op en ververs de pagina op de voorzijde... zie dat het blok wat kleiner geworden is. Je hebt nu alleen de inhoud van Custom Field met id = 1. En hiervan willen we alleen de titel en de rawvalue gebruiken. Dus...

  <pre>
    <?php var_dump($this->item->jcfields[1]->title); ?>
    <?php var_dump($this->item->jcfields[1]->rawvalue); ?>
  </pre>

Sla dit op en ververs de pagina op de voorzijde... tijd om informatie dusdanig aan te passen dat het netjes pas in je design

  <p>
    <?php echo $this->item->jcfields[1]->title; ?>
    <?php echo $this->item->jcfields[1]->rawvalue; ?>
  </p>

Sla dit op en ververs de pagina op de voorzijde... bekijk ook een pagina waarbij het veld "About the author" niet gevuld is... je ziet daar de titel "About the author" staan, zonder iets erachter... Niet mooi... je wil dit blok alleen als er iets ingevuld is. Daarom een if-statement er omheen zetten om de info alleen te tonen als er iets in rawvalue staat.

    <?php if (!empty($this->item->jcfields[1]->rawvalue)): ?>
  <p>
    <?php echo $this->item->jcfields[1]->title; ?>
    <?php echo $this->item->jcfields[1]->rawvalue; ?>
  </p>
    <?php endif; ?>

En zo ga je steeds verder... nu staat het blok bovenin de pagina, maar wellicht dat je het elders op de pagina wil. Verplaats het blok naar de plek waar je wil. Cassiopeia is gebouwd op basis van Bootstrap. Neem een kijkje bij de examples van https://getbootstrap.com en doe inspiratie op hoe je een en ander kunt verfraaien.

Veel plezier en tot ziens tijdens de JoomlaDagen waarbij nog een leuke template override getoond gaat worden.

Volgende keer

De volgende JUG Eindhoven is op dinsdag 28 oktober 2025. Het onderwerp van deze meeting en de mogelijkheid tot aanmelden is terug te vinden op https://joomlacommunity.nl/agenda/overige/event/809-jug040-bijeenkomst-eindhoven

Vragen voor Dr. Joomla kun je kwijt als reactie onder de aankondiging.