JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts

WORKSHOP TEMPLATE OVERRIDES & JLAYOUTS Hans Kuijpers, 17-05-2019 JoomlaDagen, Utrecht

HANS KUIJPERS Frontend webdeveloper @hans2103

TEMPLATE OVERRIDE V.S. ALTERNATE LAYOUT 1. Copy & Change bestaande weergave… bijv. com_content/category/blog.php 2. Creatie nieuwe weergave… bijv. com_content/category/calendar.php

WAAROM HEB IK DAT VOOR NODIG? VOORBEELDEN Joomla 3 vol Bootstrap 2 vervangen door ander css framework. Eigen weergave maken zonder 3th party extensie. Custom Fields plaatsen waar jij wil.

WAAROM HEB IK DAT NODIG? REDENEN Geen toepassen core-hacks in Joomla. Gewoon niet doen! Voorkom 3th party extensies. En onderhoud daarvan.

WAAROM WERKT HET? Omdat Joomla met MVC model gemaakt is. Omdat 3th party extensies ook met MVC model gemaakt zijn… hoop ik Dus logica en output zijn gescheiden.

VOORBEELD: COM_CONTENT Template override is mogelijk met alle views. Alternate layout is mogelijk met: Articles Category Alternate layout met eigen menu type is mogelijk met alle views.

INSTELLEN ALTERNATE LAYOUT Globaal via opties van com_content

INSTELLEN ALTERNATE LAYOUT Per categorie / artikel tabblad opties

INSTELLEN ALTERNATE LAYOUT Indien .xml file bestaat kun je een eigen menu type maken.

HOE MAAK JE EEN OVERRIDE? Kopieer default.php van een view. En soms heet het anders, zoals blog.php. components/com_content/views/article/tmpl/defau Plak in de html map van je template. templates/…/html/com_content/article/default.php Wijzig PHP / HTML naar jouw wens Klaar… de standaard output van com_content/article aangepast.

HOE MAAK JE EEN ALTERNATE LAYOUT? Kopieer default.php van een view. En soms heet het anders, zoals blog.php. components/com_content/views/article/tmpl/defau Plak in de html map van je template met een andere n templates/…/html/com_content/article/home.php Wijzig PHP / HTML naar jouw wens Wijzig (in dit geval) de layout van het artikel. Klaar… de alternate layout voor com_content/article i gebruik.

HOE MAAK JE EEN EIGEN MENU ITEM? Herhaal de vorige stappen. Kopieer default.xml van een view. En soms heet het anders, zoals blog.xml. components/com_content/views/article/tmpl/defau Plak in de html map van je template met een andere n templates/…/html/com_content/article/home.xml Wijzig XML naar jouw wens. (in ieder geval layout=>titl layout=>option en layout=>message) Maak een nieuw menu item aan en selecteer je nieuwe

INSTELLEN ALTERNATE LAYOUT MODULE Module tabblad Uitgebreid

HOE MAAK JE EEN MODULE OVERRIDE? Kopieer default.php van een view. modules/mod_articles_category/tmpl/default.php Plak in de html map van je template. templates/…/html/mod_articles_category/default.p Wijzig PHP / HTML naar jouw wens Klaar… de standaard output van mod_articles_catego is aangepast.

HOE MAAK JE EEN ALTERNATE LAYOUT VAN EEN MODULE? Kopieer default.php van een view. modules/mod_articles_category/tmpl/default.php Plak in de html map van je template met een andere naam. templates/…/html/mod_articles_category/list.php Wijzig PHP / HTML naar jouw wens Klaar… de alternate layout van mod_articles_category kan toegepast worden.

EN VERDER… Plugins => mits tmpl aanwezig, op dezelfde manier Taalbestanden => anders… language/overrides/nl-NL.override.ini Of via Joomla Administrator > Extensies > Talen > Overrides jLayouts => straks meer hierover. Eerst zelf aan de slag.

ONZE BASIS VAN VANDAAG: Joomla 3.9.6 met Sample Data Blog English

OPDRACHT - TEMPLATE OVERRIDE Maak een template override van com_content/article. Zoek de plek op waar de tekst opgeroepen wordt. Plaats direct daarna een paragraaf met “Hello world!”. <p>Hello world!</p>

STAPPENPLAN Kopieer default.php van de view van com_content/art components/com_content/views/article/tmpl/defau Plak in de html map van je template. templates/protostar/html/com_content/article/defa Zoek <?php echo $this->item->text; ?> Plak daarachter de code: <p>Hello world!</p> En aanschouw het resultaat. :-)

OPDRACHT - ALTERNATE LAYOUT Maak een alternate layout van com_content/article. Verwijder alle code… alle code Plaats een paragraaf met “Hello world!”. <p>Hello world!</p> Wijs een artikel toe aan deze nieuwe weergave.

STAPPENPLAN Kopieer default.php van de view van com_content/art components/com_content/views/article/tmpl/defau Plak in de html map van je template. templates/protostar/html/com_content/article/hom Verwijder alle code. Plak de volgende code: <p>Hello world!</p> Open artikel in Joomla Administrator en wijs via tabbl Opties de nieuwe weergave toe. En aanschouw het resultaat. :-)

OPDRACHT - ALTERNATE LAYOUT MET MENU ITEM Maak een alternate layout met menu item van com_content/article. Hergebruik de alternate layout van de vorige opdracht. Maak een nieuw menu item van dit nieuwe type. Wijs toe aan een willekeurig artikel.

STAPPENPLAN Kopieer default.xml van de view van com_content/art components/com_content/views/article/tmpl/defau Plak in de html map van je template. templates/protostar/html/com_content/article/hom wijzig op z’n minst het volgende: Home layout attribuut title ( ) Homepage layout attribuut option ( ) layout > message ( Weergave van de homepage ) Maak in Joomla Administrator een menu itemn van he nieuwe menu type verwijzend naar aan willekeurig art En aanschouw het resultaat. :-)

VEELGESTELDE VRAGEN Lijst van uitvouwbare vragen en antwoorden. Te plaatsen onder een artikel. Alternate layout voor mod_articles_category

DETAILS & SUMMARY <details> <summary>Details</summary> Something small enough to escape casual notice. </details> Details Informatie via: MDN web docs Browser support: caniuse.com

OPDRACHT - ALTERNATE LAYOUT MODULE Voorbereiding

Maak een nieuwe module aan voor mod_articles_category. Titel: Veelgestelde vragen Modulepositie: middenboven (position-3) Menutoewijzing: alleen op pagina About Opties voor filteren: Categorie = Blog Toon opties: Introtekst = Toon Toon opties: Toon “Lees meer” = Toon Toon opties: Toon titel in lees-meer = Verberg

OPDRACHT - ALTERNATE LAYOUT MODULE Maak een alternate layout faq van mod_articles_category. Hergebruik de foreach loop in de code voor de nieuwe HTML elementen. <details> <summary>Titel van artikel</summary> Introtext en readmore link </details> Wijs de alternate layout toe aan de zojuist aangemaakte module.

STAPPENPLAN Kopieer default.php van mod_articles_category. modules/mod_articles_category/tmpl/default.php Plak in de html map van je template. templates/protostar/html/mod_articles_category/f Verwijder alle code op de foreach loop na. <?php defined(‘_JEXEC’) or die; ?> <?php foreach ($list as $item) : ?> bla <?php endforeach; ?>

STAPPENPLAN - VERVOLG 1 <?php defined(‘_JEXEC’) or die; ?> 2 <?php foreach ($list as $item) : ?> 3 <details> 4 <summary><?php echo $item->title; ?></summary> 5 <div>bla</div> 6 </details> 7 <?php endforeach; ?>

Kopieer displayIntrotext en readmore uit origineel. 1 <?php defined(‘_JEXEC’) or die; ?> 2 <?php foreach ($list as $item) : ?> 3 <details> 4 <summary><?php echo $item->title; ?></summary> 5 <div> 6 <?php echo $item->displayIntrotext; ?> 7 <p class=”mod-articles-category-readmore”> 8 <a class=”mod-articles-category-title <?php echo $item9 <?php if ($item->params->get(‘access-view’) == false) 10 <?php echo JText::_(‘MOD_ARTICLES_CATEGORY_REGISTER_T 11 <?php elseif ($readmore = $item->alternative_readmore) 12 <?php echo $readmore; ?> 13 <?php echo JHTML::_(‘string.truncate’, $item->title, 14 <?php elseif ($params->get(‘show_readmore_title’, 0) = 15 <?php echo JText::sprintf(‘MOD_ARTICLES_CATEGORY_READ

Voeg css toe via template/protostar/css/user.css details { border: 1px solid #aaa; border-radius: 4px; padding: .5em .5em 0; text-align: left; } summary { font-weight: bold; margin: -.5em -.5em 0; padding: .5em; } details[open] { padding: .5em;

WAT IS EEN JLAYOUT? Bestanden met code, toepasbaar op verschillende plaatsen in Joomla! Duplicate code wordt hiermee bespaard. Bijvoorbeeld de Leesmeer button.

WAAR EN HOE ZIE IK DAT TERUG? components/content/views/category/tmpl/default_ite <?php echo JLayoutHelper::render(‘joomla.content.readmore’, ar components/content/views/category/tmpl/blog_item <?php echo JLayoutHelper::render(‘joomla.content.readmore’, ar

layouts/joomla/content/readmore.php <?php /** * @package * @subpackage * * @copyright * @license */ Joomla.Site Layout Copyright (C) 2005 - 2019 Open Source Matters, GNU General Public License version 2 or later; defined(‘_JEXEC’) or die; $params = $displayData[‘params’]; $item = $displayData[‘item’]; $direction = JFactory::getLanguage()->isRtl() ? ‘left’ : ‘righ ?>

HOE MAAK JE EEN OVERRIDE? Kopieer layouts/joomla/content/readmore.php Plak in de html map van je template. templates/…/html/layouts/joomla/content/readmore.php Wijzig PHP / HTML naar jouw wens Klaar… de jLayout readmore is aangepast. En geldt voor alle plaatsen waar readmore opgeroepen wordt.

HOE MAAK JE EEN EIGEN JLAYOUT FILE? Maak een eigen map in layouts map van html map van je template. templates/…/html/layouts/template/helloworld.php Voeg code toe aan het nieuwe bestand. <p>Hello world!</p> Roep je eigen jLayout op waar je maar wil. <?php echo JLayoutHelper::render(‘template.helloworld’); ?>

OPDRACHT: VERVANG HELLO WORLD! Verplaats de hard-coded <p>Hello world!</p> uit de eerdere opdracht naar een jLayout. Roep de jLayout op in de eerder gemaakte template override en eerder gemaakte alternate layout.

STAPPENPLAN Creëer het bestand helloworld.php in je template map html/layouts/template/ Vul dit bestand met <?php defined(‘_JEXEC’) or die; ?> <p>Hello world!</p> Roep dit bestand op in templates/…/html/com_content/article/default.php templates/…/html/com_content/article/home.php <?php echo JLayoutHelper::render(‘template.helloworld’); ?>

VAN STATISCHE NAAR DYNAMISCHE JLAYOUTS Meegeven van data voor weergave van de jLayout.

HOE GA JE TE WERK? Wijziging in home.php <?php $data = array( ‘aanhef’ => ‘Hello’, ‘naam’ => ‘world!’ ); echo JLayoutHelper::render(‘template.helloworld’, $data); Wijziging in de jLayout <?php defined(‘_JEXEC’) or die; ?> <p><?php echo $displayData[‘aanhef’] . ” ” . $displayData[‘naa

HOE GA JE TE WERK? Wijziging in default.php <?php $data = array( ‘aanhef’ => ‘Hello’, ‘naam’ => $this->item->author ); echo JLayoutHelper::render(‘template.helloworld’, $data); ?>

AANKOMENDE EVENTS De output van een mod_articles_category waarbij de artikelen gesorteerd staan op publicatiedatum.

CodePen.io is a social development environment. Een handige plek om je html, css, javascript en andere programmeertalen te testen, te bewaren en te delen.

OPDRACHT - ALTERNATE LAYOUT MODULE Voorbereiding Maak een nieuwe module mod_articles_category. Titel: Evenementen Modulepositie: middenboven (position-3) Menutoewijzing: alleen op pagina Home Opties voor filteren: Categorie = Blog Toon opties: Gelinkte titels = Ja Toon opties: Daatom = Toon, Startdatum publicatie Toon opties: Introtekst = Toon

OPDRACHT - ALTERNATE LAYOUT MODULE Maak een alternate layout event van mod_articles_category. Hergebruik de foreach loop in de code voor de nieuwe HTML elementen. En plaats daarin één <li> uit de codepen. https://codepen.io/hans2103/pen/OYyRPK Wijs de alternate layout toe aan de zojuist aangemaakte module.

STAPPENPLAN Kopieer CSS vanuit Codepen.io naar user.css. Kopieer default.php van mod_articles_category. modules/mod_articles_category/tmpl/default.php Plak in de html map van je template. templates/protostar/html/mod_articles_category/e Verwijder alle code op de foreach loop na. <?php defined(‘_JEXEC’) or die; ?> <?php foreach ($list as $item) : ?> bla <?php endforeach; ?>

STAPPENPLAN - VERVOLG Wrap de foreach loop in een unordered list. 1 <?php defined(‘_JEXEC’) or die; ?> 2 <ul class=”events__list”> 3 <?php foreach ($list as $item) : ?> 4 bla 5 <?php endforeach; ?> 6 </ul>

STAPPENPLAN - VERVOLG Kopieer en plak één list-item vanuit Codepen. 1 <?php defined(‘_JEXEC’) or die; ?> 2 <ul class=”events__list”> 3 <?php foreach ($list as $item) : ?> 4 <li class=”events__item event”> 5 <div class=”event__date”> 6 <div class=”event__day”>11</div> 7 <div class=”event__month”>nov</div> 8 </div> 9 <div class=”event__body”> 10 <div class=”event__title”> 11 D’n elfde van d’n elfde 12 </div> 13 <div class=”event__content”> 14 Een mooie gelegenheid om een biertje te 15 </div>

STAPPENPLAN - VERVOLG Statische tekst dynamisch maken. PHP commando var_dump() is handig om de items op te zoeken die je gebruiken wil in de override. 1 <?php defined(‘_JEXEC’) or die; ?> 2 <ul class=”events__list”> 3 <?php foreach ($list as $item) : ?> 4 <?php var_dump($item); > 5 <?php endforeach; ?> 6 </ul>

STAPPENPLAN - VERVOLG Statische tekst dynamisch maken. Gebruik de items teruggevonden in de resultaten van var_dump(). <?php defined(‘_JEXEC’) or die; ?> <ul class=”events__list”> <?php foreach ($list as $item) : ?> <li class=”events__item event”> <div class=”event__date”> <div class=”event__day”><?php echo JHtml::_(‘date’, $i <div class=”event__month”><?php echo JHtml::_(‘date’, </div> <div class=”event__body”> <div class=”event__title”> <?php echo $item->title; ?> </div> <div class=”event__content”> <?php echo $item->displayIntrotext; ?> </div>

STAPPENPLAN - VERVOLG Statische tekst dynamisch maken. Vier maal dezelfde datum. Deden we iets fout? Daarom echo $item->created zonder opmaak toevoegen. 1 <?php defined(‘_JEXEC’) or die; ?> 2 <ul class=”events__list”> 3 <?php foreach ($list as $item) : ?> 4 <li class=”events__item event”> 5 <div class=”event__date”> 6 <div class=”event__day”><?php echo JHtml::_(‘date’, 7 <div class=”event__month”><?php echo JHtml::_(‘date 8 </div> 9 <div class=”event__body”> 10 <div class=”event__title”> 11 <?php echo $item->created; ?> 12 <?php echo $item->title; ?> 13 </div>

14 15

<div class=”event__content”> <?php echo $item->displayIntrotext; ?>

DEMO DATA Vier maal dezelfde komt waarschijnlijk door de demo data.

SOCIAL SHARE Artikelen makkelijk delen op Social Media. Niet meer dan een lijst van linkjes met popup.

website: nporadio1.nl

social share via Facebook

social share via Twitter

social share via mail

social share via LinkedIn

HOE IN TE BOUWEN… easy… met een jLayout maar eerst in Codepen.io https://codepen.io/hans2103/pen/VOLobN

OPDRACHT - JLAYOUT SOCIAL SHARE Verwerk een nieuw jLayout onder de overrides van com_content/article https://codepen.io/hans2103/pen/VOLobN Roep de jLayout op in je overrides regel 86 protostar/index.php JHtml::_(‘stylesheet’, ‘//cdnjs.cloudflare.com/ajax/libs/font<?php echo JLayoutHelper::render(‘template.share’); ?>

STAPPENPLAN Kopieer JS vanuit Codepen.io naar user.js Kopieer CSS vanuit Codepen.io naar user.css Maak share.php aan in html/jlayouts/template/ Kopieer het block <div class=”share__wrapper”> naar share.php Wijzig protostar/index.php zodat font-awesome.css ingeladen wordt. Roep je nieuwe jLayout op waar je maar wil… <?php echo JLayoutHelper::render(‘template.share’); ?>

SLIDESHOW - BONUS SLIDES Gebruik geen slideshow in de header van je homepage. Mooie uitleg op de website shouldiuseacarousel.com Maar voor wie het toch wil… middels Bootstrap 2 default aanwezig in Joomla 3 middels Bootstrap 3 en de andere CSS frameworks kun je daarna zelf

BOOTSTRAP 2 Bootstrap 2 carousel

CODEVOORBEELD OP GETBOOTSTRAP.COM <div id=”myCarousel” class=”carousel slide”> <ol class=”carousel-indicators”> <li data-target=”#myCarousel” data-slide-to=”0” class=”act <li data-target=”#myCarousel” data-slide-to=”1”></li> <li data-target=”#myCarousel” data-slide-to=”2”></li> </ol> <!— Carousel items —> <div class=”carousel-inner”> <div class=”active item”>…</div> <div class=”item”>…</div> <div class=”item”>…</div> </div> <!— Carousel nav —> <a class=”carousel-control left” href=”#myCarousel” data-sli <a class=”carousel-control right” href=”#myCarousel” data-sl

STAPPENPLAN Maak een alternate layout slideshow.php van mod_articles_category. Hergebruik de foreach loop in de code voor de nieuwe HTML elementen. Zoe dat de foreach loop zowel bij carouselindicators als bij carousel-inner toegepast moet worden. Plaats bla in de foreach loop en zie het resultaat. Wijs de layout toe als weergave van een nieuwe module.

GEHELE CODE VOOR BS2 <?php defined(‘_JEXEC’) or die; $count = count($list); ?><div id=”myCarousel” class=”carousel slide” data-ride=”carou <ol class=”carousel-indicators”> <?php for ($i = 0; $i < $count; $i++) : ?> <li data-target=”#myCarousel” data-slide-to=”<?php ech class=”<?php echo $i == 0 ? ‘active’ : ”; ?>”></l <?php endfor; ?> </ol> <div class=”carousel-inner”> <?php for ($i = 0; $i < $count; $i++) : ?> <?php $images = json_decode($list[$i]->images); ?> <div class=”item <?php echo $i == 0 ? ‘active’ : ’ <img src=”<?php echo htmlspecialchars($images-

BOOTSTRAP 3 Bootstrap 3 carousel

CODEVOORBEELD OP GETBOOTSTRAP.COM <div id=”carousel-example-generic” class=”carousel slide” data <!— Indicators —> <ol class=”carousel-indicators”> <li data-target=”#carousel-example-generic” data-slide <li data-target=”#carousel-example-generic” data-slide <li data-target=”#carousel-example-generic” data-slide </ol> <!— Wrapper for slides —> <div class=”carousel-inner” role=”listbox”> <div class=”item active”> <img src=”…” alt=”…”> <div class=”carousel-caption”> … </div>

STAPPENPLAN Maak een alternate layout slideshow.php van mod_articles_category. Hergebruik de foreach loop in de code voor de nieuwe HTML elementen. Zoe dat de foreach loop zowel bij carouselindicators als bij carousel-inner toegepast moet worden. Plaats bla in de foreach loop en zie het resultaat. Wijs de layout toe als weergave van een nieuwe module.

GEHELE CODE VOOR BS3 <?php /** * @package * @subpackage * * @copyright * @license */ Joomla.Site mod_articles_category Copyright (C) 2005 - 2019 Open Source Matters, GNU General Public License version 2 or later; defined(‘_JEXEC’) or die; $count = count($list); ?> <div id=”carousel-example-generic” class=”carousel slide” data <!— Indicators —>

VERSCHILLEN Zie dat de html ietwat afwijkt, maar de manier verder gelijk blij … voor elk item in de aangeboden lijst wordt een div gemaakt die gevuld wordt met afbeelding, tekst, link en titel. Pas dezelfde werkwijze toe op de implementaties van andere frameworks.

HANS KUIJPERS Veel plezier met het maken van eigen overrides, alternate layouts en jlayout implementaties. Frontend webdeveloper @hans2103

WORKSHOP TEMPLATE OVERRIDES & JLAYOUTS Hans Kuijpers, 17-05-2019 JoomlaDagen, Utrecht