Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WORKSHOPWORKSHOP
TEMPLATETEMPLATE
OVERRIDES &OVERRIDES &
JLAYOUTSJLAYOUTS
Hans Kuijpers, 17-05-2019
JoomlaDagen, Utrecht
HANS KUIJPERSHANS KUIJPERS
Frontend webdeveloper
@hans2103
TEMPLATE OVERRIDETEMPLATE OVERRIDE
V.S.V.S.
ALTERNATE LAYOUTALTERNATE LAYOUT
1. Copy & Change bestaande weergave...
bijv. ...
WAAROM HEB IK DAT VOORWAAROM HEB IK DAT VOOR
NODIG?NODIG?
VOORBEELDENVOORBEELDEN
Joomla 3 vol Bootstrap 2 vervangen door a...
WAAROM HEB IK DAT NODIG?WAAROM HEB IK DAT NODIG?
REDENENREDENEN
Geen toepassen core-hacks in Joomla.
Gewoon niet doen!
Voo...
WAAROM WERKT HET?WAAROM WERKT HET?
Omdat Joomla met MVC model gemaakt is.
Omdat 3th party extensies ook met MVC model
gema...
VOORBEELD: COM_CONTENTVOORBEELD: COM_CONTENT
Template override is
mogelijk met alle views.
Alternate layout is
mogelijk me...
INSTELLEN ALTERNATE LAYOUTINSTELLEN ALTERNATE LAYOUT
Globaal via opties van com_content
INSTELLEN ALTERNATE LAYOUTINSTELLEN ALTERNATE LAYOUT
Per categorie / artikel tabblad opties
INSTELLEN ALTERNATE LAYOUTINSTELLEN ALTERNATE LAYOUT
Indien .xml file bestaat
kun je een eigen menu
type maken.
HOE MAAK JE EEN OVERRIDE?HOE MAAK JE EEN OVERRIDE?
Kopieer default.php van een view.
En soms heet het anders, zoals blog.p...
HOE MAAK JE EEN ALTERNATEHOE MAAK JE EEN ALTERNATE
LAYOUT?LAYOUT?
Kopieer default.php van een view.
En soms heet het ander...
HOE MAAK JE EEN EIGEN MENUHOE MAAK JE EEN EIGEN MENU
ITEM?ITEM?
Herhaal de vorige stappen.
Kopieer default.xml van een vie...
INSTELLEN ALTERNATE LAYOUTINSTELLEN ALTERNATE LAYOUT
MODULEMODULE
Module tabblad Uitgebreid
HOE MAAK JE EEN MODULEHOE MAAK JE EEN MODULE
OVERRIDE?OVERRIDE?
Kopieer default.php van een view.
modules/mod_articles_cat...
HOE MAAK JE EEN ALTERNATEHOE MAAK JE EEN ALTERNATE
LAYOUT VAN EEN MODULE?LAYOUT VAN EEN MODULE?
Kopieer default.php van ee...
EN VERDER...EN VERDER...
Plugins => mits tmpl aanwezig, op dezelfde manier
Taalbestanden => anders...
language/overrides/n...
ONZE BASIS VAN VANDAAG:ONZE BASIS VAN VANDAAG:
Joomla 3.9.6 met Sample Data Blog English
OPDRACHT - TEMPLATEOPDRACHT - TEMPLATE
OVERRIDEOVERRIDE
Maak een template override van
com_content/article.
Zoek de plek o...
STAPPENPLANSTAPPENPLAN
Kopieer default.php van de view van com_content/art
components/com_content/views/article/tmpl/defau...
OPDRACHT - ALTERNATE LAYOUTOPDRACHT - ALTERNATE LAYOUT
Maak een alternate layout van com_content/article.
Verwijder alle c...
STAPPENPLANSTAPPENPLAN
Kopieer default.php van de view van com_content/art
components/com_content/views/article/tmpl/defau...
OPDRACHT - ALTERNATE LAYOUTOPDRACHT - ALTERNATE LAYOUT
MET MENU ITEMMET MENU ITEM
Maak een alternate layout met menu item ...
STAPPENPLANSTAPPENPLAN
Kopieer default.xml van de view van com_content/art
components/com_content/views/article/tmpl/defau...
VEELGESTELDE VRAGENVEELGESTELDE VRAGEN
Lijst van uitvouwbare vragen en antwoorden.
Te plaatsen onder een artikel.
Alternat...
DETAILS & SUMMARYDETAILS & SUMMARY
Details
Informatie via:
Browser support:
<details>
<summary>Details</summary>
Something...
OPDRACHT - ALTERNATE LAYOUTOPDRACHT - ALTERNATE LAYOUT
MODULEMODULE
Voorbereiding
Maak een nieuwe module aan voor
mod_articles_category.
Titel: Veelgestelde vragen
Modulepositie: middenboven (position-3)
...
OPDRACHT - ALTERNATE LAYOUTOPDRACHT - ALTERNATE LAYOUT
MODULEMODULE
Maak een alternate layout faq van
mod_articles_categor...
STAPPENPLANSTAPPENPLAN
Kopieer default.php van mod_articles_category.
modules/mod_articles_category/tmpl/default.php
Plak ...
STAPPENPLAN - VERVOLGSTAPPENPLAN - VERVOLG
<details>
<summary><?php echo $item->title; ?></summary>
<div>bla</div>
</detai...
Kopieer displayIntrotext en readmore uit origineel.
<?php echo $item->displayIntrotext; ?>
<p class="mod-articles-category...
Voeg css toe via template/protostar/css/user.css
details {
border: 1px solid #aaa;
border-radius: 4px;
padding: .5em .5em ...
WAT IS EEN JLAYOUT?WAT IS EEN JLAYOUT?
Bestanden met code,
toepasbaar op
verschillende plaatsen in
Joomla!
Duplicate code ...
WAAR EN HOE ZIE IK DAT TERUG?WAAR EN HOE ZIE IK DAT TERUG?
components/content/views/category/tmpl/default_ite
components/c...
layouts/joomla/content/readmore.php
<?php
/**
* @package Joomla.Site
* @subpackage Layout
*
* @copyright Copyright (C) 200...
HOE MAAK JE EEN OVERRIDE?HOE MAAK JE EEN OVERRIDE?
Kopieer layouts/joomla/content/readmore.php
Plak in de html map van je ...
HOE MAAK JE EEN EIGENHOE MAAK JE EEN EIGEN
JLAYOUT FILE?JLAYOUT FILE?
Maak een eigen map in layouts map van html map
van j...
OPDRACHT: VERVANG HELLOOPDRACHT: VERVANG HELLO
WORLD!WORLD!
Verplaats de hard-coded <p>Hello world!</p>
uit de eerdere opd...
STAPPENPLANSTAPPENPLAN
Creëer het bestand helloworld.php in je template map
html/layouts/template/
Vul dit bestand met
Roe...
VAN STATISCHE NAARVAN STATISCHE NAAR
DYNAMISCHE JLAYOUTSDYNAMISCHE JLAYOUTS
Meegeven van data voor weergave van de jLayout.
HOE GA JE TE WERK?HOE GA JE TE WERK?
Wijziging in home.php
Wijziging in de jLayout
<?php
$data = array(
'aanhef' => 'Hello...
HOE GA JE TE WERK?HOE GA JE TE WERK?
Wijziging in default.php
<?php
$data = array(
'aanhef' => 'Hello',
'naam' => $this->i...
AANKOMENDE EVENTSAANKOMENDE EVENTS
De output van een mod_articles_category waarbij de
artikelen gesorteerd staan op public...
CodePen.io is a social development environment.
Een handige plek om je html, css, javascript en andere
programmeertalen te...
OPDRACHT - ALTERNATE LAYOUTOPDRACHT - ALTERNATE LAYOUT
MODULEMODULE
Voorbereiding
Maak een nieuwe module mod_articles_cate...
OPDRACHT - ALTERNATE LAYOUTOPDRACHT - ALTERNATE LAYOUT
MODULEMODULE
Maak een alternate layout event van
mod_articles_categ...
STAPPENPLANSTAPPENPLAN
Kopieer CSS vanuit Codepen.io naar user.css.
Kopieer default.php van mod_articles_category.
modules...
STAPPENPLAN - VERVOLGSTAPPENPLAN - VERVOLG
Wrap de foreach loop in een unordered list.
<ul class="events__list">
</ul>
<?p...
STAPPENPLAN - VERVOLGSTAPPENPLAN - VERVOLG
Kopieer en plak één list-item vanuit Codepen.
<li class="events__item event">
<...
STAPPENPLAN - VERVOLGSTAPPENPLAN - VERVOLG
Statische tekst dynamisch maken.
PHP commando var_dump() is handig om de items
...
STAPPENPLAN - VERVOLGSTAPPENPLAN - VERVOLG
Statische tekst dynamisch maken.
Gebruik de items teruggevonden in de resultate...
STAPPENPLAN - VERVOLGSTAPPENPLAN - VERVOLG
Statische tekst dynamisch maken.
Vier maal dezelfde datum. Deden we iets fout?
...
<div class="event__content">14
<?php echo $item->displayIntrotext; ?>15
DEMO DATADEMO DATA
Vier maal dezelfde komt waarschijnlijk door de demo
data.
SOCIAL SHARESOCIAL 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...HOE IN TE BOUWEN...
easy...
met een jLayout
maar eerst in Codepen.io
https://codepen.io/hans2103/pen/VO...
OPDRACHT - JLAYOUT SOCIALOPDRACHT - JLAYOUT SOCIAL
SHARESHARE
Verwerk een nieuw jLayout onder de overrides
van com_content...
STAPPENPLANSTAPPENPLAN
Kopieer JS vanuit Codepen.io naar user.js
Kopieer CSS vanuit Codepen.io naar user.css
Maak share.ph...
SLIDESHOW - BONUS SLIDESSLIDESHOW - BONUS SLIDES
Gebruik geen slideshow in de header van je homepage.
Mooie uitleg op de w...
BOOTSTRAP 2BOOTSTRAP 2
Bootstrap 2 carousel
CODEVOORBEELD OPCODEVOORBEELD OP
GETBOOTSTRAP.COMGETBOOTSTRAP.COM
<div id="myCarousel" class="carousel slide">
<ol class="...
STAPPENPLANSTAPPENPLAN
Maak een alternate layout slideshow.php van
mod_articles_category.
Hergebruik de foreach loop in de...
GEHELE CODE VOOR BS2GEHELE CODE VOOR BS2
<?php
defined('_JEXEC') or die;
$count = count($list);
?><div id="myCarousel" cla...
BOOTSTRAP 3BOOTSTRAP 3
Bootstrap 3 carousel
CODEVOORBEELD OPCODEVOORBEELD OP
GETBOOTSTRAP.COMGETBOOTSTRAP.COM
<div id="carousel-example-generic" class="carousel slide...
STAPPENPLANSTAPPENPLAN
Maak een alternate layout slideshow.php van
mod_articles_category.
Hergebruik de foreach loop in de...
GEHELE CODE VOOR BS3GEHELE CODE VOOR BS3
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
*
* @copyrig...
VERSCHILLENVERSCHILLEN
Zie dat de html ietwat afwijkt, maar de manier verder
gelijk blij ... voor elk item in de aangebode...
HANS KUIJPERSHANS KUIJPERS
Veel plezier met het maken van eigen overrides,
alternate layouts en jlayout implementaties.
Fr...
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts
Upcoming SlideShare
Loading in …5
×

JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts

459 views

Published on

Waarom een 3rd party extensie gebruiken als Joomla core de benodigde content al bevat? Een kalender, slideshow, carrousel en smoelenboek. Allemaal met Joomla, zonder uitbreiding van 3th party extensies.
Met deze workshop legt Hans Kuijpers aan de hand van vele voorbeelden uit hoe je template overrides en jLayouts toepast. Als deelnemer ga je ook zelf aan de slag. Dus neem je laptop mee en zorg ervoor dat je met een Joomla website aan de slag kunt. We gaan dingen stuk maken, dus pak niet de website die nu live staat. Voorkennis van PHP, HTML, JS en CSS is wel handig. Een dosis Gezond BoerenVerstand is nog veel belangrijker.

Deze workshop was op vrijdag 17 mei 2019 tijdens de Nederlandse JoomlaDagen. #jd19nl

Published in: Internet
  • Be the first to comment

JD19NL - Joomla Template Overrides, Alternate Layouts en JLayouts

  1. 1. WORKSHOPWORKSHOP TEMPLATETEMPLATE OVERRIDES &OVERRIDES & JLAYOUTSJLAYOUTS Hans Kuijpers, 17-05-2019 JoomlaDagen, Utrecht
  2. 2. HANS KUIJPERSHANS KUIJPERS Frontend webdeveloper @hans2103
  3. 3. TEMPLATE OVERRIDETEMPLATE OVERRIDE V.S.V.S. ALTERNATE LAYOUTALTERNATE LAYOUT 1. Copy & Change bestaande weergave... bijv. com_content/category/blog.php 2. Creatie nieuwe weergave... bijv. com_content/category/calendar.php
  4. 4. WAAROM HEB IK DAT VOORWAAROM HEB IK DAT VOOR NODIG?NODIG? VOORBEELDENVOORBEELDEN Joomla 3 vol Bootstrap 2 vervangen door ander css framework. Eigen weergave maken zonder 3th party extensie. Custom Fields plaatsen waar jij wil.
  5. 5. WAAROM HEB IK DAT NODIG?WAAROM HEB IK DAT NODIG? REDENENREDENEN Geen toepassen core-hacks in Joomla. Gewoon niet doen! Voorkom 3th party extensies. En onderhoud daarvan.
  6. 6. WAAROM WERKT HET?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.
  7. 7. VOORBEELD: COM_CONTENTVOORBEELD: 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.
  8. 8. INSTELLEN ALTERNATE LAYOUTINSTELLEN ALTERNATE LAYOUT Globaal via opties van com_content
  9. 9. INSTELLEN ALTERNATE LAYOUTINSTELLEN ALTERNATE LAYOUT Per categorie / artikel tabblad opties
  10. 10. INSTELLEN ALTERNATE LAYOUTINSTELLEN ALTERNATE LAYOUT Indien .xml file bestaat kun je een eigen menu type maken.
  11. 11. HOE MAAK JE EEN OVERRIDE?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.
  12. 12. HOE MAAK JE EEN ALTERNATEHOE MAAK JE EEN ALTERNATE LAYOUT?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.
  13. 13. HOE MAAK JE EEN EIGEN MENUHOE MAAK JE EEN EIGEN MENU ITEM?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
  14. 14. INSTELLEN ALTERNATE LAYOUTINSTELLEN ALTERNATE LAYOUT MODULEMODULE Module tabblad Uitgebreid
  15. 15. HOE MAAK JE EEN MODULEHOE MAAK JE EEN MODULE OVERRIDE?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.
  16. 16. HOE MAAK JE EEN ALTERNATEHOE MAAK JE EEN ALTERNATE LAYOUT VAN EEN MODULE?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.
  17. 17. EN VERDER...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.
  18. 18. ONZE BASIS VAN VANDAAG:ONZE BASIS VAN VANDAAG: Joomla 3.9.6 met Sample Data Blog English
  19. 19. OPDRACHT - TEMPLATEOPDRACHT - TEMPLATE OVERRIDEOVERRIDE 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>
  20. 20. STAPPENPLANSTAPPENPLAN 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. :-)
  21. 21. OPDRACHT - ALTERNATE LAYOUTOPDRACHT - 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.
  22. 22. STAPPENPLANSTAPPENPLAN 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. :-)
  23. 23. OPDRACHT - ALTERNATE LAYOUTOPDRACHT - ALTERNATE LAYOUT MET MENU ITEMMET 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.
  24. 24. STAPPENPLANSTAPPENPLAN 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: layout attribuut title ( Home ) layout attribuut option ( Homepage ) 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. :-)
  25. 25. VEELGESTELDE VRAGENVEELGESTELDE VRAGEN Lijst van uitvouwbare vragen en antwoorden. Te plaatsen onder een artikel. Alternate layout voor mod_articles_category
  26. 26. DETAILS & SUMMARYDETAILS & SUMMARY Details Informatie via: Browser support: <details> <summary>Details</summary> Something small enough to escape casual notice. </details> MDN web docs caniuse.com
  27. 27. OPDRACHT - ALTERNATE LAYOUTOPDRACHT - ALTERNATE LAYOUT MODULEMODULE Voorbereiding
  28. 28. 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
  29. 29. OPDRACHT - ALTERNATE LAYOUTOPDRACHT - ALTERNATE LAYOUT MODULEMODULE Maak een alternate layout faq van mod_articles_category. Hergebruik de foreach loop in de code voor de nieuwe HTML elementen. Wijs de alternate layout toe aan de zojuist aangemaakte module. <details> <summary>Titel van artikel</summary> Introtext en readmore link </details>
  30. 30. STAPPENPLANSTAPPENPLAN 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; ?>
  31. 31. STAPPENPLAN - VERVOLGSTAPPENPLAN - VERVOLG <details> <summary><?php echo $item->title; ?></summary> <div>bla</div> </details> <?php defined('_JEXEC') or die; ?>1 <?php foreach ($list as $item) : ?>2 3 4 5 6 <?php endforeach; ?>7
  32. 32. Kopieer displayIntrotext en readmore uit origineel. <?php echo $item->displayIntrotext; ?> <p class="mod-articles-category-readmore"> <a class="mod-articles-category-title <?php echo $item- <?php if ($item->params->get('access-view') == false) <?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_T <?php elseif ($readmore = $item->alternative_readmore) <?php echo $readmore; ?> <?php echo JHTML::_('string.truncate', $item->title, <?php elseif ($params->get('show_readmore_title', 0) = <?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ <?php defined('_JEXEC') or die; ?>1 <?php foreach ($list as $item) : ?>2 <details>3 <summary><?php echo $item->title; ?></summary>4 <div>5 6 7 8 9 10 11 12 13 14 15
  33. 33. 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;
  34. 34. WAT IS EEN JLAYOUT?WAT IS EEN JLAYOUT? Bestanden met code, toepasbaar op verschillende plaatsen in Joomla! Duplicate code wordt hiermee bespaard. Bijvoorbeeld de Lees- meer button.
  35. 35. WAAR EN HOE ZIE IK DAT TERUG?WAAR EN HOE ZIE IK DAT TERUG? components/content/views/category/tmpl/default_ite components/content/views/category/tmpl/blog_item <?php echo JLayoutHelper::render('joomla.content.readmore', ar <?php echo JLayoutHelper::render('joomla.content.readmore', ar
  36. 36. layouts/joomla/content/readmore.php <?php /** * @package Joomla.Site * @subpackage Layout * * @copyright Copyright (C) 2005 - 2019 Open Source Matters, * @license GNU General Public License version 2 or later; */ defined('_JEXEC') or die; $params = $displayData['params']; $item = $displayData['item']; $direction = JFactory::getLanguage()->isRtl() ? 'left' : 'righ ?>
  37. 37. HOE MAAK JE EEN OVERRIDE?HOE MAAK JE EEN OVERRIDE? Kopieer layouts/joomla/content/readmore.php Plak in de html map van je template. Wijzig PHP / HTML naar jouw wens Klaar... de jLayout readmore is aangepast. En geldt voor alle plaatsen waar readmore opgeroepen wordt. templates/.../html/layouts/joomla/content/readmore.php
  38. 38. HOE MAAK JE EEN EIGENHOE MAAK JE EEN EIGEN JLAYOUT FILE?JLAYOUT FILE? Maak een eigen map in layouts map van html map van je template. Voeg code toe aan het nieuwe bestand. Roep je eigen jLayout op waar je maar wil. templates/.../html/layouts/template/helloworld.php <p>Hello world!</p> <?php echo JLayoutHelper::render('template.helloworld'); ?>
  39. 39. OPDRACHT: VERVANG HELLOOPDRACHT: VERVANG HELLO WORLD!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.
  40. 40. STAPPENPLANSTAPPENPLAN Creëer het bestand helloworld.php in je template map html/layouts/template/ Vul dit bestand met Roep dit bestand op in templates/.../html/com_content/article/default.php templates/.../html/com_content/article/home.php <?php defined('_JEXEC') or die; ?> <p>Hello world!</p> <?php echo JLayoutHelper::render('template.helloworld'); ?>
  41. 41. VAN STATISCHE NAARVAN STATISCHE NAAR DYNAMISCHE JLAYOUTSDYNAMISCHE JLAYOUTS Meegeven van data voor weergave van de jLayout.
  42. 42. HOE GA JE TE WERK?HOE GA JE TE WERK? Wijziging in home.php Wijziging in de jLayout <?php $data = array( 'aanhef' => 'Hello', 'naam' => 'world!' ); echo JLayoutHelper::render('template.helloworld', $data); <?php defined('_JEXEC') or die; ?> <p><?php echo $displayData['aanhef'] . " " . $displayData['naa
  43. 43. HOE GA JE TE WERK?HOE GA JE TE WERK? Wijziging in default.php <?php $data = array( 'aanhef' => 'Hello', 'naam' => $this->item->author ); echo JLayoutHelper::render('template.helloworld', $data); ?>
  44. 44. AANKOMENDE EVENTSAANKOMENDE EVENTS De output van een mod_articles_category waarbij de artikelen gesorteerd staan op publicatiedatum.
  45. 45. 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.
  46. 46. OPDRACHT - ALTERNATE LAYOUTOPDRACHT - ALTERNATE LAYOUT MODULEMODULE 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
  47. 47. OPDRACHT - ALTERNATE LAYOUTOPDRACHT - ALTERNATE LAYOUT MODULEMODULE 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. Wijs de alternate layout toe aan de zojuist aangemaakte module. https://codepen.io/hans2103/pen/OYyRPK
  48. 48. STAPPENPLANSTAPPENPLAN 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; ?>
  49. 49. STAPPENPLAN - VERVOLGSTAPPENPLAN - VERVOLG Wrap de foreach loop in een unordered list. <ul class="events__list"> </ul> <?php defined('_JEXEC') or die; ?>1 2 <?php foreach ($list as $item) : ?>3 bla4 <?php endforeach; ?>5 6
  50. 50. STAPPENPLAN - VERVOLGSTAPPENPLAN - VERVOLG Kopieer en plak één list-item vanuit Codepen. <li class="events__item event"> <div class="event__date"> <div class="event__day">11</div> <div class="event__month">nov</div> </div> <div class="event__body"> <div class="event__title"> D'n elfde van d'n elfde </div> <div class="event__content"> Een mooie gelegenheid om een biertje te </div> <?php defined('_JEXEC') or die; ?>1 <ul class="events__list">2 <?php foreach ($list as $item) : ?>3 4 5 6 7 8 9 10 11 12 13 14 15
  51. 51. STAPPENPLAN - VERVOLGSTAPPENPLAN - VERVOLG Statische tekst dynamisch maken. PHP commando var_dump() is handig om de items op te zoeken die je gebruiken wil in de override. <?php var_dump($item); > <?php defined('_JEXEC') or die; ?>1 <ul class="events__list">2 <?php foreach ($list as $item) : ?>3 4 <?php endforeach; ?>5 </ul>6
  52. 52. STAPPENPLAN - VERVOLGSTAPPENPLAN - 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>
  53. 53. STAPPENPLAN - VERVOLGSTAPPENPLAN - VERVOLG Statische tekst dynamisch maken. Vier maal dezelfde datum. Deden we iets fout? Daarom echo $item->created zonder opmaak toevoegen. <?php echo $item->created; ?> <?php defined('_JEXEC') or die; ?>1 <ul class="events__list">2 <?php foreach ($list as $item) : ?>3 <li class="events__item event">4 <div class="event__date">5 <div class="event__day"><?php echo JHtml::_('date',6 <div class="event__month"><?php echo JHtml::_('date7 </div>8 <div class="event__body">9 <div class="event__title">10 11 <?php echo $item->title; ?>12 </div>13
  54. 54. <div class="event__content">14 <?php echo $item->displayIntrotext; ?>15
  55. 55. DEMO DATADEMO DATA Vier maal dezelfde komt waarschijnlijk door de demo data.
  56. 56. SOCIAL SHARESOCIAL SHARE Artikelen makkelijk delen op Social Media. Niet meer dan een lijst van linkjes met popup.
  57. 57. website: nporadio1.nl
  58. 58. social share via Facebook
  59. 59. social share via Twitter
  60. 60. social share via mail
  61. 61. social share via LinkedIn
  62. 62. HOE IN TE BOUWEN...HOE IN TE BOUWEN... easy... met een jLayout maar eerst in Codepen.io https://codepen.io/hans2103/pen/VOLobN
  63. 63. OPDRACHT - JLAYOUT SOCIALOPDRACHT - JLAYOUT SOCIAL SHARESHARE Verwerk een nieuw jLayout onder de overrides van com_content/article Roep de jLayout op in je overrides https://codepen.io/hans2103/pen/VOLobN regel 86 protostar/index.php JHtml::_('stylesheet', '//cdnjs.cloudflare.com/ajax/libs/font- <?php echo JLayoutHelper::render('template.share'); ?>
  64. 64. STAPPENPLANSTAPPENPLAN 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'); ?>
  65. 65. SLIDESHOW - BONUS SLIDESSLIDESHOW - BONUS SLIDES Gebruik geen slideshow in de header van je homepage. Mooie uitleg op de website 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 shouldiuseacarousel.com
  66. 66. BOOTSTRAP 2BOOTSTRAP 2 Bootstrap 2 carousel
  67. 67. CODEVOORBEELD OPCODEVOORBEELD OP GETBOOTSTRAP.COMGETBOOTSTRAP.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
  68. 68. STAPPENPLANSTAPPENPLAN 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 carousel- indicators 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.
  69. 69. GEHELE CODE VOOR BS2GEHELE 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-
  70. 70. BOOTSTRAP 3BOOTSTRAP 3 Bootstrap 3 carousel
  71. 71. CODEVOORBEELD OPCODEVOORBEELD OP GETBOOTSTRAP.COMGETBOOTSTRAP.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>
  72. 72. STAPPENPLANSTAPPENPLAN 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 carousel- indicators 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.
  73. 73. GEHELE CODE VOOR BS3GEHELE CODE VOOR BS3 <?php /** * @package Joomla.Site * @subpackage mod_articles_category * * @copyright Copyright (C) 2005 - 2019 Open Source Matters, * @license 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 -->
  74. 74. VERSCHILLENVERSCHILLEN 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.
  75. 75. HANS KUIJPERSHANS KUIJPERS Veel plezier met het maken van eigen overrides, alternate layouts en jlayout implementaties. Frontend webdeveloper @hans2103

×