A presentation at JoomlaDagen 2009 in in Nieuwegein, Netherlands by Hans Kuijpers
Template Overrides Hans Kuijpers 2Value & Jira ICT hans2103
What are template overrides • Changing the way Joomla! shows something without changing the core files • Comes in handy when upgrading Joomla!
How do Template Overrides work in Joomla? 1.Joomla! assembles the information needed to show a web page 2.Joomla! uses a template to position that information and show it
Example 1 BEEZ with and without
BEEZ template using no template override - lots of tables in source - Google is blind
Steps to using Template Overrides - Locate the component or module - Copy the relevant file to override - Paste into template - Modify file
BEEZ template using template override - tableless design - proper use of H1, H2, H3 tags - Google loves it
Example 2 BEEZ moving buttons
BEEZ template moving printbutton and the other two also
BEEZ template - locate code in template override - select code and cut
BEEZ template - find new location - paste code
BEEZ template - refresh page and view the result of this rocket sience
Example 3 Joomla! 1.5.11 bug solved using template override because we can
Joomla! 1.5.11 - In components/ com_content/views/ category/tmpl/ default_items.php line 68 there’s is a ; ?> too many. - This causes the output on category list layout output is wrong.
Joomla! 1.5.11 - can also be seen in the source
Solving in this case two options 1. core hack 2. template override since this presentation is about template override - Locate the component or module - Copy the relevant file to override - Paste into template - Modify file note: core hack is better in this case. note: bug will be solved in Joomla! 1.5.12
Modify file - locate row 68 - delete “; ?>” - save file
Joomla! 1.5.11 - refresh page and view the result of this rocket sience
Joomla! 1.5.11 - result can also be seen in the source
Example 4 www.pantein.nl
Steps to using Template Overrides - Locate the component or module - Copy the relevant file to override - Paste into template - Modify file
Original code
<?php // no direct access defined(‘_JEXEC’) or die(‘Restricted access’); ?> <div> <strong><?php echo JText::_( ‘More Articles…’ ); ?></strong> </div> <ul> <?php foreach ($this->links as $link) : ?> <li> <a class=”blogsection” href=”<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($link->slug, $link->catslug, $link->sectionid)); ?>”> <?php echo $this->escape($link->title); ?></a> </li> <?php endforeach; ?> </ul>New code
<?php // no direct access defined(‘_JEXEC’) or die(‘Restricted access’); ?> <ul> <?php $current_date = ”; ?> <?php $max_chars = 70; ?> <?php foreach ($this->links as $link) : ?> <?php $item_date = JHTML::_(‘date’, $link->created, JTEXT::_(‘DATE_FORMAT_LC1’)); if( $current_date != $item_date ) { $current_date = $item_date ; ?> <li class=”date”><?php echo $item_date ?></li> <?php } ?> <?php $introtext = strip_tags( $link->introtext ) ; if( strlen( $link->title ) > $max_chars ) { $link->title = substr( $link->title, 0, $max_chars ) . ‘…’ ; $introtext = ” ; } elseif(( strlen( $introtext ) + strlen( $link->title )) > $max_chars ) { $introtext = substr( $introtext, 0, $max_chars - strlen( $link->title )) . ‘…’ ; } ?> <ul> <li class=”item”><a class=”blogsection” href=”<?php echo JROUTE::_(ContentHelperRoute::getArticleRoute($link->slug, $link->catslug, $link->sectionid)); ?>”><?php echo $link->title; ?></a> <?php if( $introtext != ” ) { ?> <small><?php echo $introtext ?></small><?php } ?> </li> </ul> <?php endforeach; ?> </ul>Example 5 Eventlist Hands on with Amy Stephen http://www.vimeo.com/groups/12904/videos/3384917
Eventlist example: customer uses Eventlist and wishes an overview of # latest events with the following information: - Title of event - Date of event - Description of event
Eventlist - Download and install both modules - At first… neither shows the information the customer wants - Creator of Eventlist uses the MVC model for his modules. This gives us opportunity to create an template override. - Open helper.php to see what information is provided
Eventlist mod_eventlist - open helper.php - view Query results row 92 - 108 - has both Title and Date - has not Description
Eventlist mod_eventlist_wide - open helper.php - view Query results row 139 - 183 - has both Title, Date and Description - mod_eventlist_wide will be used in template override
Steps to using Template Overrides - Locate the component or module - Copy the relevant file to override - Paste into template - Modify file
Eventlist mod_eventlist_wide original code - delete everything
<?php /** * @version 1.0 $Id: default.php 803 2008-10-21 19:12:52Z schlu $ * @package Joomla * @subpackage EventList Wide Module * @copyright (C) 2005 - 2008 Christoph Lukes * @license GNU/GPL, see LICENCE.php * EventList is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License 2 * as published by the Free Software Foundation. * EventList is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * You should have received a copy of the GNU General Public License * along with EventList; if not, write to the Free Software * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ defined(‘_JEXEC’) or die(‘Restricted access’); ?> <div id=”elmodulewide”> <table border=”0” cellpadding=”5” cellspacing=”0” class=”eventset” summary=”mod_eventlist_wide”> <colgroup> <col width=”30%” class=”elmodw_col_title” /> <col width=”20%” class=”elmodw_col_category” /> <col width=”20%” class=”elmodw_col_venue” /> <col width=”15%” class=”elmodw_col_eventimage” /> <col width=”15%” class=”elmodw_col_venueimage” /> </colgroup> <?php foreach ($list as $item) : ?> <tr> <td valign=”top”> <span class=”event-title”> <?php if ($item->eventlink) : ?> <a href=”<?php echo $item->eventlink; ?>” title=”<?php echo $item->title; ?>”> <?php endif; ?> <?php echo $item->title; ?> <?php if ($item->eventlink) : ?> </a> <?php endif; ?> </span> <br />Eventlist mod_eventlist_wide new code
<?php /** * @version 1.0 $Id: default.php 803 2008-10-21 19:12:52Z schlu $ * @package Joomla * @subpackage EventList Wide Module * @copyright (C) 2005 - 2008 Christoph Lukes * @license GNU/GPL, see LICENCE.php * EventList is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License 2 * as published by the Free Software Foundation. * EventList is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * You should have received a copy of the GNU General Public License * along with EventList; if not, write to the Free Software * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ defined(‘_JEXEC’) or die(‘Restricted access’); // check if any results returned $items = count($list); if (!$items) { echo ‘<p class=”eventlistmod’ . $params->get(‘moduleclass_sfx’) . ‘”>’ . JTEXT::_(‘NOEVENTS’) . ‘</p>’; return; } ?> <div class=”eventlistmod<?php echo $params->get(‘moduleclass_sfx’); ?>”> <?php foreach ($list as $item) : ?> <h3 class=”eventlist”><a href=”<?php echo $item->eventlink; ?>”><?php echo $item->title; ?></a></h3> <p class=”eventdesc”><?php echo substr($item->eventdescription, 0 , 200); ?>…</p> <p class=”eventdate small”> <?php if ($item->dates == $item->enddates) { echo JTEXT::_(‘To be held on ’ ) . JHTML::_(‘date’, $item->dates, JTEXT::_(‘DATE_FORMAT_LC’)) . JTEXT::_(’ at ’ ) . $item->time; } else { echo JTEXT::_(‘Event runs from ’ ) . JHTML::_(‘date’, $item->dates, JTEXT::_(‘DATE_FORMAT_LC3’)) . JTEXT::_(’ through ’ ) . JHTML_(‘date’, $item->enddates, JTEXT::_(‘DATE_FORMAT_LC3’)); } ?></p> <?php endforeach; ?> </div>Eventlist - refresh page and view the result of this rocket sience
Presentation on the power of template overrides, given at Dutch Joomladays 2009 (June 13, 2009) in Nieuwegein, The Netherlands
for free. You
can too.