Jure Stern Design & Development

448 words
1 min 29 sec

Alternative layout for Articles and Categories in Joomla 1.7

Published on 30 Dec 2011 Comments

Sometimes we need to change the display of Joomla articles and categories. Creating different layouts for articles and categories is almost identical to creating alternative module layouts. The use of layouts is more practical from the use of template overrides if we need to have more than one different layout presentation of our content.

Copying the right files

In designing special websites we often have distinct needs. Sometimes all of the information in the articles is not important to show to the audience. We could tackle the article parameters field in the article settings to show/hide some of the data. But what if we wanted to visually change the presentation of the data and have two kinds of different presentations.

A great example could be a portfolio site. In displaying the portfolio we could enhance the title, date and pictures of a project. Whereas in a blog part of the site we need the info about the writer, date of publishing, title and short description… If we present both of these tasks with articles, we can create two different experiences with alternative article and category layouts.

Let’s say we want to change the visual appearance of our references. All the files that we will need are located in:

  1. (/components/com_content/views/article/tmpl/default.php)
  2. (/components/com_content/views/category/tmpl/default.php)
  3. (/components/com_content/views/category/tmpl/default_articles.php)
  4. (/components/com_content/views/category/tmpl/default_children.php)

We must create alternative layouts of these files. We copy them in our html template directory (your_root_directory/templates/your_template/html/com_content/category) and (your_root_directory/templates/your_template/html/com_content/article).

Renaming the files

If we leave the names of the files untouched, then we would be using template overrides. But with them you can use only one specific style and we want to have at least 2 different styles.

Our next job is to rename these files. The name of the file will then appear in our Alternative layout field in the Article options settings. I will name the style reference. We rename the files copied so that we have the following structure:

The structure of html folder for Alternative Article and Category layouts should look similar
The structure of html folder for Alternative Article and Category layouts should look similare.

It is important to be careful in the structure of category layouts. We can only have one layout with the same name all other sub layouts must have an underscore in the name. Now if we go to our Article or Category settings we can choose our alternative reference layout.

Changing the files

I am not going to talk about what to change in these files as everybody has different needs. You can play around with the code and if something breaks you can just override the code from the original files.

Selecting the alternative layout in Joomla backend

After we copied and changed the files we can choose them in the backend. For changing the category layout we select the alternative layout file under the Basic options of the category. We also need to change the layout in the Article Options when we edit the article. We just choose our newly created Alternative layout file.

Next time I will write about alternative menu layouts, which combine both alternative layouts for articles and categories.

About the Author

A picture of Jure Stern

Jure Stern is a Freelance Web Designer & Developer from Slovenia. He worked at a startup in Canada and is now living his dream of being a freelancer.

comments powered by Disqus