TEMPLATE OVERRIDES IN JOOMLA 5 Meer controle over je website Presentatie van Hans Kuijpers - HKweb.nl
A presentation at JoomlaDagen 2025 in October 2025 in Utrecht, Netherlands by Hans Kuijpers
TEMPLATE OVERRIDES IN JOOMLA 5 Meer controle over je website Presentatie van Hans Kuijpers - HKweb.nl
HANS KUIJPERS Happy Frontend Developer Tenor saxofoon Carnaval in Oeteldonk BBQ en lekker eten Tango dansen Joomla Gebruikersgroep Eindhoven - Online
WAT ZIJN TEMPLATE OVERRIDES?
WAT ZIJN TEMPLATE OVERRIDES? van /components/com_content/tmpl/article/default.php naar /templates/[jouw-template]/html/com_content/article/default.php
HOE WERKEN TEMPLATE OVERRIDES? Zoek origineel bestand Kopieer naar jouw template Pas aan naar behoefte
ORIGNEEL 1 <?php if ($params->get(‘show_title’)) : ?> 2 <div class=”page-header”> 3 <<?php echo $htag; ?>> 4 <?php echo $this->escape($this->item->title); ?> 5 </<?php echo $htag; ?>>
AANGEPAST 1 <?php if ($params->get(‘show_title’)) : ?> 2 <div class=”page-header text-uppercase”> 3 <<?php echo $htag; ?>> 4 <?php echo $this->escape($this->item->title); ?> 5 </<?php echo $htag; ?>>
AANGEPAST 1 <?php if ($params->get(‘show_title’)) : ?> 2 <div class=”page-header text-uppercase”> 3 <<?php echo $htag; ?>> 4 <?php echo $this->escape($this->item->title 5 . ’ ’ . $user->name); ?> 6 </<?php echo $htag; ?>>
COM_USERS SUBMIT BUTTON 1 <div class=”com-users-login__submit control-group”> 2 <div class=”controls”> 3 <button type=”submit” class=”btn btn-primary”> 4 <?php echo Text::_(‘JLOGIN’); ?> 5 </button> 6 </div> 7 </div>
COM_USERS SUBMIT BUTTON 1 <div class=”com-users-login__submit control-group”> 2 <div class=”controls”> 3 <button type=”submit” class=”btn btn-primary w-100”> 4 <?php echo Text::_(‘JLOGIN’); ?> 5 </button> 6 </div> 7 </div>
COM_USERS SUBMIT BUTTON 1 <div class=”com-users-login__submit control-group”> 2 <div class=”controls”> 3 <button type=”submit” class=”btn btn-primary w-100”> 4 <?php echo Text::_(‘JLOGIN’); ?> 5 </button> 6 </div> 7 </div>
COM_USERS SUBMIT BUTTON 1 <div class=”com-users-login__submit control-group”> 2 <div class=”controls”> 3 <button type=”submit” class=”btn btn-primary w-100”> 4 <?php echo Text::_(‘JLOGIN’); ?> 5 <?php echo Text::_(‘BLA’); ?> 6 </button> 7 </div> 8 </div>
CUSTOM FIELDS Plaatsen waar jij dat wil, niet waar Joomla ze plaatst.
COM_CONTENT ARTICLE 1 <div class=”com-content-article__body”> 2 <?php echo $this->item->text; ?> 3 </div>
COM_CONTENT ARTICLE 1 <div class=”com-content-article__body”> 2 <?php echo $this->item->text; ?> 3 <p>Hier moet de Custom Field “About the author” geplaatst w 4 </div>
COM_CONTENT ARTICLE 1 <div class=”com-content-article__body”> 2 <?php echo $this->item->text; ?> 3 <p>Hier moet de Custom Field “About the author” geplaatst w 4 <pre> 5 <?php var_dump($this->item->jcfields); ?> 6 </pre> 7 </div>
KONING VAR_DUMP() array(1) { [1]=>object(stdClass)#1217 (33) { [“id”]=>int(1) [“title”]=>string(16) “About the Author” [“name”]=>string(16) “about-the-author” [“checked_out”]=>NULL [“checked_out_time”]=>NULL [“note”]=>string(0) “” [“state”]=>int(1) [“access”]=>int(1) [“created_time”]=>string(19) “2025-09-23 17:11:48” [“created_user_id”]=>int(821) [“ordering”]=>int(0) [“language”]=>string(1) “*” [“fieldparams”]=>object(Joomla\Registry\Registry)#1078 (3) { [“data”: protected] >object(stdClass)#1115 (4) {
COM_CONTENT ARTICLE 1 <div class=”com-content-article__body”> 2 <?php echo $this->item->text; ?> 3 <p>Hier moet de Custom Field “About the author” geplaatst w 4 <pre> 5 <?php var_dump($this->item->jcfields[1]); ?> 6 </pre> 7 </div>
KONING VAR_DUMP() object(stdClass)#1217 (33) { [“id”]=>int(1) [“title”]=>string(16) “About the Author” [“name”]=>string(16) “about-the-author” [“checked_out”]=>NULL [“checked_out_time”]=>NULL [“note”]=>string(0) “” [“state”]=>int(1) [“access”]=>int(1) [“created_time”]=>string(19) “2025-09-23 17:11:48” [“created_user_id”]=>int(821) [“ordering”]=>int(0) [“language”]=>string(1) “*” [“fieldparams”]=>object(Joomla\Registry\Registry)#1078 (3) { [“data”: protected]=>object(stdClass)#1115 (4) { [“rows”] >int(3)
COM_CONTENT ARTICLE 1 <div class=”com-content-article__body”> 2 <?php echo $this->item->text; ?> 3 <p>Hier moet de Custom Field “About the author” geplaatst w 4 <pre> 5 <?php var_dump($this->item->jcfields[1]->title); ?> 6 <?php var_dump($this->item->jcfields[1]->rawvalue); ?> 7 </pre> 8 </div>
KONING VAR_DUMP() string(16) “About the Author” string(152) “Uurnip greens yarrow ricebean endive cauliflower sea
COM_CONTENT ARTICLE 1 <div class=”com-content-article__body”> 2 <?php echo $this->item->text; ?> 3 <p>Hier moet de Custom Field “About the author” geplaatst w 4 <?php if (!empty($this->item->jcfields[1]->rawvalue)): ?> 5 <?php echo $this->item->jcfields[1]->title . “: ” . $th 6 <?php endif; ?> 7 </div>
COM_CONTENT ARTICLE 1 <div class=”com-content-article__body”> 2 <?php echo $this->item->text; ?> 3 <?php if (!empty($this->item->jcfields[1]->rawvalue)): ?> 4 <?php echo $this->item->jcfields[1]->title . “: ” . $th 5 <?php endif; ?> 6 </div>
JLAYOUT Bestanden met herbruikbare code toegepast op verschillende plekken in Joomla.
COM_CONTENT ARTICLE 1 <?php if ($useDefList && ($info == 0 || $info == 2)) : ?> 2 <?php echo LayoutHelper::render(‘joomla.content.info_block’ 3 <?php endif; ?>
COM_CONTENT ARTICLE 1 <?php if ($useDefList && ($info == 0 || $info == 2)) : ?> 2 <?php echo LayoutHelper::debug(‘joomla.content.info_block’, 3 <?php endif; ?> Layout: joomla.content.info_block Include Paths: Array ( [0] => /templates/cassiopeia_child/html/layouts/com_content [1] => /templates/cassiopeia/html/layouts/com_content [2] => /components/com_content/layouts [3] => /templates/cassiopeia_child/html/layouts [4] => /templates/cassiopeia/html/layouts [5] => /layouts ) Searching layout for: joomla/content/info_block.php Found layout: /layouts/joomla/content/info_block.php
OOK HIERVOOR GELDT Zoek origineel bestand Kopieer naar jouw template Pas aan naar behoefte
OVERRIDE INFO_BLOCK.PHP van /layouts/joomla/content/info_block.php naar /templates/cassiopeia_child/html/layouts/joomla/content/info_bloc
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<?php /** * @package * @subpackage * * @copyright * @license */ Joomla.Site Layout (C) 2017 Open Source Matters, Inc. <https://ww GNU General Public License version 2 or later; defined(‘_JEXEC’) or die; use Joomla\CMS\Language\Text; $blockPosition = $displayData[‘params’]->get(‘info_block_posit
OVERRIDE INFO_BLOCK/AUTHOR.PHP van /layouts/joomla/content/info_block/author.php naar /templates/cassiopeia_child/html/layouts/joomla/content/info_bloc
JLAYOUT JOOMLA.INFO_BLOCK.AUTHOR 1 <dd class=”createdby”> 2 <span class=”icon-user icon-fw” aria-hidden=”true”></span> 3 <?php $author = ($displayData[‘item’]->created_by_alias ?:
JLAYOUT JOOMLA.INFO_BLOCK.AUTHOR 1 <dd class=”createdby”> 2 <span class=”icon-pencil-2 icon-fw” aria-hidden=”true”></sp 3 <?php $author = ($displayData[‘item’]->created_by_alias ?:
JLAYOUT JOOMLA.INFO_BLOCK.UNICORN 1 <?php endif; ?> 2 3 <?php echo $this->sublayout(‘unicorn’, $displayData); ?> 4 </dl> Maak een unicorn.php aan in /templates/cassiopeia_child/html/layouts/joomla/content/info_bloc
1 2 3 4 5 6 … ?> <dd class=”unicorn”> <svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 640 51 <?php echo Text::_(‘I_AM_A_UNICORN’); ?> </dd>
1 2 3 4 5 6 … ?> <dd class=”unicorn”> <svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 640 51 <?php echo Text::_(‘I_AM_A_UNICORN’); ?> </dd>
LANGUAGE/OVERRIDES/NL-NL.OVERRIDE.INI 1 JLOGIN=”Treed binnen” 2 BLA=”Waterfiets” 3 I_AM_A_UNICORN=”Ik ben een eenhoorn”
CUSTOM FIELD EN JLAYOUT Gebruik te waarde van een Custom Field om een JLayout te tonen Niet iedereen is een Eenhoorn
JLAYOUT JOOMLA.INFO_BLOCK 1 <?php endif; ?> 2 <pre> 3 <?php var_dump($displayData[‘item’]->jcfields[2]->rawva 4 </pre> 5 <?php echo $this->sublayout(‘unicorn’, $displayData); ?> 6 </dl>
JLAYOUT JOOMLA.INFO_BLOCK 1 <?php if ($displayData[‘item’]->jcfields[2]->rawvalue === ’ 2 <?php echo $this->sublayout(‘unicorn’, $displayData); ? 3 <?php endif; ?> 4 </dl>
ALTERNATE LAYOUT, MODULE OVERRIDES EN JLAYOUT
ALTERNATE LAYOUT?
ALTERNATE LAYOUT? van /components/com_content/tmpl/category/blog.php /components/com_content/tmpl/category/blog.xml naar /templates/cassiopeia_child/html/com_content/category/advent.php /templates/cassiopeia_child/html/com_content/category/advent.xml
HOE WERKEN ALTERNATE LAYOUT? Zoek origineel bestand Kopieer met een nieuwe naam naar jouw template Pas aan naar behoefte Maak menu item naar nieuwe layout
CATEGORY BLOG / ADVENT EN MOD ARTICLES / ADVENT
CATEGORY BLOG / ADVENT EN MOD ARTICLES / ADVENT en JLayouts
COM_CONTENT/CATEGORY/ADVENT.XML 1 <?xml version=”1.0” encoding=”UTF-8”?> 2 <metadata> 3 <layout title=”advent” option=”COM_CONTENT_CATEGORY_VIEW_BLOG 4 <help key = “Menu_Item:_Category_Blog” /> 5 <message> 6 <![CDATA[COM_CONTENT_CATEGORY_VIEW_BLOG_DESC]]>
COM_CONTENT/CATEGORY/ADVENT.PHP 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<?php /** * @package * @subpackage * * @copyright * @license */ Joomla.Site com_content (C) 2006 Open Source Matters, Inc. <https://ww GNU General Public License version 2 or la use Joomla\CMS\Layout\LayoutHelper; defined(‘_JEXEC’) or die; if (!$this->items): return;
LAYOUTS/TEMPLATE/ADVENT/CALENDAR.PHP 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<?php /** * @package * @subpackage * * @copyright * @license */ Joomla.Site com_content (C) 2006 Open Source Matters, Inc. <https://w GNU General Public License version 2 or l defined(‘_JEXEC’) or die; use use use use Joomla\CMS\Factory; Joomla\CMS\HTML\HTMLHelper; Joomla\CMS\Language\Text; Joomla\CMS\Layout\LayoutHelper;
MEDIA…CASSIOPEIA_CHILD/CSS/USER.CSS 1 .com-adventcalendar { 2 —adv-grid-min-col-size: 9rem; 3 —adv-tile-bg-color: hsl(0deg 0% 100% / 0.125); 4 —adv-tile-border-color: hsl(0deg 0% 80%); 5 —adv-span-text-shadow: 0 0 0.2rem hsl(0deg 0% 0%), 0 0 0.5 6 —adv-tile-text-color: hsl(0deg 0% 100%); 7 8 display: grid; 9 grid-template-columns: repeat( 10 auto-fill, 11 minmax(min(var(—adv-grid-min-col-size), 100%), 1fr) 12 ); 13 gap: 1rem; 14 list-style-type: none; 15 padding: 1rem; 16 background repeat: no repeat;
MODULE OVERRIDE
MODULE OVERRIDE van /modules/mod_articles/tmpl/default.php naar /templates/cassiopeia_child/html/mod_articles/advent.php
MOD_ARTICLES/ADVENT.PHP 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<?php /** * @package * @subpackage * * @copyright * @license */ Joomla.Site mod_articles (C) 2024 Open Source Matters, Inc. <https://ww GNU General Public License version 2 or la use Joomla\CMS\Categories\Categories; use Joomla\CMS\Layout\LayoutHelper; defined(‘_JEXEC’) or die; if (!$list)
DANK HKweb.nl slides => noti.st/hans2103
