best practice: joomla! templating
TRANSCRIPT
![Page 1: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/1.jpg)
Best Practice: JoomlaTemplating
Hans Kuijpers
![Page 2: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/2.jpg)
TIP 1 - de basis
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 2 of 56
![Page 3: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/3.jpg)
Begin met een basisvia Joomla.org meest recente versie downloaden
installeren op hostingomgeving
handige extensies downloaden en installeren
tof template downloaden en installeren
standaard instellingen wijzigen
accounts aanmaken
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 3 of 56
![Page 4: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/4.jpg)
Begin met een basisvia Joomla.org meest recente versie downloaden
installeren op hostingomgeving
handige extensies downloaden en installeren
tof template downloaden en installeren
standaard instellingen wijzigen
accounts aanmaken
een boel tijd verloren
en nu pas aan de slag
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 4 of 56
![Page 5: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/5.jpg)
Begin met een goede basisHeb ergens een basis Joomla! site staan
Rol die uit op je lokale ontwikkelomgeving
En ga aan de slag
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 5 of 56
![Page 6: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/6.jpg)
Eenmalig eigen basis opzettenInvesteer eenmalig tijd in een goede basis
Gebruik als kickstart voor ieder template-project
Beheer basis via bijvoorbeeld een github-repo
Maak bibliotheek van overrides, JavaScript, SCSS
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 6 of 56
![Page 7: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/7.jpg)
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 7 of 56
![Page 8: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/8.jpg)
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 8 of 56
![Page 9: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/9.jpg)
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 9 of 56
![Page 10: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/10.jpg)
TIP 2 - automatiseerwaar mogelijk
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 10 of 56
![Page 11: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/11.jpg)
Building toolsZoveel mogelijk stappen automatiseren
Snel en eenvoudig
Performance verbeteren
Fouten minimaliseren
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 11 of 56
![Page 12: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/12.jpg)
Welke taken?LESS of SASS compileren naar CSS
SASS source map aanmaken
JavaScript samenvoegen
CSS of JavaScript minifyen
Git commits, pushen en pullen
Afbeeldingen comprimeren
Bestanden kopieren
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 12 of 56
![Page 13: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/13.jpg)
Welke taken?LESS of SASS compileren naar CSS
SASS source map aanmaken
JavaScript samenvoegen
CSS of JavaScript minifyen
Git commits, pushen en pullen
Afbeeldingen comprimeren
Bestanden kopieren
Bijvoorbeeld met Grunt
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 13 of 56
![Page 14: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/14.jpg)
Grunt task sass compilatieSCSS => CSS'use strict';
//module.exports = { dist: { options: { includePaths: [ require("bourbon").includePaths, require("bourbon-neat").includePaths, require("node-normalize-scss").includePaths ] }, files: { '<%= paths.template %>/css/style.css': '<%= paths.assets %>/scss/style.scss', '<%= paths.template %>/css/grid.css': '<%= paths.assets %>/scss/grid.scss', '<%= paths.template %>/css/font.css': '<%= paths.assets %>/scss/font.scss' } }};
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 14 of 56
![Page 15: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/15.jpg)
TIP 3 - SCSS mixins forthe win
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 15 of 56
![Page 16: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/16.jpg)
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 16 of 56
![Page 17: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/17.jpg)
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 17 of 56
![Page 18: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/18.jpg)
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 18 of 56
![Page 19: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/19.jpg)
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 19 of 56
![Page 20: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/20.jpg)
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 20 of 56
![Page 21: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/21.jpg)
section/_heading.scss.section { @include e('heading') { @include m('light') { @include heading($quarter-spanish-white); }
@include m('white') { @include heading(white); }
@include m('image') { @include heading--clipart; } }}
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 21 of 56
![Page 22: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/22.jpg)
@include heading -> mixin heading@mixin heading($bgcolor: white) { @include heading--base; @include arrow-bottom(2.5em, 50, transparent, $bgcolor);}
@mixin heading--clipart { @include heading--base; @include arrow-bottom-clipart(50);}
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 22 of 56
![Page 23: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/23.jpg)
@include arrow-button -> mixinarrow-button
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 23 of 56
![Page 24: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/24.jpg)
Met css als resultaatscss -> css
vendorprefix
minified
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 24 of 56
![Page 25: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/25.jpg)
TIP 4 - detemplateHelper
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 25 of 56
![Page 26: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/26.jpg)
Template - Protostar126: <!DOCTYPE html>127: <html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">128: <head>129: <meta name="viewport" content="width=device-width, initial-scale=1.0" />130: <jdoc:include type="head" />131: </head>132: <body class="site <?php echo $option133: . ' view-' . $view134: . ($layout ? ' layout-' . $layout : ' no-layout')135: . ($task ? ' task-' . $task : ' no-task')136: . ($itemid ? ' itemid-' . $itemid : '')137: . ($params->get('fluidContainer') ? ' fluid' : '');138: echo ($this->direction === 'rtl' ? ' rtl' : '');139:?>">
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 26 of 56
![Page 27: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/27.jpg)
Template - Protostar126: <!DOCTYPE html>127: <html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">128: <head>129: <meta name="viewport" content="width=device-width, initial-scale=1.0" />130: <jdoc:include type="head" />131: </head>132: <body class="site <?php echo $option133: . ' view-' . $view134: . ($layout ? ' layout-' . $layout : ' no-layout')135: . ($task ? ' task-' . $task : ' no-task')136: . ($itemid ? ' itemid-' . $itemid : '')137: . ($params->get('fluidContainer') ? ' fluid' : '');138: echo ($this->direction === 'rtl' ? ' rtl' : '');139:?>">
Pas op regel 126 begint de HTML pagina.Daarvoor alleen maar PHP functies
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 27 of 56
![Page 28: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/28.jpg)
Nadelenfoutgevoelig
geen overzicht
moeilijk herbruikbaar in overrides
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 28 of 56
![Page 29: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/29.jpg)
Nadelenfoutgevoelig
geen overzicht
moeilijk herbruikbaar in overrides
Conflicten gegarandeerd!(en dus debug-uren)
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 29 of 56
![Page 30: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/30.jpg)
Template - PerfectTemplate24: <!DOCTYPE html>25: <html class="html no-js" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">26: <head>27: <jdoc:include type="head"/>28: <noscript>29: <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/font.css" rel="stylesheet" type="text/css"/>30: </noscript>31: </head>32: <body class="<?php echo PWTTemplateHelper::getBodySuffix(); ?>">33: <?php echo PWTTemplateHelper::getAnalytics(2,'GTM-XXXXXX')['script']; ?>
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 30 of 56
![Page 31: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/31.jpg)
Template - PerfectTemplate24: <!DOCTYPE html>25: <html class="html no-js" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">26: <head>27: <jdoc:include type="head"/>28: <noscript>29: <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/font.css" rel="stylesheet" type="text/css"/>30: </noscript>31: </head>32: <body class="<?php echo PWTTemplateHelper::getBodySuffix(); ?>">33: <?php echo PWTTemplateHelper::getAnalytics(2,'GTM-XXXXXX')['script']; ?>
100 regels eerder begint de HTML paginaDe PHP functies zijn verplaatst
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 31 of 56
![Page 32: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/32.jpg)
De eerste 25 regels code<?php/* * @package perfecttemplate * @copyright Copyright (c) Perfect Web Team / perfectwebteam.nl * @license GNU General Public License version 3 or later */
// No direct access.defined('_JEXEC') or die;
// Load Perfect Template Helperrequire_once JPATH_THEMES . '/' . $this->template . '/helper.php';require_once JPATH_THEMES . '/' . $this->template . '/html/layouts/render.php';
PWTTemplateHelper::setMetadata();PWTTemplateHelper::setFavicon();PWTTemplateHelper::unloadCss();PWTTemplateHelper::unloadJs();PWTTemplateHelper::loadCss();PWTTemplateHelper::loadJs();PWTTemplateHelper::localstorageFont();PWTTemplateHelper::ajaxSVG();?>
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 32 of 56
![Page 33: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/33.jpg)
Bij fouten makkelijk uit te schakelen<?php/* * @package perfecttemplate * @copyright Copyright (c) Perfect Web Team / perfectwebteam.nl * @license GNU General Public License version 3 or later */
// No direct access.defined('_JEXEC') or die;
// Load Perfect Template Helperrequire_once JPATH_THEMES . '/' . $this->template . '/helper.php';require_once JPATH_THEMES . '/' . $this->template . '/html/layouts/render.php';
PWTTemplateHelper::setMetadata();PWTTemplateHelper::setFavicon();//PWTTemplateHelper::unloadCss();//PWTTemplateHelper::unloadJs();//PWTTemplateHelper::loadCss();//PWTTemplateHelper::loadJs();//PWTTemplateHelper::localstorageFont();//PWTTemplateHelper::ajaxSVG();?>
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 33 of 56
![Page 34: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/34.jpg)
Helper.php - snippetclass PWTTemplateHelper{
static public function template() { return JFactory::getApplication()->getTemplate(); }
static public function loadCss() { JFactory::getDocument()->addStyleSheet('templates/' . self::template() . '/css/style.css'); }
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 34 of 56
![Page 35: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/35.jpg)
Helper.php - snippetclass PWTTemplateHelper{
static public function template() { return JFactory::getApplication()->getTemplate(); }
static public function loadCss() { JFactory::getDocument()->addStyleSheet('templates/' . self::template() . '/css/style.css'); }
Resulteert in <link href="/templates/perfecttemplate/css/style.css" rel="stylesheet" type="text/css" />
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 35 of 56
![Page 36: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/36.jpg)
Body classes die de weg wijzenclass PWTTemplateHelper{ static public function getBodySuffix() { $classes = array(); $classes[] = 'option-' . self::getPageOption(); $classes[] = 'view-' . self::getPageView(); $classes[] = self::getPageLayout() ? 'layout-' . self::getPageLayout() : 'no-layout'; $classes[] = self::getPageTask() ? 'task-' . self::getPageTask() : 'no-task'; $classes[] = 'itemid-' . self::getItemId(); $classes[] = self::getPageClass(); $classes[] = self::isHome() ? 'path-home' : 'path-' . implode('-', self::getPath('array')); $classes[] = 'home-' . (int) self::isHome();
return implode(' ', $classes); }
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 36 of 56
![Page 37: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/37.jpg)
Body classes die de weg wijzenclass PWTTemplateHelper{ static public function getBodySuffix() { $classes = array(); $classes[] = 'option-' . self::getPageOption(); $classes[] = 'view-' . self::getPageView(); $classes[] = self::getPageLayout() ? 'layout-' . self::getPageLayout() : 'no-layout'; $classes[] = self::getPageTask() ? 'task-' . self::getPageTask() : 'no-task'; $classes[] = 'itemid-' . self::getItemId(); $classes[] = self::getPageClass(); $classes[] = self::isHome() ? 'path-home' : 'path-' . implode('-', self::getPath('array')); $classes[] = 'home-' . (int) self::isHome();
return implode(' ', $classes); }
Resulteert in<body class="option-com-content view-category layout-blog no-task itemid-130 path-nieuws home-0">
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 37 of 56
![Page 38: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/38.jpg)
Eigen Meta data toevoegenfuncties aanmaken in helper.php
functies oproepen in index.php
frontend verversen en bekijk het resultaat
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 38 of 56
![Page 39: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/39.jpg)
Eigen Meta data toevoegenhelper.phpclass PWTTemplateHelper{ static public function setGenerator($generator) { JFactory::getDocument()->setGenerator($generator); }
static public function setMetadata() { $doc = JFactory::getDocument();
$doc->setCharset('utf8'); $doc->setMetaData('X-UA-Compatible', 'IE=edge', true); $doc->setMetaData('viewport', 'width=device-width, initial-scale=1.0'); }
static public function getSitename() { return JFactory::getConfig()->get('sitename'); }
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 39 of 56
![Page 40: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/40.jpg)
Eigen Meta data toevoegenindex.php// Load Perfect Template Helperrequire_once JPATH_THEMES . '/' . $this->template . '/helper.php';
PWTTemplateHelper::setMetadata();PWTTemplateHelper::setGenerator(PWTTemplateHelper::getSitename());
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 40 of 56
![Page 41: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/41.jpg)
Eigen Meta data toevoegenhet resultaat <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="generator" content="Custom Management" />
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 41 of 56
![Page 42: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/42.jpg)
Eigen Meta data toevoegenhet resultaat <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="generator" content="Custom Management" />
Controle over de head
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 42 of 56
![Page 43: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/43.jpg)
TIP 5 - gebruikJLayout(s)
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 43 of 56
![Page 44: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/44.jpg)
JLayout?, nog even herhalen aub.manier om (klein stukje) weergave op te bouwen
enkel layout bestand met specifieke output
data variabel meesturen
zit in layouts/joomla
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 44 of 56
![Page 45: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/45.jpg)
Voordelen gebruik JLayoutherbruikbaar door gehele site (template en extensies)
aanpassingen één keer doorvoeren in plaats op diverse plekken
niet langer copy/pasten van code in template overrides
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 45 of 56
![Page 46: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/46.jpg)
Voordelen gebruik JLayoutherbruikbaar door gehele site (template en extensies)
aanpassingen één keer doorvoeren in plaats op diverse plekken
niet langer copy/pasten van code in template overrides
herbruikbaar in verschillende projecten
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 46 of 56
![Page 47: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/47.jpg)
Eigen JLayouts functiehtml/layouts/render.php
class Jlayouts{ public static function render($type, $data = '') { $template = JFactory::getApplication()->getTemplate(); $jlayout = new JLayoutFile($type, JPATH_THEMES . '/' . $template . '/html/layouts/template');
return $jlayout->render($data); }
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 47 of 56
![Page 48: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/48.jpg)
Eigen JLayouts functiehtml/layouts/render.php
class Jlayouts{ public static function render($type, $data = '') { $template = JFactory::getApplication()->getTemplate(); $jlayout = new JLayoutFile($type, JPATH_THEMES . '/' . $template . '/html/layouts/template');
return $jlayout->render($data); }
Zorgt er voor dat eigen JLayouts vanuit html/layouts/template/opgeroepen kunnen worden.
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 48 of 56
![Page 49: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/49.jpg)
Eigen JLayouts voor datum notatietoegepast in html/categories/blog_item.php
if ($params->get('show_publish_date')) : echo JLayoutHelper::render('template.content.create_date', array('date' => $this->item->created, 'format' => 'DATE_FORMAT_CC1'));endif;
vraagt om html/layouts/template/content/create_date.php
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 49 of 56
![Page 50: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/50.jpg)
Eigen JLayouts voor datum notatietoegepast in html/categories/blog_item.php
if ($params->get('show_publish_date')) : echo JLayoutHelper::render('template.content.create_date', array('date' => $this->item->created, 'format' => 'DATE_FORMAT_CC1'));endif;
vraagt om html/layouts/template/content/create_date.php
Datum is taalstringoverride in language/overrides/nl-NL-override.ini
DATE_FORMAT_CC1="F Y"
output: maand jaar
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 50 of 56
![Page 51: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/51.jpg)
Eigen JLayouts - inhoudhtml/layouts/template/content/create_date.php
<?phpdefined('JPATH_BASE') or die;
$date = $displayData['date'];$class = isset($displayData['class']) ? $displayData['class'] : 'content';$format = JText::_($displayData['format']);
echo '<span class="' . $class . '__create">';echo '<time datetime="' . JHtml::_('date', $date, 'c') . '" itemprop = "dateCreated" >';echo JHtml::_('date', $date, $format);echo '</time>';echo '</span>';
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 51 of 56
![Page 52: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/52.jpg)
Eigen JLayouts - inhoudhtml/layouts/template/content/create_date.php
<?phpdefined('JPATH_BASE') or die;
$date = $displayData['date'];$class = isset($displayData['class']) ? $displayData['class'] : 'content';$format = JText::_($displayData['format']);
echo '<span class="' . $class . '__create">';echo '<time datetime="' . JHtml::_('date', $date, 'c') . '" itemprop = "dateCreated" >';echo JHtml::_('date', $date, $format);echo '</time>';echo '</span>';
Resulteert in<span class="content__create"><time datetime="2017-02-17T10:31:00+01:00" itemprop="dateCreated">februari 2017</time></span>
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 52 of 56
![Page 53: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/53.jpg)
Eigen JLayouts - Google Mapshtml/layouts/template/blocks/gmap.php
op te roepen via:
<?php echo Jlayouts::render('block-gmap'); ?>
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 53 of 56
![Page 54: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/54.jpg)
Eigen JLayouts - Google Maps
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 54 of 56
![Page 55: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/55.jpg)
Eigen JLayouts - Gmap
Best Practise: Joomla! templating - Hans Kuijpers - Joomla!dagen 2017 - 55 of 56
![Page 56: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/56.jpg)
Bedankt!Hans Kuijpers
@hans2103
![Page 57: Best Practice: Joomla! templating](https://reader030.vdocuments.mx/reader030/viewer/2022032711/58ef912e1a28ab28278b45a7/html5/thumbnails/57.jpg)