1 Wat gaan we behandelen? Module 1: Introductie tot Joomla! CMS Module 2: Joomla! Templates Module 3: Elementen van het web Module 4: Basis van een te...
Module 1: Introductie tot Joomla! CMS Module 2: Joomla! Templates Module 3: Elementen van het web Module 4: Basis van een template Module 5: Begin constructie Module 6: Positionering Module 7: Design Module 8: PHP code Module 9: Administrator Templates Module 10: Joomla! Framework
27-01-07
Joomla! Templates Webmasters
3
3
Jira ICT www.jira.nl
220308
Joomla! 1.5 Templates • Dezelfde functionaliteit met nieuwe code • Extra controle via template parameters • Meerdere CSS files vanuit templatebeheer • Component templating
27-01-07
12
Onder Joomla 1.5 is het nodige veranderd binnen het templating systeem. Oude code is veranderd in nieuwe code, waarbij vooral op de achtergrond voor de Joomla! programmeurs veel is veranderd. Een oude statement als “mosLoadModules()” is vervangen met “<jdoc:include type='modules'>”. Een eindgebruiker heeft nu meer controle over het gedrag van een template via makkelijk te configureren parameters, zoals dat ook al bij modulen het geval was. Als een template support heeft voor zowel een resolutie van 800x600 als een resolutie van 1024x768, dan kan de eindgebruiker deze keuze zelf maken vanuit de Joomla! Administrator. Een meer geavanceerde feature, die de toekomst van Joomla! erg zal bepalen, is het concept van “component templating”. Een nadeel van Joomla! was altijd dat hoezeer een template zelf ook XHTML compliant was, de uiteindelijke webpagina bevatte altijd nog tabellen zoals die gedefinieerd waren in componenten. Met de komst van Joomla! 1.5 wordt binnen een component het MVC (Model View Controller) model geïntroduceerd, waarmee de presentatie nog meer wordt gescheiden van de functionaliteit. Een component definieert zelf een of meerdere “views”, die de data vanuit het “model” op een andere manier representeren. Zo kan een lijst van gegevens in een HTML tabel gestopt worden, maar ook in een unordered list
of met behulp van <span> of
tags. De view bepaald welke HTML code uiteindelijk wordt gegenereerd. Het nieuwe van Joomla! 1.5 is dat – mocht een bepaalde view binnen het component niet volstaan – het mogelijk is om een view aan te maken binnen het template! Op deze manier kan een component zonder problemen geüpgrade worden, terwijl de eigen view gehandhaafd blijft. Over het algemeen is hier echter wel een grondige HTML kennis nodig. Joomla! Templates Webmasters
12
Jira ICT www.jira.nl
220308
class & id ●
“class” definieert een herbruikbare stijl (met een punt)
●
“id” definieert een uniek XHTML element (met een hekje)
...
div.blue { background-color: blue ; }
div#footer { font-size: 8px ; }
27-01-07
Joomla! Templates - module 3
36
Binnen CSS 2 is ook het concept van DOM (Document Object Model) ontstaan waarmee meerdere lagen in een XHTML document beschreven kunnen worden. Dankzij DOM kan bijvoorbeeld een stijl gedefinieerd worden voor alle links binnen een container met de naam X, zonder dat links buiten de container X hier last van hebben.
JDocument <jdoc:include> tags: • lowercase (kleine letters) • voorzien van “type” parameter • eindigend op /> zoals alle XML tags
27-01-07
75
Een JDocument tag wordt uiteindelijk door Joomla! vervangen met de nodige HTML code. Dit gedrag kan worden beïnvloed door het toevoegen van parameters aan de <jdoc:include> tag. De hele tag moet altijd in kleine letters gedefinieerd zijn. Ook moet de tag altijd een “type” parameter bevatten. Het type kan een van de volgende zijn: “head” (alleen in de HTML header), “component” (voor de output van componenten zoals “com_content”, verantwoordelijk voor het tonen van artikelen), “modules” (voor het tonen van meerdere modules op dezelfde positie) en “module” (voor het tonen van de eerste module op een bepaalde positie). Er is ook nog een apart type “message” dat gebruikt kan worden voor het tonen van berichten afkomstig uit Joomla – denk maar aan een bevestiging dat een artikel na wijziging succesvol is opgeslagen. Bij <jdoc> tags van het type “modules” of “module” is een “name” parameter ook verplicht. Deze geeft de module positie aan. Een “style” parameter kan ook worden toegevoegd, welke invloed heeft op de manier waarop HTML wordt gegenereerd.
Joomla! Templates Webmasters
75
Jira ICT www.jira.nl
220308
Zelf een split menu maken (3): twee modules
27-01-07
96
Terwijl er bij split menu's gebruik wordt gemaakt van een enkel menu, wordt er juist gebruik gemaakt van twee of meerdere menu modules. Per menu module kan het startniveau en eindniveau ingesteld worden. Menu-items die geen parent-item hebben bevinden zich op niveau 0. Menu-items die wel een of meerdere parents hebben bevinden zich op niveau 1 of hoger. Door het start- en eindniveau te definiëren wordt het oorspronkelijke menu opgesplitst in meerdere menu modules. Voor iedere menumodule zijn de gebruikelijke instellingen mee te geven (menustijl, template positie, titel). Het belangrijke bij split menu's om in ieder geval als menu hetzelfde menu te kiezen.
Joomla! Templates Webmasters
96
Jira ICT www.jira.nl
220308
Rounded DIVs (6): CSS code div#module { background: transparent url(../images/module_tl.png) no-repeat top left ; } div#module div { background: transparent url(../images/module_tr.png) no-repeat top right ; } div#module div div { background: transparent url(../images/module_bl.png) no-repeat bottom left ; } div#module div div div { background: transparent url(../images/module_br.png) no-repeat bottom right ; } div#module div div div div { background: none; 27-01-07 }
110
Het echte inpassen van alle modules gebeurt binnen de CSS definities. Per module worden 4 DIVs gebruikt die ieder hun eigen achtergrondplaatje krijgen. De DIVs hebben in principe dezelfde hoogte en breedte, echter de verschillende achtergrondafbeeldingen verschillen in grootte. Belangrijk is ook dat uiteindelijk de laatste DIV slechts een klein achtergrondplaatje toont, maar dat het wel de bedoeling is dat de achtergrondplaatjes van de onderliggende DIVs zichtbaar zijn. De achtergrondkleur van de DIVs moet dus “transparent” zijn. Ook moet de achtergrondafbeelding niet herhaald worden dus de parameter “no-repeat” is ook een vereiste. Het is in principe mogelijk om de eerste module (div#module) wel een achtergrondkleur mee te geven, wat misschien nodig is als de plaatjes met ronde hoeken bijvoorbeeld gedeeltelijk transparant zijn. In het overzicht staat ook een vijfde DIV me specifiek geen achtergrond. De reden hiervoor is dat de vierde DIV specificatie de browser verteld dat “een div binnenin een div binnenin een div binnenin een module-div” als achtergrond het plaatje moet gebruiken “module_br.png”. Maar dit geldt ook voor alle DIVs die de vierde DIV kan bevatten. Om deze recursiviteit te voorkomen is een vijfde DIV specificatie toegevoegd.
Joomla! Templates Webmasters
110
Jira ICT www.jira.nl
220308
PNG transparantie De PNG standaard ondersteunt transparantie, maar Internet Explorer slechts gedeeltelijk
PNG is een afkorting van Portable Network Graphics en staat voor een formaat plaatje waarin een bitmap opgeslagen kan worden met een compressie algoritme zonder dat de kwaliteit van het plaatje achteruit gaat. Een soortgelijke techniek wordt ook toegepast in JPG en GIF formaat, maar het voordeel van PNG is dat het gebaseerd is op een open standaard en open patent, zodat derde partijen makkelijk het formaat kunnen toepassen en uitbreiden. Binnen een PNG zijn er een aantal zaken mogelijk zoals compressie (via het zlib/gzlib algoritme), kleuren indexatie (waarbij gekozen kan worden tussen grijstinten (greyscale) of volledige kleuren, en verschillende bitdiepten) en transparantie. Bij transparantie kunnen de verschillende pixels die worden beschreven in de kleurenindex zowel volledig transparant of non-transparant zijn, maar ook gedeeltelijk transparant (wat ook wel alpha-transparantie wordt genoemd). Volledige transparantie (zoals vergelijkbaar met transparantie binnen GIFs) wordt momenteel ondersteund door alle gangbare transparanties, terwijl alpha-transparantie wordt ondersteund door vrijwel all browsers met uitzondering van Microsoft Internet Explorer. Voor IE 5 en hoger is er echter wel een zogenaamde IE hacks beschikbaar gebaseerd op CSS manipulatie via JavaScript, waarbij DirectX support binnen de browser wordt misbruikt om de PNG transparantie als nog correct te vertalen. Met Internet Explorer 7 zou alpha-transparantie volledig worden ondersteund, ware het niet dat problemen in de PNG indexatie (gamma-indexatie en kleurcorrecties) als nog voor problemen zorgen. Animatie zoals dat inherent is aan bijvoorbeeld het GIF formaat, is niet aanwezig binnen de PNG standaard zelf, maar binnen een parallelle standaard met de naam MNG. Joomla! Templates Webmasters
Afhankelijk van de keuze van de Joomla! beheerder krijgt de website een
die 800 pixels ofwel 1024 pixels breed is. Zo een
wordt vaak de “container” genoemd, en de breedte is natuurlijk in CSS te bepalen. Per breedte wordt er daarom een aparte “container” definitie aangeroepen – ieder met een eigen CSS ID. Binnen de PHP logica moet alleen een match gemaakt worden tussen de uitgelezen parameter en de CSS ID. Binnen CSS kunnen bijvoorbeeld de volgende definities opgenomen zijn: div#container800 { width: 700px ; min-height: 500px ; } div#container1024 { width: 900px ; min-height: 700px; } De daadwerkelijke breedte en hoogte van de “container” zijn in bovenstaand voorbeeld bewust kleiner gemaakt dan de breedte en hoogte van het scherm, om rekening te houden met eventuele “borders” en “paddings” van de webpagina zelf maar ook de randen van de webbrowser.
Joomla! Templates Webmasters
133
Jira ICT www.jira.nl
220308
Voorbeeld: com_content Verantwoordelijk voor artikel weergave Meerdere views (blog layout, frontpage) Volledig herschreven en voorbereid op nieuwe Joomla 1.5 templating mogelijkheden
27-01-07
147
Als voorbeeld wordt het standaard Joomla! component “com_content” genomen. Dit component is verantwoordelijk voor het belangrijkste onderdeel van Joomla!: Het tonen van artikelen binnen de webpagina. Het is tergelijkertijd de showcase voor de functionaliteit van component templating. In de directory “components/com_content/views” zijn verschillende views aangemaakt waarmee artikelen getoond kunnen worden: De view “article” laat een volledig artikel zien met alle parameters zoals die in de Joomla! Administrator in te stellen zijn. De views “section” en “category” laten alle artikelen (inclusief previews met “Lees meer” links) binnen respectievelijk een sectie of een categorie zien, waarbij er verdere keuze is tussen een standaard-lijst of een zogenaamde blog-layout. De view “frontpage” laat natuurlijk de voorpagina van Joomla! zien met allerlei artikelen, terwijl “archive” een lijst van gearchiveerde items laat zien.
Joomla! Templates Webmasters
147
Appendix I: MooTools effects binnen Joomla! 1.5 als met op de titel van de div-box klikt, klapt de div-box zich met een mooi effect uit. JavaScript bestand binnen template Maak een JavaScript bestand "js/slideshow.php" aan binnen de template-directory. <script type="text/javascript"> window.addEvent('domready', function() { var textSlide1 = new Fx.Slide('slide1'); $('toggle1').addEvent('click', function(e){ e = new Event(e); textSlide1.toggle(); e.stop(); }); var textSlide2 = new Fx.Slide('slide2'); $('toggle2').addEvent('click', function(e){ e = new Event(e); textSlide2.toggle(); e.stop(); }); });
Initialiseer binnen de template ("index.php") de MooTools libraries.
Joomla! artikel Maak een Joomla! artikel aan met bijvoorbeeld de volgende inhoud. Hiervoor moet ofwel de WYSIWYGeditor uitgeschakeld worden, ofwel de HTML-broncode via de WYSIWYG-editor gewijzigd worden. {jumi [templates/mijn_template/js/slideshow.php]}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent urna. Quisque sed tortor at nulla euismod porta. Proin scelerisque bibendum felis. Vestibulum vel lorem a tortor congue suscipit. Morbi tellus turpis, lobortis vitae, laoreet sit amet, suscipit vel, elit. Fusce et lectus. Nam aliquet eros ut diam. Maecenas magna. Proin aliquet ullamcorper tortor. Aenean ante mauris, semper vel, cursus at, adipiscing eget, urna. Phasellus ligula. Phasellus quis nunc et libero suscipit pulvinar. Maecenas sagittis blandit diam.
Proin vitae libero nec tellus egestas varius. Maecenas malesuada. Quisque lacinia quam at velit. Pellentesque magna tortor, blandit a, volutpat convallis, dignissim commodo, metus. Donec in sapien ac purus tempor condimentum. Aenean enim nunc, aliquet eget, dictum eget, blandit sed, lacus. Praesent elit elit, iaculis in, fermentum ut, mattis nec, massa. Duis lectus. Suspendisse potenti. Donec vel felis. Curabitur in purus non quam faucibus cursus. Pellentesque eleifend gravida orci.
CSS styling Via de CSS-klassen "slide" en "slide_header" is iedere slide vorm te geven. De volgende CSS-code geeft een simpele aanmaak aan iedere slide mee: Joomla! Templates - Appendix I - 2 van 6
De PHP-code bepaald allereerst met een if-endif statement of de naam van de auteur wel of niet getoond moet worden. Dit wordt gedaan door de parameter "show_author" uit te lezen - deze parameter is ofwel ingesteld via de algemene instellingen van het component "com_content", ofwel via de parameters van een individueel artikel, ofwel via de parameters van het gebruikte menu-item. Als de parameter het tonen van de naam heeft uitgeschakeld, of als de naam van de auteur geen waarde heeft, wordt het stuk PHP/HTML binnen de if-endif statement niet getoond. De verandering Verderop in de PHP-code is het volgende stuk code terug te vinden, waarmee de inhoud van het artikel wordt getoond:
Door het code-segment met "show_author" hieronder te zetten, wordt de naam van de auteur onder de tekst van het artikel geplaatst. Waarschuwing Bij het verplaatsen van code-segmenten is het altijd belangrijk om natuurlijk het juiste code-blok in zijn geheel te copieren, terwijl het ook belangrijk is om dat code-blok op de juiste plek neer te zetten, bijvoorbeeld binnen het juiste if-endif blok.
Als de PHP-code binnen het layout-bestand niet meer correct is, dan zal de PHP-parser binnen de webserver een error geven (vaak een PHP Fatal Error). Voorzichtigheid is dus geboden.
5. Voorbeeld: Artikel-sortering op basis van dag (frontpage) De Frontpage Layout van het component "com_content" toont op de voorpagina een lijst van alle artikelen die in de database als "frontpage article" zijn gemarkeerd. Via parameters is in te stellen hoeveel artikelen over de gehele breedte worden getoond ("leading articles"), hoeveel artikelen hierna in een blog-indeling worden getoond en hoeveel artikelen in een lijst met links worden getoond. Stel dat de volgende indeling nodig is: In plaats van een blog-layout moet er alleen een lijst worden getoond van de artikelen, maar deze lijst moet een overzicht van alle dagen tonen, met per dag het aantal artikelen dat op die dag zijn aangemaakt. Via de parameters is in te stellen dat er geen "leading articles" worden getoond en ook geen "intro artikelen". Alle "frontpage articles" worden dan getoond als links.
Joomla! Templates - Appendix II - 3 van 7
Appendix II: Joomla! 1.5 template overrides functie "print_r()" om uit te vinden wat voor informatie is opgeslagen in die $link-variabele. links as $link) : ?> ... ...
Door de pagina nu te verversen, kunnen we in de broncode van de browser nu extra informatie vinden over iedere $link-variabele. Na enig zoeken vinden we per $link extra onderdelen zoals "introtext" en "created". Hier gaan we mee aan de slag. De datum toepassen Als eerste de datum. Per $link-variabele kunnen we in onze override $link->created gebruiken om de datum te tonen. Maar deze datum is niet mooi vormgegeven. 2006-10-12 10:00:00
Via de volgende code kunnen we dit een wat vriendelijker formaat omzetten: JHTML::_('date', $link->created, JText::_('DATE_FORMAT_LC1')); J
Dit geeft als resultaat: donderdag, 12 oktober 2006
Nu komt het volgende probleem: We willen niet per artikel de datum tonen, maar juist per dag. Dat betekent dus dat we per dag meerdere artikelen kunnen tonen. De oplossing vereist een beetje programmeurs-logica: Alle artikelen worden op de frontpage gesorteerd op basis van de aanmaakdatum. Als ieder artikel een datum bevat, dan is de eerste stap om simpelweg voor ieder artikel de datum te tonen:
links as $link) : ?> created, JText::_('DATE_FORMAT_LC1')); ?>
De volgende stap is nu om alleen bij het eerste artikel van dag 1 de datum te tonen, maar voor alle andere artikelen van dag 1 juist niet. We maken hierbij gebruik van een nieuwe variabele $current_date. Bij het eerste artikel stellen we deze variabele gelijk aan de datum van dat artikel. Aangezien voor de hierop volgende artikelen van dag 1 de datum hetzelfde is, controleren we of de variabele $current_date verandert. Alleen als dat het geval is dan tonen we opnieuw de datum.
links as $link) : ?> created, JText::_('DATE_FORMAT_LC1')); $
