Verslag JUG Eindhoven 18 februari 2025
Een frisse dinsdagavond, maar wij zitten lekker binnen. Hans Kuijpers laat via een demo zien hoe je template overrides maakt.
Template overrides
Grote kracht van Joomla is dat je de code naar je eigen hand kunt zetten. Je bent niet gebonden aan de HTML output die het systeem standaard levert. Je hebt de mogelijkheid om overrides te maken en wel dusdanig dat ze bij een volgende update van het systeem behouden blijven. Dit zijn template overrides.
Voordat je een template override gaat maken is het verstandig om een child template te maken. Op die manier weet je zeker dat jouw wijzigingen aan de template bij een volgende update van Joomla behouden blijven. De standaard template van Joomla kan immers ook aangepast worden.
Een child template maak je via Joomla Administrator > System > Templates > Website Templates. Open Cassiopeia en klik op _Create Child Template_. Met de naam die je vervolgens opgeeft wordt een nieuwe child template gemaakt. Klik op sluiten en ga naar Website Stijlen om de nieuwe Child template in te stellen als default template.
Stel je bent aan het werken in een nieuwe Joomla site met geïnstalleerde demo data. Op dat moment heb je op de homepage onder de header en boven het kruimelpad een module staan. Dit is de module "Recentste berichten", is van het type mod_articles (nieuw sinds Joomla 5.2), weergegeven op positie top-a en ziet er als volgt uit.
Bij deze weergave heeft elk item twee aanklikbare links. Het is voor te stellen dat je op de gehele tegel zou willen kunnen klikken om daarmee het item te kunnen openen. Aangezien de template Cassiopeia gebouwd is met Bootstrap 5 kunnen we gebruik maken van de kracht van Bootstrap in combinatie met de overrides van Joomla. Bootstrap kent _Stretched Link_ en daarmee kun je een geheel item aanklikbaar maken. De link die de className `stretched-link` heeft zal een absoluut gepositioneerde pseudo element after toegevoegd krijgen. Het is belangrijk dat het element dat aanklikbaar moet worden de `position: relative;` heeft, anders kan er te veel aangeklikt worden.
- Joomla Administrator > System > Website Templates > Cassiopeia Child => klik om te openen
- Ga naar tabblad _Maak override_
- Selecteer modules > mod_article => alert verschijnt dat een override is gemaakt.
Alle tmpl bestanden in mod_articles zijn gekopieerd naar de gelijknamige html map in je template. - Selecteer op hetzelfde scherm /templates/cassiopeia_child > html > mod_articles > default_items.php
Het bestand default_items.php wordt ingeladen vanuit default.php en bevat de code voor het weergeven van een lijst van te tonen items. Op regel 37 staat het stukje code dat aangepast moet worden. Voeg `stretched-link` toe en klik op _Opslaan en Sluiten_.
<?php $attributes = ['class' => 'mod-articles-link stretched-link ' . $item->active, 'itemprop' => 'url']; ?>Bij verversen van de pagina kun je zien dat de cursor wijzigt in de vorm van een handje... maar wel op veel te veel plaatsen. Dit komt omdat de artikelen in mod_articles, anders dan in Bootstrap waar ze een card zijn, geen position:relative bevatten. Dit is op te lossen door het maken van de volgende override: Een eigen user.css
- Joomla Administrator > Systeem > Website Templates > Cassiopeia Child => Klik om te openen
- Nieuw bestand
- Selecteer /media/templates/site/cassiopeia_child > css
- Betandsnaam = user
- Bestandstyle = css
- Maken
- Dit bestand vul je met de volgende css
.mod-articles-item {
position: relative;
}Met deze wijziging is elk afzonderlijk item in zijn geheel aanklikbaar.
JLayout
Joomla werkt ook steeds meer met JLayouts. Met deze stukjes PHP wordt herhaling voorkomen. Als op meerdere plaatsen in Joomla eenzelfde iets gedaan moet worden, kan deze herhaalde code vervangen worden door een JLayout. De code wordt dan verplaatst naar een afzonderlijk bestand en meerdere malen opgeroepen. Wijzigingen aan de weergave van een JLayout heeft direct gevolgen voor de weergave van alle plekken waar deze opgeroepen wordt. Dat is handig in onderhoud.
De items van een blog weergave van een com_content category zijn ook niet in zijn geheel aanklikbaar. Dit valt ook template override op te lossen.
- Joomla Administrator > Systeem > Website Templates > Cassiopeia Child => Klik om te openen
- Ga naar tabblad _Maak override_
- Selecteer Componenten > com_content > category => alert verschijnt dat een override is gemaakt.
Alle tmpl bestanden in com_content/category zijn gekopieerd naar de gelijknamige html map in je template. - Selecteer op hetzelfde scherm /templates/cassiopeia_child > html > com_content > category > blog_item.php
- Scroll naar regel 43 en zie dat er een JLayout ingeladen wordt:
<?php echo LayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>
- Deze JLayout is afkomstig van de directory layouts/joomla/content
- Joomla Administrator > Systeem > Website Templates > Cassiopeia Child => Klik om te openen
- Ga naar tabblad _Maak override_
- Selecteer Weergaven > Joomla > Content => alert verschijnt dat een override is gemaakt.
Alle JLayouts in layout/joomla/content zijn gekopieerd naar de gelijknamige html map in je template - Selecteer op hetzelfde scherm /templates/cassiopeia_child/html/layouts/joomla/content en open het bestand blog_style_default_item_title.php
Dit is het bestand dat gebruikt wordt voor het tonen van de titel in een blog weergave. Ga naar regel 30 en voeg class="stretched-link" toe.
<a href="/<?php echo Route::_($link); ?>" class="stretched-link">Bij verversen van de pagina kun je zien dat de cursor wijzigt in de vorm van een handje... maar wel op veel te veel plaatsen. Dit komt omdat de artikelen in de blogweergave, anders dan in Bootstrap waar ze een card zijn, geen position:relative bevatten. Dit is op te lossen door de eerder aangemaakte user.css aan te passen.
- Joomla Administrator > Systeem > Website Templates > Cassiopeia Child => Klik om te openen
- Tabblad _Tekstverwerker_
- Selecteer /media/templates/site/cassiopeia_child > css
- open user.css
- Dit bestand vul je met de volgende css
.blog-item,
.mod-articles-item {
position: relative;
}Met deze wijziging is elk afzonderlijk item in zijn geheel aanklikbaar.
Embed YouTube
Bij het bekijken van de website van een vaste bezoeker viel het op dat er gelinkt wordt naar filmpjes die te bekijken zijn op YouTube. Het is voor de bezoeker vriendelijker om de filmpjes op de pagina zelf te tonen. Dit kan eenvoudig met de plugin van AllVideos. Een alternatief is de YouTube content plugin van Hans Kuijpers. Deze zal lazy loading YouTube toepassen. Eerst wordt een afbeelding getoond en pas na aanklikken wordt de iframe van YouTube ingeladen. Op die manier wordt er niets te veel ingeladen als de bezoeker geen filmpje wil bekijken.
- download via GitHub. Klik rechts op releases. https://github.com/hans2103/plg_content_youtube
- installeren en activeren
- verwerk door
{youtube https://www.youtube.com/watch?v=VrusOGXquW4}te plaatsen in de tekst van je artikel.
niet juist
{youtube <a href="https://www.youtube.com/watch?v=VrusOGXquW4">https://www.youtube.com/watch?v=VrusOGXquW4</a>}
juist
{youtube https://www.youtube.com/watch?v=VrusOGXquW4}Volgende keer
De volgende JUG Eindhoven is op de dinsdag 18 februari. Het onderwerp van deze meeting en de mogelijkheid tot aanmelden is terug te vinden op https://www.joomlacommunity.nl/agenda/overige/event/802-jug040-bijeenkomst-eindhoven
Vragen voor Dr. Joomla kun je kwijt als reactie onder de aankondiging.