How to make content 2-columns?

Discuss the development and implementation of Joomla! 1.0.x templates here.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
4john
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Thu Feb 14, 2008 7:19 pm

How to make content 2-columns?

Post by 4john » Thu Feb 14, 2008 7:31 pm

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.

IG88
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Tue Jan 01, 2008 8:44 pm
Contact:

Re: How to make content 2-columns?

Post by IG88 » Thu Feb 14, 2008 8:29 pm

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
Having issues with users not getting regstraiton emails??? i found the solution!!!!!
http://forum.joomla.org/viewtopic.php?f=431&t=375075

Hope this helps!

4john
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Thu Feb 14, 2008 7:19 pm

Re: How to make content 2-columns?

Post by 4john » Fri Feb 15, 2008 6:56 pm

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.

mp_johan
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Thu Jun 03, 2010 9:09 am

Re: How to make content 2-columns?

Post by mp_johan » Thu Jun 03, 2010 9:15 am

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

mp_johan
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Thu Jun 03, 2010 9:09 am

Re: How to make content 2-columns?

Post by mp_johan » Thu Jun 03, 2010 9:54 am

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

mp_johan
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Thu Jun 03, 2010 9:09 am

Re: How to make content 2-columns?

Post by mp_johan » Thu Jun 03, 2010 10:56 am

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

abatu
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu May 13, 2010 7:05 pm

Re: How to make content 2-columns?

Post by abatu » Sat Jun 12, 2010 5:20 pm

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

mp_johan
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Thu Jun 03, 2010 9:09 am

Re: How to make content 2-columns?

Post by mp_johan » Sun Jun 13, 2010 7:18 am

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

abatu
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu May 13, 2010 7:05 pm

Re: How to make content 2-columns?

Post by abatu » Sun Jun 13, 2010 10:04 am

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.

mp_johan
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Thu Jun 03, 2010 9:09 am

Re: How to make content 2-columns?

Post by mp_johan » Sun Jun 13, 2010 3:06 pm

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
You do not have the required permissions to view the files attached to this post.

abatu
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu May 13, 2010 7:05 pm

Re: How to make content 2-columns?

Post by abatu » Sun Jun 13, 2010 5:39 pm

Hello mp_johan
U R just Great!!!!!! :D
Thank you so much.... exactly what i need.

abatu
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu May 13, 2010 7:05 pm

Re: How to make content 2-columns?

Post by abatu » Sun Jun 13, 2010 7:16 pm

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.

mp_johan
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Thu Jun 03, 2010 9:09 am

Re: How to make content 2-columns?

Post by mp_johan » Sun Jun 13, 2010 7:33 pm

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

abatu
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu May 13, 2010 7:05 pm

Re: How to make content 2-columns?

Post by abatu » Sun Jun 13, 2010 7:40 pm

Sorry for this stupid question, But where is the css file?,i have some experience in css.

abatu
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu May 13, 2010 7:05 pm

Re: How to make content 2-columns?

Post by abatu » Sun Jun 13, 2010 8:27 pm

:D Thanx i did it.
Thank you again.very nice plugin.

User avatar
leodom
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Fri May 12, 2006 9:07 am
Location: Moorea - Tahiti
Contact:

Re: How to make content 2-columns?

Post by leodom » Sat Aug 07, 2010 9:43 am

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

User avatar
RegLinUsr
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Sun Nov 28, 2010 10:41 pm
Location: California, USA

Re: How to make content 2-columns?

Post by RegLinUsr » Mon Nov 29, 2010 12:03 am

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.
Joomla!: 1.5.22
OS: Linux x86_64
Kernel: 2.6.32-26.1
Apache: 2.2.16
PHP: 5.2.14
MySQL: 5.1.47

atrepp
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Fri Mar 25, 2011 2:51 pm

Re: How to make content 2-columns?

Post by atrepp » Fri Mar 25, 2011 3:54 pm

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 :-[

roareo
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu Apr 07, 2011 3:24 pm

Re: How to make content 2-columns?

Post by roareo » Thu Apr 07, 2011 3:28 pm

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!!!

croc_the_99
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu Aug 18, 2011 10:37 am

Re: How to make content 2-columns?

Post by croc_the_99 » Thu Aug 18, 2011 10:52 am

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 :)

josmars
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sun Oct 23, 2011 3:17 am

Re: How to make content 2-columns?

Post by josmars » Sun Oct 23, 2011 3:46 am

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

JamesObZ
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sun Oct 23, 2011 5:42 pm

Re: How to make content 2-columns?

Post by JamesObZ » Mon Oct 24, 2011 11:18 pm

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.

coquin
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Sat Oct 03, 2009 8:22 pm

Re: How to make content 2-columns?

Post by coquin » Mon Nov 28, 2011 9:42 pm

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

josmars
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sun Oct 23, 2011 3:17 am

Re: How to make content 2-columns?

Post by josmars » Tue Nov 29, 2011 1:18 am

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...
You do not have the required permissions to view the files attached to this post.

sunshinehtg
Joomla! Intern
Joomla! Intern
Posts: 82
Joined: Thu Jan 19, 2012 8:24 pm
Contact:

Re: How to make content 2-columns?

Post by sunshinehtg » Wed Feb 29, 2012 3:58 pm

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 ;)

sunshinehtg
Joomla! Intern
Joomla! Intern
Posts: 82
Joined: Thu Jan 19, 2012 8:24 pm
Contact:

Re: How to make content 2-columns?

Post by sunshinehtg » Wed Feb 29, 2012 7:27 pm

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 :(

grashoper
Joomla! Intern
Joomla! Intern
Posts: 55
Joined: Mon Nov 01, 2010 12:11 am
Contact:

Re: How to make content 2-columns?

Post by grashoper » Mon Jan 21, 2013 9:14 pm



Locked

Return to “Templates & CSS - 1.0.x”