Slimme Joomla! TemplatingTips en TruuksRobin Poort (@rhcpoort)JD13NL, Zeist, april 2013
Tweepixels.nl/Academytrainer | Joomla!ThemePartner.comdesign / development
Templatesindex.phpModule alternatieve weergaveMenu item alternatieve weergave
Onveilig
Index.php
Pageclass als body class
<?php$app = JFactory::getApplication();$menu = $app->getMenu();$active = $menu->getActive();$pageclass = ;if(is_object($ac...
body.home {font-size: 120%;}div.left-column {width: 20%;}body.home div.left-column {width: 40%;}
<field name="templateStyle"type="list"default="style1"label="Template Style"description="Kies een stijl voor je template">...
<body class="mediumFont highlightFirstWords">...</body>body.smallFont {font-size: .875em;}body.mediumFont {font-size: 1em;...
body {z-index: 0;}@media (min-width:600px) {body {z-index: 1;}}if ($(body).css(z-index) == 0) {...}if ($(body).css(z-index...
Alternatieveweergaven
ModulesComponenten CategorieënMenuitemsMultilevelMeer info: http://docs.joomla.org/Layout_Overrides_in_Joomla_2.5
Joomla! installationcomponentscom_contentviewsarticletmpldefault.php
Joomla! installationtemplates[Your template]htmlcom_contentarticledefault.phpviewstmpl
Module Alternatieve Weergave
Website nameHome Item1 Item2 Item3 ContactProin sit amet justo interdumnulla commodo dignissim.Proin consequat neque vesti...
Joomla! installationmodulesmod_articles_categorytmpldefault.php
Joomla! installationtemplates[Your template]htmlmod_articles_categorydefault.php
Joomla! installationtemplates[Your template]htmlmod_articles_categoryarticleslider.php
<?php$doc =& JFactory::getDocument();$doc->addScript(...);$doc->addStylesheet(...);?>
<div class="articleslider">...<?php foreach ($list as [list or group]) : ?><li class="slider-item">...<p><?php $images = j...
Website nameHome Item1 Item2 Item3 ContactProin sit amet justo interdumnulla commodo dignissim.Proin consequat neque vesti...
Menu Item Alternatieve Weergave
dl.contact-address dt {display: none;}dl.contact-address dd {margin-left: 0;}.contact-form legend {font-size: 1em;margin-b...
Joomla! installationcomponentscom_contactviewscontacttmpldefault.php
Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly.phpcontact
Joomla! installationcomponentscom_contactviewscontacttmpldefault.xml
Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly.xmlcontact
<layout title="COM_CONTACT_CONTACT_VIEW_DEFAULT_TITLE"option="COM_CONTACT_CONTACT_VIEW_DEFAULT_OPTION"><help key = "JHELP_...
...<div class="span4"><div class="well">[contact info area] ...</div><div class="well"><p>You can use this form in case yo...
Joomla! installationcomponentscom_contactviewscontacttmpldefault_address.php
Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly_address.phpcontact
Joomla! installationcomponentscom_contactviewscontacttmpldefault_form.php
Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly_form.phpcontact
Vragen?
Ga eens met overrides spelen en oefenenProbeer meer uit de core te halenLaat de core met rust! (geen core-hacks)Laat exten...
Gebruik in je volgende website eensmaximaal 2 frontend extensies
@rhcpoort | @theme_partner | @tweepixelswww.themepartner.com | www.tweepixels.nl/academyTimes up
Copyright image on first slide:http://upload.wikimedia.org/wikipedia/commons/3/32/Terry_Evanswood.jpg
Slimme Joomla! Templating Tips en Truuks
Slimme Joomla! Templating Tips en Truuks
Slimme Joomla! Templating Tips en Truuks
Slimme Joomla! Templating Tips en Truuks
Slimme Joomla! Templating Tips en Truuks
Slimme Joomla! Templating Tips en Truuks
Slimme Joomla! Templating Tips en Truuks
Slimme Joomla! Templating Tips en Truuks
Slimme Joomla! Templating Tips en Truuks
Slimme Joomla! Templating Tips en Truuks
Slimme Joomla! Templating Tips en Truuks
Slimme Joomla! Templating Tips en Truuks
Slimme Joomla! Templating Tips en Truuks
Slimme Joomla! Templating Tips en Truuks
Upcoming SlideShare
Loading in...5
×

Slimme Joomla! Templating Tips en Truuks

534

Published on

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!

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

  • Be the first to like this

No Downloads
Views
Total Views
534
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
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 &quot;JED&quot; 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&apos;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 &lt;html&gt; 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 &gt; 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&apos;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 &quot;articleslider&quot;.
  • 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

    1. 1. Slimme Joomla! TemplatingTips en TruuksRobin Poort (@rhcpoort)JD13NL, Zeist, april 2013
    2. 2. Tweepixels.nl/Academytrainer | Joomla!ThemePartner.comdesign / development
    3. 3. Templatesindex.phpModule alternatieve weergaveMenu item alternatieve weergave
    4. 4. Onveilig
    5. 5. Index.php
    6. 6. Pageclass als 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%;}
    9. 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. 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. 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. 12. Alternatieveweergaven
    13. 13. ModulesComponenten CategorieënMenuitemsMultilevelMeer info: http://docs.joomla.org/Layout_Overrides_in_Joomla_2.5
    14. 14. Joomla! installationcomponentscom_contentviewsarticletmpldefault.php
    15. 15. Joomla! installationtemplates[Your template]htmlcom_contentarticledefault.phpviewstmpl
    16. 16. Module Alternatieve Weergave
    17. 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. 18. Joomla! installationmodulesmod_articles_categorytmpldefault.php
    19. 19. Joomla! installationtemplates[Your template]htmlmod_articles_categorydefault.php
    20. 20. Joomla! installationtemplates[Your template]htmlmod_articles_categoryarticleslider.php
    21. 21. <?php$doc =& JFactory::getDocument();$doc->addScript(...);$doc->addStylesheet(...);?>
    22. 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. 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. 24. Menu Item Alternatieve Weergave
    25. 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. 26. Joomla! installationcomponentscom_contactviewscontacttmpldefault.php
    27. 27. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly.phpcontact
    28. 28. Joomla! installationcomponentscom_contactviewscontacttmpldefault.xml
    29. 29. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly.xmlcontact
    30. 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. 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. 32. Joomla! installationcomponentscom_contactviewscontacttmpldefault_address.php
    33. 33. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly_address.phpcontact
    34. 34. Joomla! installationcomponentscom_contactviewscontacttmpldefault_form.php
    35. 35. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly_form.phpcontact
    36. 36. Vragen?
    37. 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. 38. Gebruik in je volgende website eensmaximaal 2 frontend extensies
    39. 39. @rhcpoort | @theme_partner | @tweepixelswww.themepartner.com | www.tweepixels.nl/academyTimes up
    40. 40. Copyright image on first slide:http://upload.wikimedia.org/wikipedia/commons/3/32/Terry_Evanswood.jpg
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×