The Joomla! Community Magazine™

Tutorial: Taking Advantage of Alternative Layouts for Articles and Modules

Written by | Friday, 01 February 2013 00:00 | Published in 2013 February
Template overrides are a great way to customize your Joomla site. But what if you want to use different article or module layouts throughout your site? Joomla's strict MVC architecture makes that a breeze with the "Alternative Layouts" feature.

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:

  1. Locate the default layout in components/com_content/views/article/tmpl/default.php
  2. Copy this to your template's html folder: templates/[your_template]/html/com_content/ (create these folders if they don't already exist)
  3. Change the file name. We'll call it myarticle.php

myarticle

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.

article overrides

To use your new layout, just go to your Article's Options and select it from the Alternative Layout menu. 

alt-article-layout

And here on the front-end is what our "myarticle" layout looks like compared to the default:

article layouts

Alternative Layouts for Modules:

Follow the same process to make alternative layouts for Modules! I'll use the Custom HTML module for this example.

  1. Locate the default layout in modules/mod_custom/tmpl/default.php
  2. Copy this file to your template's html folder: templates/[your_template]/html/mod_custom/
  3. Change the file name. We'll call this one mymodule.php

mymodule

Your new layout will appear in your module settings, under Advanced Options > Alternative Layout.

alt-module-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.

Read 55097 times
Tagged under Sitebuilders, English
Scott Greenwald

Scott Greenwald

Scott Greenwald runs the popular resource site JoomlaDirect.com. He's a seasoned front-end developer with a background in graphic design. Scott works as a fulltime freelancer from his home office in Tokyo Japan, where he specializes in custom Joomla development and template design for clients.