Clever Joomla! Templating Tips and Tricks

1,318
-1

Published on

In this presentation I will show you that it isn't necessary to use an extension for everything you do with Joomla!. By making good use of module & component overrides in combination with clever tricks in your source files, it will be easy to build your own content slider for example. Another thing you can easily do without using extensions is activating Javascript or CSS on specific pages. I challenge you to build a website using a maximum of only one or two frontend extensions after visiting this presentation!

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,318
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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 <html> 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.
  • This is what I did.
  • This is what I did.
  • 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!
  • ...
  • Clever Joomla! Templating Tips and Tricks

    1. 1. Clever Joomla! TemplatingTips and TricksRobin Poort (@rhcpoort)JAB13, Noordwijkerhout, june 2013
    2. 2. Robin PoortThemePartner.comdesign / development
    3. 3. Templatesindex.phpModule Alternative LayoutsMenu Item Alternative layouts
    4. 4. Unsafe
    5. 5. Index.php
    6. 6. Pageclass as body class
    7. 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. 8. body.home {font-size: 120%;}div.left-column {width: 20%;}body.home div.left-column {width: 40%;}body.list ul li {display: block;margin: 0 0 1em 0;border-bottom: 1px solid #ccc;}
    9. 9. TemplateDetails.xml<field name="templateStyle"type="list"default="style1"label="Template Style"description="Choose a style"><option value="style1">Style1</option><option value="style2">Style2</option></field>
    10. 10. index.php<?php$params = JFactory::getApplication()->getTemplate(true)->params;?><body class="<?php echo $params->get(templateStyle); ?>">template.cssbody.style1 { ... }body.style2 h3 { ... }
    11. 11. <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() {...});
    12. 12. body {z-index: 0;}@media (min-width:600px) {body {z-index: 1;}}if ($(body).css(z-index) == 0) {...}if ($(body).css(z-index) == 1) {...}
    13. 13. AlternativeLayouts
    14. 14. ModulesComponents CategoriesMenuItemsMultilevelMore info: http://docs.joomla.org/Layout_Overrides_in_Joomla_2.5
    15. 15. Joomla! installationcomponentscom_contentviewsarticletmpldefault.php
    16. 16. Joomla! installationtemplates[Your template]htmlcom_contentarticledefault.phpviewstmpl
    17. 17. Module Alternative Layouts
    18. 18. 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
    19. 19. Joomla! installationmodulesmod_articles_categorytmpldefault.php
    20. 20. Joomla! installationtemplates[Your template]htmlmod_articles_categorydefault.php
    21. 21. Joomla! installationtemplates[Your template]htmlmod_articles_categoryarticleslider.php
    22. 22. <?php$doc =& JFactory::getDocument();$doc->addScript(...);$doc->addStylesheet(...);?>
    23. 23. <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>
    24. 24. 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
    25. 25. Menu Item Alternative Layouts
    26. 26. 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;}
    27. 27. Joomla! installationcomponentscom_contactviewscontacttmpldefault.php
    28. 28. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly.phpcontact
    29. 29. Joomla! installationcomponentscom_contactviewscontacttmpldefault.xml
    30. 30. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly.xmlcontact
    31. 31. <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>
    32. 32. ...<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>...
    33. 33. Joomla! installationcomponentscom_contactviewscontacttmpldefault_address.php
    34. 34. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly_address.phpcontact
    35. 35. Joomla! installationcomponentscom_contactviewscontacttmpldefault_form.php
    36. 36. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly_form.phpcontact
    37. 37. Questions?
    38. 38. Have a try using overridesTry to get more out of the Joomla! coreBut leave the core alone! (no core-hacks)Dont always ignore extenions
    39. 39. Use a maximum of 2 frontendextensions on your next project!
    40. 40. @rhcpoort | @theme_partnerwww.robinpoort.com | www.themepartner.comTimes up
    41. 41. Copyright image on first slide:http://upload.wikimedia.org/wikipedia/commons/3/32/Terry_Evanswood.jpg

    ×