It is good to see many new options coming to the core, especially when this article is wrapped inside
If you've ever created a template override, then you'll find the process of creating alternative layouts to be nearly identical. The only difference is that your alternative layouts will appear as an option alongside the default layouts, instead of completely overriding them. The following examples are based on Joomla 2.5.x, and should also work for the Joomla 3.x series.
Alternative Layouts for Articles:
- Locate the default layout in components/com_content/views/article/tmpl/default.php
- Copy this to your template's html folder: templates/[your_template]/html/com_content/ (create these folders if they don't already exist)
- Change the file name. We'll call it myarticle.php
You can edit anything in this new layout. For example, I'll change the print & email icons to appear above the article title instead of below it. And I'll change the article title to an H1 tag.
To use your new layout, just go to your Article's Options and select it from the Alternative Layout menu.
And here on the front-end is what our "myarticle" layout looks like compared to the default:
Alternative Layouts for Modules:
Follow the same process to make alternative layouts for Modules! I'll use the Custom HTML module for this example.
- Locate the default layout in modules/mod_custom/tmpl/default.php
- Copy this file to your template's html folder: templates/[your_template]/html/mod_custom/
- Change the file name. We'll call this one mymodule.php
Your new layout will appear in your module settings, under Advanced Options > Alternative Layout.
Alternative layouts can be created for nearly any type of module. Fellow JCM author Steve Burge has a great example of how to create an alternative layout for the Menu Module. Check that out on the OS Training Blog: How to Use Joomla's Alternative Layouts for Modules
Tip: Only create alternative layouts when absolutely necessary, such as editing html tags or changing the position of elements. For things like editing styles or colors, it's a best practice to make those changes within your template's CSS files rather than inside the layouts. Keep in mind that you can also use Module Class Suffixes and Page Classes to access CSS styles.
I hope this demonstration has shown you how powerful the Alternative Layouts feature can be. Virtually any of the content in the core layouts can be changed to suit your needs.
And if you're a template developer, then consider including Alternative Layouts in your designs. This is a major feature that very few template providers are taking advantage of.
Go forth and get creative with Alternative Layouts (and be careful if you're not an experienced programmer!).
Have you used Alternative Layouts in a creative way? Let us know about it in the comments below.
