Multiple column articles in Joomla

Question

I've got a client that requires that an article be displayed in two, sometimes three, columns in Joomla. I am fairly sure they won't be happy with having to edit 3 articles for 3 columns so the splitting would have to be done automatically.

I've done something similar before where it'll split a chunk of HTML into n columns, but have no real idea how to accomplish this within Joomla itself.

Any ideas gratefully recieved!

Answer 1

This doesn't seem to be easy.

At first thought this should be an CSS attribute, but if it exists, it is part of CSS 3.0 and as such only understood by modern browsers (if at all). But I didn't find any way to do this in CSS.

So you actually have to modify your HTML code. I would propose the following:

• A Button (editor-xtd plugin) that splits the article into several parts, each one for one column, showing a dotted line in the editor box (similar to the "read-more"-Button).
  Eg it inserts in the article: (you will have to define hr.column in /templates/system/css/editor.css).
• A (content) plugin that creates the multiple colum-style,
  Eg replacing the hr-Tag with table or floating divs.

This way, it is half-automized, without mangeling in the Joomla! files but only adding to extensions to it.

Answer 2

An alternative approach:

Use Javascript to split up the Article in several column in the browser. Here I could imagine a full-automated approach could work.

Advantages (over the first approach):

• As Javascript can know, which height the paragraphs actually have in the browser (unlinke PHP), you could find the optimum split more accurately.
• This can be implemented in the template php-File: you tell the template to include the js-File. So it could be made context-dependent,
  Eg: If the left column is collapsed (because there are no modules in it), tell the JavaScript-File to initialize to 3 columns, else 2 columns.

However, have in mind that it should rest usable for those who have Javascript disabled.

Answer 3

the CSS 3 rules for multi-columns are:

-column-width

-column-gap

-column-rule

-column-count

with the vendor label (-moz, -webkit) before.

More info at http://www.css3.info/preview/multi-column-layout/

I would use css and tell the people with Explorer to change browser! (i'm jocking of course)

Otherwise javascript is the way like said before. This script should do (not tested) http://13thparallel.com/archive/column-script/

Answer 4

This should be done through the template, some PHP coding is involved.

One of our clients asked us to do the exact same thing before, and we have done it through template. Note that for very small articles we increased the font in order to split the article into 3 columns.