Component Only Template
Last Updated on Tuesday, 27 July 2010 21:13
The power and flexibility of Joomla allows for the creative use of template techniques to expand its capabilities. One such technique is the use of a component only template. It expands the possibilities of a Joomla website by providing the ability to include content such as splash pages, full-screen Flash movies, and even pseudo 404 pages for hiding a website from a casual passerby. The following tutorial will show you how to implement a component only template.
To give you an idea of what can be accomplished with a component only template, we have put together the following demos. Each one is an article contained in this website. The only difference is the template.
A component only template is exactly as the name implies, only the component. No module positions or other elements are included in this type of template. This allows for the possibility to exclusively display the content of an article.
Index.php of a component only template is equally simple:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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="" type="text/css" media="screen" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/screen.css" />
</head>
<body>
<jdoc:include type="component" />
</body>
</html>
In the template, we have included a stylesheet, although it may not be needed in all cases. There isn't much more to the template other than a basic templateDetails.xml for the installation of the template, the obligatory blank index.html files to keep pesky eye's out of our business, and a single override that strips the article layout down to it's core:
?php defined('_JEXEC') or die('Restricted access'); ?>
<?php echo JFilterOutput::ampReplace($this->article->text); ?>Feel free to make your own version or download the component only template.
The template is installed like any other: From Joomla's Administrator interface, select Extensions -> Install/Uninstall .Browse to your template file, select it, then click Upload File & Install. When complete, we'll move onto creating an example splash page.
In this example, we'll be using the flash map, displayed in the third example, as a splash page for our website. Simply create a new article, assign its respective section and category, and insert the flash file like any other.
Since templates are assigned on a menu basis, we'll need to create a menu item to display the article we just created. And, since this will be a splash page, we'll need to set it as the default menu item. But, we don't want the menu itself to be visible on the site. Not a problem, simply create a new menu in the menu manager by going to Menus -> Menu Manager:
Click the New button in the upper right-hand corer
Enter "Hidden" for the Unique Name, Title, and Description. Leave the Module Title box empty.
Now, we can create our menu item for our new splash page. Go to Menus->Hidden to enter the menu manager for our new menu. Click on the New icon to create our new menu item.
Since we're creating a single article layout, select Internal Link -> Article Layout
Then, select the article we just created from Article Select in the Basic Parameters of the new menu item.
You will be returned to the Menu Item Manager for the Hidden menu. Check the box next the menu item you just created, and click the Default icon in the toolbar to set this item as your new homepage.
Now, all we need to do is head to the Template Manager, by selecting Extensions->Template Manager from the menu.
First, make sure that the Template that you want to use for the rest of your site is set as the default. Then, click on the component only template name to edit its menu assignment.
Click on the Select from List radio button and select the menu item you just created. Click the save icon in the toolbar and your done.
You have now assigned a component only template to the article which contains your splash page flash animation. Since that article is set to be displayed as the default menu item, the flash animation will be will be the first, and only thing, a visitor sees when going to the root of your site.
Update May 21st 2010 A big thanks goes out to Peter van Westen (a.k.a. NoNumber!) for reporting the need to add
<jdoc:include type="head" />to support certain extensions, such as his Articles Anywhere. Thanks Peter!
Comments
Hi Simon,
That's fantastic to hear. I really appreciate the feedback. I'm actually in the process of developing a new site to support a complete template framework that will have features like this (and many other cool tricks). It also takes this kind of approach. You can sign up for news about this at http://joomlaengineering.com.
Thanks again!
Matt
Cheers
Hi Joop,
Thanks for the great comment, I appreciate the feedback. This tutorial was made in response to a forum post at http://forum.joomla.org/viewtopic.php?f=470&t=444769 . Can you make a post there and we'll jump in and help you.
Best,
Matt
I have only one question?
I'm a new to joomla, an i don't now wich page i have to use to go from my flash intro to my second homepage.
I don't know if you can help me out, but thanks anyway from NL
Hi Eric,
Thanks for the kind words. Without community support, Joomla wouldn't exist. Writing these tutorial is the least we can do to give back to those that gave so much to develop and support it.
In fact, we're working hard on developing a new learning tool for the Joomla community. We hope to have it released in the next few months. Keep an eye out!
Best,
Matt
Thanks.
RSS feed for comments to this post