Page 1 of 1

How to make content 2-columns?

Posted: Thu Feb 14, 2008 7:31 pm
by 4john
Hi

Does anyone have some PHP code please to make the main content two columns instead of one (like a newspaper etc).

I'm not talking about 2 or 3 column layout as in left modules - main content - right modules -- I mean WITHIN the main contentpane.

I'm using the solarflare_ii template but I don't suppose that matters. Searched all forums for this but no solution found.

Thanks.

Re: How to make content 2-columns?

Posted: Thu Feb 14, 2008 8:29 pm
by IG88
Simple fix here... with tools that are in the content menu may have to play with it a bit....

Step1 click here
Image

Step 2: You just set it to 2 colums and 1 row and what ever alignment you want....

Image

Re: How to make content 2-columns?

Posted: Fri Feb 15, 2008 6:56 pm
by 4john
Yeah thanks guy. I was hoping though to do it in the HTML / PHP you know, then it's done properly. I don't like the cell solution, it's nothing but trouble.

Thanks anyway.

Re: How to make content 2-columns?

Posted: Thu Jun 03, 2010 9:15 am
by mp_johan
Hi; facing same problem; i am going to try a plugin, that will wrap the content of an article in a two column html table.
I think this table will get a css class that is a parameter for the plugin, so that margins etc can be set in the css of the site. will start on it now.
cheers, johan

Re: How to make content 2-columns?

Posted: Thu Jun 03, 2010 9:54 am
by mp_johan
Ok, got something working now:

1) create file "plugins/content/columns.php", containing:

Code: Select all

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );

jimport( 'joomla.plugin.plugin' );

class plgContentColumns extends JPlugin
{
  function plgContentColumns( &$subject, $params )
  {
    parent::__construct( $subject, $params );
  }

  // before content is sent to the browser, it is wrapped in columns.
  function onPrepareContent( &$article, &$params, $limitstart )
  {
    $article->text = "<table class=\"columns\" ".
                     "       cellpadding=\"0\" cellspacing=\"0\">".
                     "<tr><td>".
                     str_replace('{next-column}','</td><td>', $article->text).
                     "</td></tr>".
                     "</table>";
    return true;
  }
}
?>

As you can see in the code, the string "{next-column}" in the content will trigger the start of the next column in the output. So that is the only thing that you must add to your articles.
It would be much harder to try to determine in a more automatic way where the next column in the content should start and still get all columns as much equal in height as possible. An article may contain big fonts, images, tables, whatever.
It looks a bit like the problem you face when you want to printout a html page: where do you put the page-breaks?

So i opted for a manual approach as to when the next column must start.

I chose a hard-coded css classname (in a hurry, as always), which should come via a parameter for the plugin.
This plugin does ALL articles. It may be possible to let the plugin define a new parameter applying to articles, which would show up when editing an article. Then you could for each article regulate if this plugin should process it or not. I'm not enough joomla expert yet to do this.

CSS takes care of formatting the columns:

Code: Select all

table.columns td {
  width: 50%;
  padding: 0px 5px 0px 5px;
}
This assumes a 2 column layout; for 3 columns, just put in 33% instead of 50%.

cheers, johan

PS: will make the CSS class via a parameter, and post that lateron..

Re: How to make content 2-columns?

Posted: Thu Jun 03, 2010 10:56 am
by mp_johan
So, here is version 2 for the columns plugin.

Made a few changes:
1) css style for the table is now a parameter for the plugin
2) added {first-column} and {last-column} tags so that you can let part of the article be formatted in columns.
I want this because i want the title of the article (or the first paragraph) to cover the full width available, and then the text must be displayed in columns. At the bottom, there may be some text that should be displayed in full width (1 column) again. This may be repeated more than once inside an article, giving you more freedom.

The parameter is defined in file "plugins/content/columns.xml":

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="plugin" group="content">
  <name>Content - Columns</name>
  <author>Johan</author>
  <creationDate>June 2010</creationDate>
  <copyright>Use it if you like.</copyright>
  <license></license>
  <authorEmail></authorEmail>
  <authorUrl></authorUrl>
  <version>1.0</version>
  <description>Column layout for content</description>
  <files>
    <filename plugin="columns">columns.php</filename>
  </files>
  <params>
    <param name="cssclass" type="text" default="columns" label="CSS Class" 
           description="The CSS class for the table creating the columns."/>
  </params>
</install>
In file "plugins/content/columns.php" i use this parameter:

Code: Select all

  // before content is sent to the browser, it is wrapped in columns.
  function onPrepareContent( &$article, &$params, $limitstart )
  {
    $plugin = & JPluginHelper::getPlugin('content', 'columns');

    // Load plugin params info
    $pluginParams = new JParameter($plugin->params);
    $cssclass = $pluginParams->get('cssclass', 'columns');

    $start_count = substr_count($article->text, "{first-column}");
    $end_count = substr_count($article->text, "{last-column}");

    if($start_count > 0)
    {
      if($start_count > $end_count)
      {
        $article->text = "<p>Missing {last-column}</p>".$article->text;
      }
      else
      {
        $pattern = array();
        $replace = array();

        $pattern[] = "{first-column}";
        $replace[] = "<table class=\"".$cssclass."\" cellspacing=\"0\" ".
                     "cellpadding=\"0\"><tr><td>";

        $pattern[] = "{next-column}";
        $replace[] = "</td><td>";

        $pattern[] = "{last-column}";
        $replace[] = "</td></tr></table>";

        $article->text = str_replace($pattern, $replace, $article->text);
      }
    }

    return true;
  }
You must do some work to get to the plugin parameters. The &$params given to the function are the parameters of the article, not the plugin!

You can see that i added some checks and that i now use 3 possible tags:

{first-column} : "the first column starts right here"
{next-column} : "the next column starts right here"
{last-column} : "this was the last column"

Notice the meaning of {last-column}..

Finally, the plugin must exist in the jos_plugins table in the database:

Code: Select all

INSERT INTO jos_plugins (name, element, folder, published)
VALUES ('Content - Columns', 'columns', 'content', 1);
I hope you like it like this..

cheers, johan

Re: How to make content 2-columns?

Posted: Sat Jun 12, 2010 5:20 pm
by abatu
First thank you fro ur hard work.
i'v tried ur plugin and this is what i got

// before content is sent to the browser, it is wrapped in columns. function onPrepareContent( &$article, &$params, $limitstart ) { $plugin = & JPluginHelper::getPlugin('content', 'columns'); // Load plugin params info $pluginParams = new JParameter($plugin->params); $cssclass = $pluginParams->get('cssclass', 'columns'); $start_count = substr_count($article->text, "{first-column}"); $end_count = substr_count($article->text, "{last-column}"); if($start_count > 0) { if($start_count > $end_count) { $article->text = "
Missing {last-column}

".$article->text; } else { $pattern = array(); $replace = array(); $pattern[] = "{first-column}"; $replace[] = "
"; $pattern[] = "{next-column}"; $replace[] = " "; $pattern[] = "{last-column}"; $replace[] = "
"; $article->text = str_replace($pattern, $replace, $article->text); } } return true; }

and then after this errors i get my text,But without ant column...
So please tell me how to fix it or use it ???
thank you

Re: How to make content 2-columns?

Posted: Sun Jun 13, 2010 7:18 am
by mp_johan
hello abatu,

i think you have literally copied the code from my second post into file "plugins/content/columns.php".
this will not work as it misses the php and class declaration.

here is the full content for file "plugins/content/columns.php" :

Code: Select all

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );

jimport( 'joomla.plugin.plugin' );

class plgContentColumns extends JPlugin
{
  function plgContentColumns( &$subject, $params )
  {
    parent::__construct( $subject, $params );
  }

  // before content is sent to the browser, it is wrapped in columns.
  function onPrepareContent( &$article, &$params, $limitstart )
  {
    $plugin = & JPluginHelper::getPlugin('content', 'columns');

    // Load plugin params info
    $pluginParams = new JParameter($plugin->params);
    $cssclass = $pluginParams->get('cssclass', 'columns');

    $start_count = substr_count($article->text, "{first-column}");
    $end_count = substr_count($article->text, "{last-column}");

    if($start_count > 0)
    {
      if($start_count > $end_count)
      {
        $article->text = "<p>Missing {last-column}</p>".$article->text;
      }
      else
      {
        $pattern = array();
        $replace = array();

        $pattern[] = "{first-column}";
        $replace[] = "<table class=\"".$cssclass."\" cellspacing=\"0\" ".
                     "cellpadding=\"0\"><tr><td>";

        $pattern[] = "{next-column}";
        $replace[] = "</td><td>";

        $pattern[] = "{last-column}";
        $replace[] = "</td></tr></table>";

        $article->text = str_replace($pattern, $replace, $article->text);
      }
    }

    return true;
  }
}
?>
Put this in file "plugins/content/columns.php" and it should work.

cheers, johan

Re: How to make content 2-columns?

Posted: Sun Jun 13, 2010 10:04 am
by abatu
Hello mp_johan
Thank u so much,Now there is no errors.
But i can't get it work,Please give me some examples how to use it. :-[
I see no column in article!!!
Thank u again.

Re: How to make content 2-columns?

Posted: Sun Jun 13, 2010 3:06 pm
by mp_johan
Hi abatu,

if you put the next text in a joomla article, you can test if it works:

Code: Select all

<h1>this text is shown in full width, so there should be no columns yet.</h1>
<p>{first-column} this is the first column, it is on the left. remember, that table, tr and td elements are inserted by the plugin on the spots where you put the first-column, next-column and last-column markers. if you put something in css that kills the tables (hides them all for instance) then you will indeed see no columns, because you cannot see any tables! {next-column}</p>
<p>this is the second column. i type some extra text here, just to give this column a bit of a body.</p>
<p>{last-column}</p>
<p>this text is, again, shown in full width. there should be no columns anymore. it is not too complicated actually, just check to make sure you have no typing errors.</p>
screen-shot of the result:
Screenshot.png
cheers! johan

Re: How to make content 2-columns?

Posted: Sun Jun 13, 2010 5:39 pm
by abatu
Hello mp_johan
U R just Great!!!!!! :D
Thank you so much.... exactly what i need.

Re: How to make content 2-columns?

Posted: Sun Jun 13, 2010 7:16 pm
by abatu
Hi again
i have one more thing,Why when insert image to the second column the first column changed ( i mean it's position becomes like padding top (10 or 50 px) )?
can u make it like this "http://forum.joomla.org/viewtopic.php?p=1748847".
thank you.

Re: How to make content 2-columns?

Posted: Sun Jun 13, 2010 7:33 pm
by mp_johan
hi abatu, this sounds like solvable in css.
as i think of it, we should specify in the css that the TD elements of the TABLE that is generated by the plugin must have vertical-align set to "top".

so the css bit becomes:

Code: Select all

table.columns td {
  width: 50%;
  padding: 0px 5px 0px 5px;
  vertical-align: top;  /* this line was added */
}
learning css is a good thing; checkout http://www.w3schools.com/

cheers, johan

Re: How to make content 2-columns?

Posted: Sun Jun 13, 2010 7:40 pm
by abatu
Sorry for this stupid question, But where is the css file?,i have some experience in css.

Re: How to make content 2-columns?

Posted: Sun Jun 13, 2010 8:27 pm
by abatu
:D Thanx i did it.
Thank you again.very nice plugin.

Re: How to make content 2-columns?

Posted: Sat Aug 07, 2010 9:43 am
by leodom
Hi !

Looking around to solve a multi columns design for my template,
I stumbled upon a javascript script that works very fine, with no tables but just two divs:

http://randysimons.nl/125,english/129,m ... lumn-text/

To use it in articles, I switch to html editor mode and put the divs on top, and closing divs on bottom, and voila !

You can define some parameters, number of columns or just let it flow...

Hoping this will help somebody else :D

Re: How to make content 2-columns?

Posted: Mon Nov 29, 2010 12:03 am
by RegLinUsr
Johan, thank you very much! I spent several hours attempting to do this with tables in my layout
only to have nothing work correctly. I used your coding above and now my layout looks exactly as
I pictured it in my head. Total time spent adding the code, editing my mySQL and; finally, creating
layout to appear as I desired: approximately 1 hour.

Re: How to make content 2-columns?

Posted: Fri Mar 25, 2011 3:54 pm
by atrepp
Hi Johan,

looks like you made o lot of people happy, so me 2 please.

i took over the .php and .xml into plugins/content/

and created a new table named jos_plugins with 4 fields, but i have no clue what to do in mysql. what are the filedtypes and so on.

so my result is not what it should look like, it only shows the text/colums below eachone and note how columns should appear, whan i use your example.

so please a tutorial 4 dummies if you may find the time, thanks a lot

greetings Alex

Hope you get what i mean, my english could/shoul be better :-[

Re: How to make content 2-columns?

Posted: Thu Apr 07, 2011 3:28 pm
by roareo
Johan, you are absolutely fantabular! REALLY appreciate this! Worked perfectly and saved me sooooooooooooooooooooo much time I actually registered just to give props!

ATREPP, lemme answer your question. Get rid of the table you put into the database, go to mysql where it you can input queries and commands. Then just put in Johan's code as follows exactly and hit GO:

INSERT INTO jos_plugins (name, element, folder, published)
VALUES ('Content - Columns', 'columns', 'content', 1);

Hope this helps! ^^v

!!!THANKS AGAIN JOHAN!!!

Re: How to make content 2-columns?

Posted: Thu Aug 18, 2011 10:52 am
by croc_the_99
Hi all,
I tried also the code, I did all the steps but when I'm trying to write the article nothing happens.
I mean after i publish the article on the page nothing happens, is the same as before. What do you
think I'm doing wrong? Thx!

Sorry if I sound stupid but I'm new in this :)

Re: How to make content 2-columns?

Posted: Sun Oct 23, 2011 3:46 am
by josmars
Hi, This is nice.
But I just want to ask if "anybody can share a code for the css or I mean inside Template css to call 'columns.php and or 'columns.xml"?
Another thing, If I would like to load some module or position inside the article, well this coding also can be used?

I try to apply on my site @ www.jobopensingapore.com were job categories loaded inside an article.
Please help and thank you.

Is it also possible to make a colour on tag h1?

Best Regards,
mars

Re: How to make content 2-columns?

Posted: Mon Oct 24, 2011 11:18 pm
by JamesObZ
Seems I am in the same boat as you croc_the_99! I am too having trouble getting this to work :(
@regLinUsr, i see you have managed to fix this and i have used the same code to no avail. Have sent you a PM regaridng my Pizza Express Vouchers site, hoping you can help! I guess my last resort if no-one can assist me is to look for some plugin that can do this for me. Hopefully one exists.

Re: How to make content 2-columns?

Posted: Mon Nov 28, 2011 9:42 pm
by coquin
hi Johan
are you still there?? I hope yes..
I'm trying to make your excellent script work in joomla 1.7, but without success.
I wonder if you are still interested in it and willing to update it to new joomla 1.7
statements.
waiting for a gentle reply
all the best
ruggero

Re: How to make content 2-columns?

Posted: Tue Nov 29, 2011 1:18 am
by josmars
Hi Guys,
No need to complicate with the code you need to make it two columns for your front page. SP TABS with the upgrade JooTabs @ http://extensions.joomla.org/extensions ... panel/3141 <-- module can help you create a better look in to two columns on your frontpage. You can insert the module position into your fronpage article and it will surely show up. Take a look on my site @ http://www.jobopensingapore.com. Hope this can help you or you can contact us for help? :P

Cheers w/ :pop
aaahhhhhh....tsarap...

Re: How to make content 2-columns?

Posted: Wed Feb 29, 2012 3:58 pm
by sunshinehtg
josmars wrote:Hi Guys,
No need to complicate with the code you need to make it two columns for your front page. SP TABS with the upgrade JooTabs @ http://extensions.joomla.org/extensions ... panel/3141 <-- module can help you create a better look in to two columns on your frontpage. You can insert the module position into your fronpage article and it will surely show up. Take a look on my site @ http://www.jobopensingapore.com. Hope this can help you or you can contact us for help? :P

Cheers w/ :pop
aaahhhhhh....tsarap...
Hey both your links seem to be broken ;)

Re: How to make content 2-columns?

Posted: Wed Feb 29, 2012 7:27 pm
by sunshinehtg
ugh i am so frustrated. i tried everything you all suggested and nothing is working. feeling really ignorant. i have worked with codes before, not sure if its because i am in 2.5 or just not getting all that needs to be done. If i am entering a code into the article do i need to be in HTML mode? and if yes i am not finding the option since adding the JCE editor :(

Re: How to make content 2-columns?

Posted: Mon Jan 21, 2013 9:14 pm
by grashoper