Verslag JUG Utrecht 12 juni 2017: My first template

Agenda

10 juli: open avond: Hoe ga je om met gebruikers – deel 2

15 augustus: nog niet bekend

Joomla Nieuws

We moeten weg uit onze vertrouwde locatie; de Zpot stopt met het verhuren van ruimtes aan ZZP’ers en dus ook aan ons. We hebben tot 1 augustus de tijd om iets anders te vinden.

(Update: die is gevonden! Vanaf september zitten we in Buurtcentrum Voorn, Akkrumerraklaan 101-131 in Utrecht).

Joomla 3.8 is gepland om half september uit te komen.

https://developer.joomla.org/news/693-plan-for-the-joomla-3-8-release.html

En wat zit erin: de nieuwe router!

J and Beyond, de Europese Joomla-conferentie (vooral voor ontwikkelaars), was dit jaar in Krakau. Interessante onderwerpen: templates, Bootstrap 4, Nicholas van Akeeba had een mooie presentatie over security, onder andere: weet jij wat je binnenhaalt als je in de backend op updaten klikt?

 

Presentatie My first Template

Patrick Smits wilde een eigen template ontwikkelen die gebruik maakt van sass. Op Github ontdekte hij een meneer die daar een Bootstrap-3 template mee had gemaakt. Die heeft hij gebruikt als uitgangspunt om naar zijn eigen hand te zetten.

Als naam voor zijn template koos Patrick Jifunza, Swahili voor “leren”.

Wil je de rest van het verhaal niet lezen maar meteen het resultaat downloaden en uitproberen? Dat kan: https://github.com/pjasmits/jifunza-template

Vervolgens ging Patrick kijken hoe hij zijn template zou gaan indelen. Hij kwam uit op een combinatie van dingen die hij zou kunnen gebruiken, waar hij iets uit kon slopen of extra bij zou kunnen zetten.

Jifunza heeft bovenin een wrapper met kenmerken die worden overgenomen door de middelste en onderste wrapper. De navigatie, header en footer kun je op de volle breedte zetten terwijl de wrapper dan toch smal blijft.

De variabelen die de breedte bepalen stelt Patrick in in de templateDetails.xml. Die zorgt ervoor dat je in de backend de breedte kunt ingeven. Die waarden moeten vertaald worden naar een css-code. Patrick heeft in het bestand jifunza_template.php een stukje code gezet waarin de waarde geladen wordt die in de xml ingegeven is: zo kun je dus de breedte variabel bepalen.

Bij de Jifunza template hoort een interface waar Patrick allerlei variabelen in heeft gezet. Daarmee kun je makkelijk dingen aanpassen, zonder Firebug of element inspecteren, gewoon in de backend.

Aan de interface heeft Patrick twee knoppen toegevoegd: eentje die de sass-bestanden omzet naar css, en een compiler message die elke keer aangeeft of er bestanden gewijzigd zijn.

Onder een tabje top en bottom staan de breedtes van de kolommen boven en beneden.

Je kunt ook de fonts variabel maken: ingeven waar de fonts vandaan gehaald moeten worden en dan kleur, font size en lettertype kiezen. Laat je kleuren weg, dan gebruikt hij de standaard bootstrap kleuren. Sowieso wordt eerst alles van bootstrap geladen, en dan de rest.

Patrick heeft ook de footer en het menu gedefinieerd, compleet met alle lettertypes, kleuren, linkkleuren, font, wel of geen schaduw etc. En je kunt een zoekfunctie aan het menu toevoegen.

Naast de template gebruikt Patrick eigen modules, zoals een carrousel die afbeeldingen toont in een Bootstrap carrousel. En een module met social buttons. Voor die modules maakt hij een xml-bestandje waar hij de veldnamen en de standaard waarden in zet.

 

Onder de motorkap

Alles wat in de header moet wordt geladen in een apart php-bestandje (head.php). Daarnaast wordt het php-bestand met de variabele css-waarden geladen. In dat bestand worden alle parameters geladen die via de backend zijn opgegeven (die haalt hij uit het xml-bestand).

Patrick gebruikt deze template voor alle nieuwe sites die hij maakt. Je kunt niet alles in een template gooien. Je kunt het ook op andere manieren oplossen, bijvoorbeeld met verschillende php-bestanden voor verschillende typen websites.

De styling van de backend heeft Patrick in css overschreven, terwijl de structuur uit de xml komt.

Patrick zorgt dat hij nooit code verwijdert. Bij modules maakt hij een apart sass-bestand. Om te updaten overschrijft hij de template met een nieuw bestand. Omdat hij er geen code uit haalt, alleen toevoegt, gaat dat vrijwel altijd goed. Het custom sass-bestand wordt niet overschreven.

Dokter Joomla

Case: Ik had mijn website geüpdatet naar Joomla 3.7, deden mijn “meest-gelezen”-artikelen ineens raar.

Antwoord: In 3.7 zitten toch wel wat rare router-dingetjes. Soms kunnen ook menu-items raar gaan doen, als er verschillende menu-items naar hetzelfde verwijzen. Dat kan liggen aan de taalplugins. Als je die aanzet, zou het weer kunnen werken.

Case: Vorige keer had ik een issue met een iframe met voorstellingen: als je op een link klikte om een kaartje te bestellen ging hij niet automatisch naar boven en leek het net of je een wit scherm kreeg. Er is iets mis met de onclick-code. De bouwer van het voorstellingen-programma zegt dat ik het zelf moet aanpassen. Zij zeggen: als je zelf de javascript naar top laat gaan, dan maakt het niet uit wat wij programmeren. Maar waar dan?

Antwoord: We denken toch dat het antwoord bij de ontwikkelaar ligt. Wil je zelf javascript toevoegen, dan kun je hier zien waar je javascript kunt toevoegen: https://docs.joomla.org/Adding_JavaScript/nl

Maar misschien wordt het wel ergens aangeroepen, bijvoorbeeld in de wrapper. Is het een default waarde die hij ergens vandaan haalt? Misschien kun je die overschrijven?