Joomla Article Template
Osman Briseno
Joomla extensions define their output appearance with template files, which contain HTML and PHP generated HTML markup, and CSS files that define layout, colour scheme, fonts and so on. That may be perfectly suited to your needs, especially as you can alter appearance with your own CSS styles. Sometimes you want to show additional information or perhaps less information. For that you need to create a template override.
Many of the Joomla extensions have quite complex output templates that are difficult to read. You need a good understanding of HTML, PHP and CSS to tackle some of them. So this article illustrates the process by creating an override for the logout form which is actually in the login module, mod_login. The site owner would like the logout form to show the time at which automatic logout will occur after a period of inactivity.
The html folder is where overrides are located. If you expand the html folder you will see that there are already overrides for layouts, mod_custom, mod_menu and tinymce. Expand each to see what is in them. There is no mod_login at this stage.
Select the mod_login item. The mod_login template php files will be copied into the html folder and you will be returned to the Editor tab. Expand the html and mod_login folders. You will see default.php and default_logout.php.
You do not want the default.php file as that is an override for the login form. Select it and then the Delete File button in the Toolbar. In the alert dialog, Confirm that you wish to delete the file.
In the Editor tab, select the default_logout.php file. Notice the buttons at the top right: Show Original File and Show Differences. The latter has been set to Yes for the following screenshot to show some lines of code added near the top of the file. These lines of code calculate when the user session will expire after loading the page containing the logout form.
The Diff area shows added lines with a green background and deleted lines with a red background. There are no deleted lines in this case. The code is shown here should you wish to copy it to try this yourself.
You should see the logout form change each time the page is reloaded. But what if you should change your mind? Or have different options for different User groups? Welcome to Layouts, the subject of a separate article.
The Create Overrides tab of the Templates: Customise (Cassiopeia) form is used to create any of the elements of Joomla output for which it is possible to create overrides. The override folder names mostly start with com_, mod_ or plg_. Note that the second part of a plugin override folder signifies the plugin group. Here is an example selection of override folders:
Small layout files are often used for individual elements of Joomla! pages. The articles Read More button, the Intro image and the Full image are all examples of elements that are generated by their own layout files. These micro-layouts are found in the /layouts folder. For example, in the Category Blog view, the blog_item.php file contains the code to place the article title, an intro image, the intro text, as well as various other relevant parts of the page. It does so by using a LayoutHelper call passing the layout to use as a parameter. This is an example, the call to insert the Article Title in the blog layout:
If you want the template override not to depend on the menu position than the standard joomla way of assigning a different template to a menu will not work. You will need to get your hands dirty and write some custom code. You will need to use the article_id as a trigger for template switch.
You should really try to stay away from hard coding anything in to the template if it can be avoided. Not sure why you would specify that the article not be linked from a menu. The easiest way to accomplish this without having to write and code is to create a new menu, then add a menu item that links to the article you want to specify the template for. You don't have to put the menu in a module anywhere so it will never show up on the site, but it will show up in the menu assignment in the template manager.
You can do this with single articles, categories, sections, or even components. As long as you have a menu link to associate the template to. I always create an Admin only menu to put links that are needed to run the site, but do not need to be accessed by users.
Apart from the "hidden menu item" technique (which is useful but can break SEF URLs in some situations), a useful tool is Chameleon. This allows you to select specific articles/categories/sections (plus things like browser type, user group, component, whatever) and use these to trigger a certain template.
Though this is an old post, I thought I'd share my thoughts: You can easily change template on a single article, by implementing the onAfterInitialize() - function in a system plugin. No need to modify the Joomla core.
The templateDetails.xml file is required for Joomla! templates and it can be found in the root template directory of any template inside the Joomla! templates directory. This XML file holds the basic meta-data that Joomla! needs in order to display and provide it as template option in the backend. It also contains a variety of other meta-data that is used to provide information about the template and the template authors and define files and folders that are used by the template. It also defines template language files, as well as parameters and settings the template will offer in the backend.
The templateDetails.xml file uses a fairly basic XML format and structure. The XML data in this file is separated into sections and specifically formatted in to render the various pieces and parameters. The XML data is read and parsed by powerful tools in the Joomla! core, then rendered to register the template and create the display seen in the Template Manager. This provides template developers a relatively simple method for creating assignments, settings and parameters for use in the template.
The implementation of templateDetails.xml will vary from template to template, it can be simple or complex depending on what features the template offers. The default Joomla! 3 Protostar template serves as an excellent example to demonstrate how this file is used. The various sections of this file are explained below.
The next line is also required as it tells Joomla! that the data in this file is to be used for an extension, in this case a template. All template data is contained within this tag, and the file concludes by closing this tag .
The first section is generally where template developers include information about the template. Information such as names, dates, contact information, copyrights, version number and a basic description are common. This data is used in the Template Manager and is shown in the list of available templates and can be displayed in the template editing screens as well.
You may notice that the final line of this code, the description, contains a language string and not the actual description. This string references a language file in the template where the actual description is defined and written. This is a preferred method in Joomla! for extensions that are distributed for public use to accommodate international language support, however one could simply type the description if translation is not a concern. The language files are also defined in the templateDetails.xml file, in the language section, which is covered in more detail later in this article.
All Folders related to the template installation are listed here. All files and folders located in the root of the template directory during installation need to be listed here. Any files contained inside a folder that is listed are automatically included. Each folder contains full path information starting at the template root. The Administrator's Installer uses this information when storing the files during installation.
The list of positions are contained within the tag. Each tag creates a module position that is available from the position list in the module manager and in other areas of Joomla! where module positions can be selected.
The simple format of the position list means it can be easily customized. For example, to add a new module position to the list, simply add a new tag inside the tag with a unique name using all lowercase letters with no spaces. Keep in mind, this only adds the position to the backend and additional development in other template files is required to render the new position on the front end.
Some templates may include language files to allow translation of static text in the template. Notice that the language folder is defined and the two language files inside are also included. Even though the language folder was defined earlier, these files need their own definitions. This method tells Joomla! where the language files that contain strings used by the template reside.
Language strings are used in templates and throughout Joomla! for the purpose of utilizing the extensive international language support features in Joomla!. This method provides developers and users with a relatively simple method to translate any text that is used in templates and extension screens. Joomla! will check the language files for any language strings that are used and load the corresponding text in the language chosen by the user in place of the string. In this instance, there are only files for English (en-GB), any text translations in other languages must be provided by Users or Developers before they can be used by Joomla!.
A template may offer display options and other parameters that can be chosen by the Administrator in the Template Manager. For instance, the default Protostar template allows the Administrator to change various colors, fonts and add a logo, these parameters are found under the Advanced tab, which is also defined and created by the XML parameters.
Template parameters are contained inside a tag, which contains a tag with a name attribute of "params". Inside the tag is where the parameter groups and individual parameters are defined. The tag is used to create groups of parameters. Individual parameters are defined with the tag.
c80f0f1006