A presentation at JoomlaDagen 2025 in 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_positOVERRIDE 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
Een presentatie over het maken en beheren van template overrides.
Deze presentatie is gegeven op vrijdag 3 oktober tijdens de JoomlaDagen 2025 in Utrecht.
Met voorbeelden hoe je je eigen Cassiopeia Child template naar je eigen hand zet. De voorbeelden zijn ook toepasbaar voor andere templates.
for free. You
can too.