Slimme Joomla! Templating Tips en Truuks
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Slimme Joomla! Templating Tips en Truuks

on

  • 592 views

In deze presentatie laat ik je zien dat je niet overal een extensie voor hoeft te gebruiken. Door het slim inzetten van module & component overrides in combinatie met handige truuks in je ...

In deze presentatie laat ik je zien dat je niet overal een extensie voor hoeft te gebruiken. Door het slim inzetten van module & component overrides in combinatie met handige truuks in je bronbestanden kun je bijvoorbeeld eenvoudig een content slider maken. Ook het activeren van Javascript of CSS op alleen bepaalde pagina's kan op slimme manieren zonder extensies. Probeer na deze presentatie eens een websites te bouwen met maximaal één of twee frontend extensies!

Statistics

Views

Total Views
592
Views on SlideShare
421
Embed Views
171

Actions

Likes
0
Downloads
17
Comments
0

4 Embeds 171

http://www.joomladagen.nl 99
http://joomladagen.nl 65
http://conference 6
http://elearning.tadelformacion.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Vertellen wie ik ben en wat ik doe
  • Wat kan je allemaal met templates? Truuks voor in index.php. En alternatieve weergaven
  • In de template gebeurd alles qua vormgeving en ook een stukje techniek. Tegenwoordig kan je heel erg veel! Vandaag leren dat ook dingen waarvan je het niet verwacht. Simpel gezegd, je hoeft niet altijd meteen naar de "JED" te rennen.
  • Waarom? Een stukje gemak. Sommigen weten niet beter, daar ga ik vandaag verandering in brengen! En waarom zou ik dat doen? Nou 1 van de redenen dat je minder extensies zou moeten gebruiken is om het volgende:
  • Kan onveilig zijn. TMP map. Xmap bug + kan ook zonder extensie. Vaak zijn extensies te groot. Te veel opties terwijl je maar 1 keer de extensie nodig hebt.
  • Zonder index.php geen template. Wat kan je er mee? Ik zal een aantal handige om eenvoudiger te stylen.
  • Column breder homepage. Fonts groter. Kleuren anders. Andere vormgeving. Op sommige pagina's. Hoe werkt dat? Je hebt je menu-items, in advanced staat onder page display de page class optie. Vul die in en je bent klaar! Alleen ben je er dan nog niet. Joomla! laat hem zien in het component (op verschillende plekken). Maar het zou handig zijn als ie op de body zat. Doe het volgende..
  • In je index.php zet je bovenstaande code bovenaan boven de Vervolgens zet je dat onderstaande stukje in je body
  • Vervolgens kun je dit in je css zetten. Even uitleggen...
  • Dat was voor 1 website op 1 domein. Wat je ook kunt doen is dezelfde template voor 2 websites gebruiken. Bijvoorbeeld 4 webshops die je hebt. Allemaal in dezelfde layout met dezelfde code maar dan met een andere kleur. Als je dan ook dezelfde index.php gebruikt dan is het handig om een optie te maken in de backend (zo gedaan) om vervolgens een class aan iedere pagina te hangen.
  • De code is als volgt...
  • Meer classes. Ook JS aanspreken. Responsive? JS via Media Queries.
  • Uitleg... Ok so much for the index.php. Nu het echte werk en hoppa naar alternatieve weergaven
  • Alternatieve weergaven zijn overrides maar dan anders. Je hebt alternatieve weergaven in de volgende categorieen:
  • Gebruiken kan in begin verwarrend overkomen. Soms wel beschikbaar anders niet. Soms worden wwergaven wat anders op een andere plek. Eerst gewone overrides bespreken.
  • Dit is je structuur. Je hebt je installatie met de volgende mappen er in
  • Zo kun je een override maken. Mappen views en tmpl kun je weglaten. Joomla gebruikt nu de bestanden die in je template map staan.
  • We beginnen maar even makkelijk! Met de module alternative weergave.
  • Stel je voor: Je wil het volgende gaan maken... Het is een slider waarin wat info staat en een afbeelding met nog een titel en een readmore. Wat gaan we dan doen?
  • Vandaag met module. Titel + tekst + readmore + intro-image. Pakken we newsflash of bijv. articles category > meer opties
  • We beginnen met het opzoeken van het bestand wat we nodig hebben. In je installatie naar modules category en dan tmpl en je bestand pakken. Deze kopieren.
  • HTML map aanmaken.
  • Alternatieve weergave? Geef hem een andere naam
  • Scripts + stylesheets toevoegen aan alleen die pagina's. Bijv. flexslider voor animaten.
  • HTML moet JS snappen dus classes. Nog geen intro images in modules. Dus zelf ophalen want wel beschikbaar. Op de puntjes staat meer code.
  • Kies voor een category of featured en hoeveel je er wil tonen
  • En kies vervolgens bij Advanced options je nieuwe layout "articleslider".
  • Stel je voor: Je wil het volgende gaan maken... Het is een slider waarin wat info staat en een afbeelding met nog een titel en een readmore. Wat gaan we dan doen?
  • Iets moeilijker. Eigenlijk nieuwe menu items. Contactformulier gebruikersvriendelijk. Aanmaken in Joomla en kijken.
  • Formulier niet zichtbaar en best lelijke opmaak. Niet opgeven en instellingen aanpassen.
  • Beter maar niet goed. Legend te groot. Message veld klein. Adresgegevens raar ingesprongen. Wat doen we?
  • Naar de JED! RSForms. Chronoforms. Contactform. Veel functionaliteit. Veel scripts e.d.. Dit allemaal nodig?
  • Css. verbergen, groter maken, margins etc.
  • Al beter. Adresgegevens naast formulier. Privacy policy en intro is makkelijk.
  • Zoek het bestand op
  • Kopieer en vernoem. Geen underscores.
  • Maar ook xml pakken voor menu item.
  • Kopieer en vernoem.
  • Even alleen titel aanpassen. Uiteraard in taalbestanden. Meer aanpassen? Geen probleem, niet voor presentatie.
  • Verander menu item type in bestaand contact. Daar staat ie.
  • De .php aanpassen. Bootstrap (protostar) classes toevoegen. Op puntjes staat weer meer code.Naast elkaar met span. Contact in mooie well. Info er onder en privacy policy.
  • Adres tel + fax indicatie. All fields required. Labels links.Meer bestanden kopieeren uit de bron map. Niet gekopieerd? dan gebruikt joomla de standaard.
  • Wel underscores net als origineel
  • Zelfde prefix underscore
  • Wel underscores net als origineel
  • Zelfde prefix underscore
  • Uiteindelijk zou dit bijvoorbeeld je contact form kunnen zijn
  • En dat is toch al een stuk beter dan deze dahct ik zo!
  • ...

Slimme Joomla! Templating Tips en Truuks Presentation Transcript

  • 1. Slimme Joomla! TemplatingTips en TruuksRobin Poort (@rhcpoort)JD13NL, Zeist, april 2013
  • 2. Tweepixels.nl/Academytrainer | Joomla!ThemePartner.comdesign / development
  • 3. Templatesindex.phpModule alternatieve weergaveMenu item alternatieve weergave
  • 4. Onveilig
  • 5. Index.php
  • 6. Pageclass als body class
  • 7. <?php$app = JFactory::getApplication();$menu = $app->getMenu();$active = $menu->getActive();$pageclass = ;if(is_object($active)&& isset($active->params)&& $active->params instanceof JRegistry) {$pageclass = $active->params->get(pageclass_sfx, );}?><body class="<?php echo !empty($pageclass) ? $pageclass : ; ?>">...</body>
  • 8. body.home {font-size: 120%;}div.left-column {width: 20%;}body.home div.left-column {width: 40%;}
  • 9. <field name="templateStyle"type="list"default="style1"label="Template Style"description="Kies een stijl voor je template"><option value="style1">Style1</option><option value="style2">Style2</option></field><?php$params = JFactory::getApplication()->getTemplate(true)->params;?><body class="<?php echo $params->get(templateStyle); ?>">body.style1 { ... }body.style2 h3 { ... }
  • 10. <body class="mediumFont highlightFirstWords">...</body>body.smallFont {font-size: .875em;}body.mediumFont {font-size: 1em;}body.largeFont {font-size: 1.25em;}$(body.highlightFirstWords h3).each(function() {...});
  • 11. body {z-index: 0;}@media (min-width:600px) {body {z-index: 1;}}if ($(body).css(z-index) == 0) {...}if ($(body).css(z-index) == 1) {...}
  • 12. Alternatieveweergaven
  • 13. ModulesComponenten CategorieënMenuitemsMultilevelMeer info: http://docs.joomla.org/Layout_Overrides_in_Joomla_2.5
  • 14. Joomla! installationcomponentscom_contentviewsarticletmpldefault.php
  • 15. Joomla! installationtemplates[Your template]htmlcom_contentarticledefault.phpviewstmpl
  • 16. Module Alternatieve Weergave
  • 17. Website nameHome Item1 Item2 Item3 ContactProin sit amet justo interdumnulla commodo dignissim.Proin consequat neque vestibulum odio tristique sollicitudin. Utmolestie ligula ipsum. Suspendisse feugiat quam ut elit mattislaoreet. Praesent non mi tortor, cursus egestas odio. Aliquamleo tellus, tincidunt vel pulvinar ac, facilisis eget odio.Readmore
  • 18. Joomla! installationmodulesmod_articles_categorytmpldefault.php
  • 19. Joomla! installationtemplates[Your template]htmlmod_articles_categorydefault.php
  • 20. Joomla! installationtemplates[Your template]htmlmod_articles_categoryarticleslider.php
  • 21. <?php$doc =& JFactory::getDocument();$doc->addScript(...);$doc->addStylesheet(...);?>
  • 22. <div class="articleslider">...<?php foreach ($list as [list or group]) : ?><li class="slider-item">...<p><?php $images = json_decode($item->images); ?><img src="<?php echo htmlspecialchars($images->image_intro); ?>"></p>...</li><?php endforeach; ?>...</div>
  • 23. Website nameHome Item1 Item2 Item3 ContactProin sit amet justo interdumnulla commodo dignissim.Proin consequat neque vestibulum odio tristique sollicitudin. Utmolestie ligula ipsum. Suspendisse feugiat quam ut elit mattislaoreet. Praesent non mi tortor, cursus egestas odio. Aliquamleo tellus, tincidunt vel pulvinar ac, facilisis eget odio.Readmore
  • 24. Menu Item Alternatieve Weergave
  • 25. dl.contact-address dt {display: none;}dl.contact-address dd {margin-left: 0;}.contact-form legend {font-size: 1em;margin-bottom: 0;}.contact-form fieldset .control-group:nth-child(6) {display: none;}#jform_contact_message {width:60%;height:150px;}
  • 26. Joomla! installationcomponentscom_contactviewscontacttmpldefault.php
  • 27. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly.phpcontact
  • 28. Joomla! installationcomponentscom_contactviewscontacttmpldefault.xml
  • 29. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly.xmlcontact
  • 30. <layout title="COM_CONTACT_CONTACT_VIEW_DEFAULT_TITLE"option="COM_CONTACT_CONTACT_VIEW_DEFAULT_OPTION"><help key = "JHELP_MENUS_MENU_ITEM_CONTACT_SINGLE_CONTACT" /><message><![CDATA[COM_CONTACT_CONTACT_VIEW_DEFAULT_DESC]]></message></layout><layout title="User Friendly Contact Form"option="COM_CONTACT_CONTACT_VIEW_DEFAULT_OPTION"><help key = "JHELP_MENUS_MENU_ITEM_CONTACT_SINGLE_CONTACT" /><message>Create a user friendly contact form</message></layout>
  • 31. ...<div class="span4"><div class="well">[contact info area] ...</div><div class="well"><p>You can use this form in case you:</p>...</div></div><div class="span8">[contact form area] ...<h3>Privacy policy</h3>...</div>...
  • 32. Joomla! installationcomponentscom_contactviewscontacttmpldefault_address.php
  • 33. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly_address.phpcontact
  • 34. Joomla! installationcomponentscom_contactviewscontacttmpldefault_form.php
  • 35. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly_form.phpcontact
  • 36. Vragen?
  • 37. Ga eens met overrides spelen en oefenenProbeer meer uit de core te halenLaat de core met rust! (geen core-hacks)Laat extensies niet altijd links liggen
  • 38. Gebruik in je volgende website eensmaximaal 2 frontend extensies
  • 39. @rhcpoort | @theme_partner | @tweepixelswww.themepartner.com | www.tweepixels.nl/academyTimes up
  • 40. Copyright image on first slide:http://upload.wikimedia.org/wikipedia/commons/3/32/Terry_Evanswood.jpg