Template overrides in joomla jug073 februari 2019

JOOMLA! TEMPLATE OVERRIDES ZET JOOMLA NAAR JE EIGEN HAND Presentatie van Hans Kuijpers

WAT IS EEN OVERRIDE? Een bestand dat ingeladen wordt in plaats van Joomla core.

WAAR ZIT DE OVERRIDE? Meestal in de actieve template.

WIE MAAKT DE OVERRIDE? Jij

WIE MAAKT DE OVERRIDE? Jij Echt waar… jij

WAAROM EEN OVERRIDE? Omdat de output van extensie of Joomla core net anders moet.

HOE DAN? Via de makkelijke manier.

HOE DAN? Via de makkelijke manier. Of een nog makkelijkere manier…

DE MAKKELIJKE MANIER

DEMO: AANPASSING VAN MODULE INLOGGEN

BUTTON “LOGIN” VERGROTEN Override maken van module mod_login

JA MAAR… CSS WIJZIGEN KAN TOCH OOK? .login-button { width: 100%; }

MAAR IS NIET NODIG. Protostar gebruikt Bootstrap

JOOMLA ADMINISTRATOR Extensions > Templates > Templates

BEWERK TEMPLATE Protostar Details and Files > Create Overrides > mod_login > klik

KLIK BESTAND OM TE BEWERKEN

ZOEK BUTTON LOGIN

VOEG CLASS .BTN-BLOCK TOE

EN AANSCHOUW HET RESULTAAT

NOG MAKKELIJKERE MANIER Voor mij althans

DEMO: OVERRIDE COM_CONTENT/ARTICLE default.php als verdeelpunt

STAPPENPLAN Kopieer components/com_content/views/article/tmpl/default Plak in template/perfecttemplate/html/com_content/article/ En bewerk En bewerk

STAPPENPLAN Kopieer components/com_content/views/article/tmpl/default Plak in template/perfecttemplate/html/com_content/article/ En bewerk Hernoem default.php naar default_default.php En bewerk

STAPPENPLAN Kopieer components/com_content/views/article/tmpl/default Plak in template/perfecttemplate/html/com_content/article/ En bewerk Hernoem default.php naar default_default.php En maak nieuw bestand default.php aan En bewerk

DEFAULT.PHP switch true i.p.v. if-then-elseif-elseif-else $this->template = JFactory::getApplication()->getTemplate(); require_once JPATH_THEMES . ‘/’ . $this->template . ‘/helper.p switch (true) { case PWTTemplateHelper::isContact(): echo $this->loadTemplate(‘contact’); break; default: echo $this->loadTemplate(‘default’); break; }

OF NOG GEKKER $informativeNL = ‘informatief’; $informativeEN = ‘informative’; $trainingNL = ‘nederlandstalig/trainingen-workshops’; $trainingEN = ‘engelstalig/courses-and-workshops’; $opleidingNL = ‘nederlandstalig/opleidingen’; $opleidingEN = ‘engelstalig/teacher-training’; $peopleNL = ‘mensen’; $peopleEN = ‘people’; $publicatieNL = ‘nederlandstalig/bronnen/publicaties’; $publicatieEN = ‘engelstalig/resources/publications’; $newsNL = ‘nieuws’;

JLAYOUTS Nog toffer speelgoed

JLAYOUTS Nog toffer speelgoed Don’t repeat yourself

DEMO: SOCIAL SHARE OP DE WEBSITE Wat is het?

DEMO: SOCIAL SHARE OP DE WEBSITE Wat is het? Lijstje met links om content te delen via Social Media

JOOMLA EXTENSION DIRECTORY Uren zoeken naar die ene die er niet is

EIGEN JLAYOUT Voorbeeldcode op Github zelf CSS toevoegen.

COM_CONTENT/CATEGORY Nog een eenvoudige om het af te leren

CATEGORY BLOG VIEW Toont titels van artikelen uit bepaalde category Toont description van category

STAPPENPLAN Kopieer blog.xml, blog.php en blog_item.php Vanuit components/com_content/views/category/tmp Naar template/perfecttemplate/html/com_content/categor En hernoem blog naar motto

MOTTO.XML Benodigd voor menu item type = Motto <layout title=”Motto” option=”Motto”> <help key = “JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG” <message> <![CDATA[‘Weergave van het motto door de jaren heen]]> </message> </layout>

MAAK MENU ITEM

BEWERK MOTTO.PHP <div class=”page__header”> <h1><?php echo $this->escape($this->params->get(‘page_head </div> <?php if (!empty($this->intro_items)) : ?> <div class=”page__content”> <div class=”page__description”> <?php echo HTMLHelper::_(‘content.prepare’, $this->cat </div> <ul><?php foreach ($this->intro_items as $key => &$item) : $this->item = &$item; echo $this->loadTemplate(‘item’); endforeach; ?> </ul> </div>

BEWERK MOTTO_ITEM.PHP $state = ($this->item->state == 0 || strtotime($this->item->pu ?> <li class=”<?php echo $state; ?>”> <?php echo $this->item->title; ?> </li>

DANK JE WEL

SLIDES Slideshare.net/hans2103