What is an Alternative Layout?
Every module has at least one layout view. It is the default view method of the module. We will deal with the idea of overwriting or creating a new view of the module to cover our needs.
As an example we will use the preinstalled Joomla module "Articles - Latest".
This module shows a list of article titles from specified categories in a simple unordered (ul) list.
Will will make our own customizations to that. So lets begin.
Installing the module
From the main menu of the Joomla administration we select the menu item "Extensions" and then "Modules".
On the next screen, we click on the "New" button and from the module list we select "Articles - Latest".
In the module details page we will leave all settings as is and we will just set the module at the "position-7" and then Save and Close. With this way we activated the specific module to show up in the sidebar (position-7) of our website. It is now time to go to the next part of our tutorial, the customization of the module views.
Module Structure
Every module consists of a list of files and folders that are all gathered in the "Modules" folder at the root of the Joomla installation.
If we enter the "Modules folder" we will see a list of folders. Every folder belongs to a module that is installed in your website. We will work with the "mod_articles_latest" folder which is the "Article - Latest" module that we installed earlier.
Inside this folder there is a subfolder with the name tmpl. There, we can see all the layout views of the specific module. In our case there is only one, the "default.php" but other modules may have other views as well.
We could just edit and work directly with the default.php and do what we need, but even though that could work immediately, it would be a big mistake because we are in the main Joomla structure and if there is a new update it might overwrite our work and loose everything we change. The right thing to do is to copy this file (default.php) and paste it in our template to bypass the view of the module.
Override the module layout
Right click and copy the default.php, go back to root and click the templates folder and from there to protostar > html. The html folder contains all the "override views" of the website. In order to check which view belongs to which module , all the views must be in folders with the exact same names of the module folders we checked earlier in the modules folder. So in our case we create a new folder with the name "mod_articles_latest" and paste the default.php there.
Finally we are ready to do our work.
We open the default.php to check the code and do our changes.
As we see on the above screen there is foreach loop that shows each article in a list item. You are free to change the above code and make whatever changes suit your needs. In the next screen we just turned the view from a simple unordered list of articles to a table.
So thats it! If you save the file, wherever you place an Articles - Latest module, instead of the simple list, the results will show up in a table form.
Create an alternative Layout (new layout)
In some cases you could need both views, list or table, so instead of making an override view with the use of default.php, you can rename the file so we dont change the default view but create a new one. For example lets name it "table.php".
To activate this table view, you will go to module settings and specifically in the "Advanced" tab. There, from the field alternative layout dropdown list except of the default.php you will also see the table! Select it and then Save and Close.
Thats it. In the specific module, the view will be a list of articles in nice table view.
Hope you enjoy our tutorial and give us ideas for more!
