Wednesday, August 5, 2009

Building a template - Home page, JRequest, and basic layout

For me it's key to having a home page that drives the right behaviour, presents all kinds of content to users for them to read and makes the home page not look like a Joomla home page.


I have had a look around http://extensions.jooml.org and can't find anything that helps with this kind of layout so I am going to keep it simple and use a lot of the contentItem module to achieve this. On the home page I will have three positions which will contain contentItme modules with specific uncategorised articles and then below that 3 columns with various modules including the contentItem module to list articles from varying different locations.

There is nothing very special in my template layout apart from trying to keep the number of divs to a minimum.

Introducing JRequest

One thing I did discover which I think will be very useful down the line is
JRequest::getVar('view')
This will return what type of view you have e.g. blog list, front page, section, category etc. I first discovered this on this site http://www.howtojoomla.net/2008041785/how-tos/templates/how-to-determine-which-page-you-are-on-from-within-a-joomla-15-template on which someone had added the code for the view option in the comments at the bottom of the page. Some judicious searching didn't bring up any decent docs in the joomla sites but I did find this http://www.theartofjoomla.com/home/7-legacy/8-removing-a-legacy-part-2.html which gives some idea of the different calls that can be made.

Having this information is going to be pretty handy for all kinds of decisions in the template, but I think that it would be useful having some generic classes on "view" and "option" in CSS at a body tag level. I have set two variables and then used these in my body tag's class declarations.

<?php
$viewName = JRequest::getVar('view');
$optionName = JRequest::getVar('option');
?>
<body id="page_bg" class="<?php echo $viewName. ' ' .$optionName;?>">

Template layout

Now that I have some variables which I can use to test for the front page it is pretty simple to exclude items such as breadcrumbs and secondary navigation by testing $viewName like this

<?php if ($viewName=='frontpage') :?>
//markup for top panels on home page
<?php else :?>
<div id="secondary-nav"><jdoc:include type="modules" name="secondarymenu" style="xhtml"/> </div>
<div id="pathway"><jdoc:include type="modules" name="breadcrumb" style="xhtml"/> </div>
<?php endif; ?>
Then to achieve 3 columns of content below the header area on the home page and only two colums on any other page I therefore done the following

<?php if ($viewName=='frontpage') : ?>
<div id="leftcolumn"><jdoc:include type="modules" name="left" style="xhtml" /> </div>
<div id="maincolumn">
<div id="centre"><jdoc:include type="modules" name="centre" style="xhtml"/> </div>
<div id="rightcolumn"><jdoc:include type="modules" name="right" style="xhtml"/> </div>
<?php else: ?>
<div id="maincolumn">
<div id="content"><jdoc:include type="component" /> <jdoc:include type="modules" name="footer" style="xhtml"/> </div>
<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
<div id="rightcolumn"><jdoc:include type="modules" name="right" style="xhtml"/> </div>
<?php endif; ?>
<?php endif;?>

That's almost it for my template, I am sure that there will be more tweaks as time goes on, now for the hard bit which is getting the CSS right. If anyone is interested here is the whole template (it's a work in progress).
<?php
/**
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
// useful variables
$viewName = JRequest::getVar('view');
$optionName = JRequest::getVar('option');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/devtemplate/css/template.css" type="text/css" />
<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ieonly.css"rel="stylesheet"type="text/css"/>
<![endif]-->
<?php if($this->direction == 'rtl') : ?>
<link href="<?php echo $this->baseurl ?>/templates/devtemplate/css/template_rtl.css" rel="stylesheet" type="text/css" />
<?php endif; ?>
<script type="text/javascript" src="http://serve.a-widget.com/kickFlash/scripts/swfobject2.js"></script>
</head>

<body id="page_bg" class="<?php echo $viewName. ' ' .$optionName;?>">
<a name="up" id="up"></a>
<div id="wrapper">
<div id="top">
<div id="login"> <jdoc:include type="modules" name="login" style="xhtml"/></div>
<div id="search"> <jdoc:include type="modules" name="search" style="xhtml"/> </div>
<div class="clear"></div>
</div>
<div id="header">
<div id="logo"></div>
<div id="primary-nav"> <jdoc:include type="modules" name="mainmenu" style="xhtml"/> </div>
<div class="clr"></div>
<?php if ($viewName=='frontpage') :?>
<div id="home-core-panels">
<div id="home-top-left"><jdoc:include type="modules" name="home-top-left" style="xhtml" /> </div>
<div id="home-top-main">
<div id="home-top-centre"><jdoc:include type="modules" name="home-top-centre" style="xhtml" /></div>
<div id="home-top-right"><jdoc:include type="modules" name="home-top-right" style="xhtml" /></div>
</div>
<div class="clr"></div>
</div>
<?php else :?>
<div id="secondary-nav"><jdoc:include type="modules" name="secondarymenu" style="xhtml"/> </div>
<div id="pathway"><jdoc:include type="modules" name="breadcrumb" style="xhtml"/> </div>
<?php endif; ?>
</div>
<div id="maincontent">
<jdoc:include type="message" />
<?php if ($viewName=='frontpage') : ?>
<div id="leftcolumn"><jdoc:include type="modules" name="left" style="xhtml" /> </div>
<div id="maincolumn">
<div id="centre"><jdoc:include type="modules" name="centre" style="xhtml"/> </div>
<div id="rightcolumn"><jdoc:include type="modules" name="right" style="xhtml"/> </div>
<?php else: ?>
<div id="maincolumn">
<div id="content"><jdoc:include type="component" /> <jdoc:include type="modules" name="footer" style="xhtml"/> </div>
<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
<div id="rightcolumn"><jdoc:include type="modules" name="right" style="xhtml"/> </div>
<?php endif; ?>
<?php endif;?>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div id="footerspacer"></div>
</div>
<div id="footer">
<p id="syndicate"> <jdoc:include type="modules" name="syndicate" style="xhtml"/> </p>
<p id="power_by"> <?php echo JText::_('Powered by') ?> <a href="http://www.joomla.org">Joomla!</a>. <?php echo JText::_('Valid') ?> <a href="http://validator.w3.org/check/referer">XHTML</a> <?php echo JText::_('and') ?> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>. </p>
</div>
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>

3 comments:

Anonymous said...

this is all good but not necessary. using the joomla module control you can achieve exactly the same and even more without programming further.

for example, the module breadcrumb can be set to appear only in the front page, and it will do so faithfully, and not appear in any other pages.

your programing skills can be better used to further customise joomla, which can make it even more non-joomla. the templates are pretty dumb if i may say so, because you can have complete control over it's output by standard joomla features.

also, there is what is called "overrides" in the template itself. this concept is pretty useful if you want to make joomla have an entirely different look. i have missed a lot when i overlooked this, but my client who wanted his own way and styles forced to take a deeper look and discovered this gold mine.

it's pretty amazing, i'm sure you would have loads of fun with it. maybe one day i'd try to make joomla look like wordpress :)

hope all this helps !
and please do keep posting ideas.

many thanks.

Simon Frank said...

Thanks, whoever you are ! It is interesting with Tools like Joomla that you will many different ways to achieve the same end.

The reason that I chose to present the breadcrumbs on all pages except the home page using code rather than module control is that the module control appears not to be updated if new menu items are added to the site i.e. if you add a new menu you have to remember to go and make sure breadcrumbs appear for that menu.

Thanks for the suggestion on overrides. I am busy working on these at the moment and starting with the login module. I think that this is one of the best new features in Joomla something that was there in Drupal 5 but not in Joomla 1.0.x. The implementation in Joomla is IMHO superb and very straight forward and I like the fact that it is all stored in the template context.

More to follow when I have finished my mod_login override.

jamal said...

jamal is the best boy of the world

Post a Comment