Component Only Template

Last Updated on Monday, 07 May 2012 08:14

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.

Demo: Pseudo 404 Not Found

Demo: Loading Page

Demo: Flash Map

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

123

0 #23 sam 2012-05-06 16:16

This does not work in 2.5, i get a blank page. The method works though so thanks, i'll just have to find another template.

Quote

0 #22 Matt Thomas 2011-01-12 21:13

Quoting Dave:

... i tried enabling SEF URLs, but that returns a 404 error when i try to conduct a search. and the 404 page shows up in the component-only template as well.

Normally, the 404 error is a result of not having set Code:var $live_site in configuration.php. Make sure that is to the URL of your website.
Quoting Dave:

regardless, i'm not sure i understand how SEF URLs would help solve the issue. would you mind explaining to a noob to joomla development?

Basically, Joomla's URLs are tied to the menu structure, as well as module and template assignment are. But, there is no way of assigning a template or module to search results, as you can't create a menu item to all search results. In this case, you are displaying the landing page on only the home page, and your main template on everything else. Search results fall into "everything else". It seems as though Joomla is associating search results from the homepage to the template that is assigned to the homepage. But, by enabling SEF URLs, it kind of tricks Joomla into differentiating them as the URL is vastly different. Take a look at the URL, after entering a search query, before and after enabling SEF URLs.

Hope that makes sense. It sounds good in my head at least ;)

Best,

Matt

Quote

0 #21 Dave 2011-01-10 11:11

Quote:

I just tested this and can reproduce the issue. However, it seems to be solved by enabling SEF URLs . See docs.joomla.org/How_do_you_implement_Search_Engine_Friendly_URLs_%28SEF%29%3F

hope that helps!

Best,

Matt

hey matt,

thanks for the response. i tried enabling SEF URLs, but that returns a 404 error when i try to conduct a search. and the 404 page shows up in the component-only template as well.

regardless, i'm not sure i understand how SEF URLs would help solve the issue. would you mind explaining to a noob to joomla development?

thanks!
-dave

Quote

0 #20 Matt Thomas 2011-01-10 10:19

Quoting Dave:

hey matt,
i just came across this tutorial, and i think it's just what i need to help me build the landing page i want. thanks for sharing!

You're very welcome! I'm glad that it is of help.

Quoting Dave:

however, i do have a another interesting wrinkle to add. i need to include a search box on the landing page. i figured out a nifty trick for inserting modules into articles that got me halfway there (http://docs.joomla.org/How_do_you_put_a_module_inside_an_article%3F). now my problem is the results are showing up in the component-only template; i want them to come up in the template i have applied to the rest of the site. does this make sense? and if so, do you have any idea how i might accomplish this?

here's the link just so you can see what i mean (this is a demo site for testing):

http://davegladney.com/wildfire/

thanks in advance,
-dave

I just tested this and can reproduce the issue. However, it seems to be solved by enabling SEF URLs . See docs.joomla.org/How_do_you_implement_Search_Engine_Friendly_URLs_%28SEF%29%3F

hope that helps!

Best,

Matt

Quote

0 #19 Dave 2011-01-08 21:41

hey matt,

i just came across this tutorial, and i think it's just what i need to help me build the landing page i want. thanks for sharing!

however, i do have a another interesting wrinkle to add. i need to include a search box on the landing page. i figured out a nifty trick for inserting modules into articles that got me halfway there (http://docs.joomla.org/How_do_you_put_a_module_inside_an_article%3F). now my problem is the results are showing up in the component-only template; i want them to come up in the template i have applied to the rest of the site. does this make sense? and if so, do you have any idea how i might accomplish this?

here's the link just so you can see what i mean (this is a demo site for testing):

http://davegladney.com/wildfire/

thanks in advance,
-dave

Quote

0 #18 Matt Thomas 2010-12-01 06:58

Quoting IKRA:

Great tutorial, many thanks!
But now I'm searching the way to make my Flash movie, that I want to be on that intro page, to fit the browser window. I tried to change the width and hight to 100% but in this case I get a blank page. If I embed the flash without changing, I get only the original size: 750x450px. I'm new to joomla and don't know anything about html, so... Please, help!
Thanks again!

Hi Ikra,

I'm glad that you found this tutorial helpful. Unfortunately, I'm not a Flash expert so I can't tell you exactly how to do this. However, I did a quick search for "full screen flash" and came across this interesting thread at www.actionscript.org/forums/showthread.php3?t=70297 It does look a bit dated, but may get you in the right direction.

Best,

Matt

Quote

0 #17 IKRA 2010-12-01 00:59

Great tutorial, many thanks!
But now I'm searching the way to make my Flash movie, that I want to be on that intro page, to fit the browser window. I tried to change the width and hight to 100% but in this case I get a blank page. If I embed the flash without changing, I get only the original size: 750x450px. I'm new to joomla and don't know anything about html, so... Please, help!
Thanks again!

Quote

0 #16 Matt Thomas 2010-10-03 18:16

Quoting maroo:

wonderful component , really great work , everything is fine except , the main site logo in every page is now leading to the intro again !!! , I want the logo to lead to the home page not the intro page ...... please help !!

Hi Maroo,

It's very common for most templates to automatically link the logo to root of your website, or index.php. To change this, my guess is that you'll need to edit the template's index.php file so that it links to home page, not intro page. To get the URL of the "Home" page, go to the menu manager and open the "Home" item and copy the URL next to Link. It may be something like:

index.php?option=com_content&view=frontpage

Hope that helps.

Best,

Matt

Quote

0 #15 maroo 2010-10-02 08:38

wonderful component , really great work , everything is fine except , the main site logo in every page is now leading to the intro again !!! , I want the logo to lead to the home page not the intro page ...... please help !!

Quote

0 #14 Matt Thomas 2010-09-13 08:51

Quoting Tutakhail:

I have solved the problem with the blank page

That's great!
Quoting Tutakhail:

Unfortunately i didnt quite get how can i add a button to enter to my main site? could you please explain abit clearly since i m quite new to this stuff. and what about my home button? i mean if i click it will it return me to the splash page or my site?
Thanks alot mate!

Fundamentally, both the enter button and home menu item are just links to other pages. To create the enter button on your splash page, you would create a link to whatever Joomla menu item you want them to go to (I'm guessing your home menu item). The home menu item can be whatever you want it to be, as long as it's not set as the default menu item (since that is your splash page). Give it a try and see how it works out.

Best,

Matt

Quote

123

Refresh comments list
RSS feed for comments to this post

Add comment

We'd like to hear what you think. As long as it's constructive, we'll publish it.

JComments