Write your own Layout Alternative

m.a.c. cosmetics eyeshadowAlternative layouts are a possibility for extension developers to avoid the necessity of creating template overrides and for template designer a chance to offer different layouts for existing modules and components.

Imagine, a component would come with three alternative layouts for an article. Sometimes it is a 'normal article', sometimes it should look like a product, and sometimes like a book page. Or a template would offer different layouts for the core login module. You only have to choose which layout you would like to use.

It is possible to create alternative layouts for

  • components
  • categories
  • modules

The way of implementing the alternative layouts is exactly the same for components, modules and categories.

Example for Module Alternative Layouts

You can provide one or more additonal layouts to any module.

Depending on your needs you can place the layout directly in the modules view folder or in the template.

  • If you are the developer of that module you should put the different layouts to the module view template (Figure 1). Afterwards you can choose the layout you want to display in the module options (Figure 2).
  • If you are the developer/designer of a template you should put the different layouts to the template overrides folder html. There, you have to create a folder with the same name as the module and a subfolder for the view. It is the same folder that you use for template overrides. Obviously the file name has to be something other than default.php as this one has already been reserved for template overrides. And please do not use an underscore _ in the file name. For reasons I don't really know, it is sometimes not working. Afterwards, you can choose the alternative layout in the module option (Figure 3).

You can even translate the file name shown in the module options using the language files by adding the line


to the file /templates/beez_20/language/en-GB/en-GB.tpl_beez_20.sys.ini, it will translate the file name "mybeezlayout.php" to "my Login Layout".

Alternative Layout for ModuleAlternative Layout for Module

Figure 1: Alternative layout in the module folder

Alternative Layout from ModuleAlternative Layout from Module

Figure 2: Alternative layout in module options

Alternative Layout from TemplateAlternative Layout from Template

Figure 3: Alternative layout for module from beez_20 template

Alternative Menu Items

Additionally to the alternative layout, menu item types can be added to the layout and the option items of that article can be controlled by defining them in an xml file with the same name as the alternative layout file. The presence of an XML file makes an alternative layout a menu item. For example, to create an alternative menu item called "mylayout" for an article you would create two files in the templates/beez_20/html/com_content/article folder called mylayout.php and mylayout.xml. If you wanted to include more layout files, you would add these files with underscores in the file names.

Menu item layouts take priority over component or category alternative layouts.

The XML file uses the same format as the core menu item XML files. This allows you not only to create a customized layout for this menu item, it also allows you to create customized parameters. For example, you could hide some parameters or add new parameters.

Read more: