Multiple columns in Joomla Articles

The other day I was working on a site and my designer suggested the layout would work best if the content of each article was laid out in a 2 column format with the text wrapping from the bottom of one column to the top of the next. As you're probably aware, this isn't easily done with Joomla, so I went in search of a solution. A developer friend suggested it sounded like a job for jQuery and pointed me to a relevant link: http://welcome.totheinter.net/columnizer-jquery-plugin/

I liked the result and flexibility that this code provided so I decided to see if I could work it into a Joomla template. I hope sometime to package this up as an extension but for now, I just needed to get a site with two-column articles launched so here's how I made it work.

How to have multiple column articles in Joomla 2.5 using jQuery

  1. Read the documentation provided on the site to understand what the plug-in can do and how to configure it. 
  2. Download the columnizer plug-in from http://welcome.totheinter.net/columnizer-jquery-plugin/. It contains two files: jquery.columnizer.js, and jquery.js. 
  3. Upload jquery.columnizer.js, and jquery.js to /templates/yourtemplate/js/.
  4. Edit the index.php file of your template and add the following lines in the <head> section of the file. 
    <script type="text/javascript" src="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/js/jquery.js"></script>


<script src="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template ?>/js/jquery.columnizer.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$('h1').addClass("dontend");
$('.leading-0').columnize({width:350, lastNeverTallest: true });
$('.item-page').columnize({width:350, lastNeverTallest: true, columns: 2 });
});
</script>

  1. Note that .leading-0 and .item-page only cover two of the types of pages output by Joomla. You may need to add in more lines like this for other div classes where you want the columnizer to apply. 
  2. Apply whatever styles you want to .first.column, .last.column, and .column. 
  3. That pretty much covers the essentials of what you need to know. For more information on the columnizer refer back to Adam's page.

Thanks to Adam Wulf for making this handy code available for all of us to use. He doesn't accept donations or charge for this software but encourages people who use it to make a donation to his favourite charity, charity:water

Main Menu