The Joomla! Forum ™



Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.



Post new topic Reply to topic  [ 27 posts ] 
Author Message
PostPosted: Thu Feb 14, 2008 7:31 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Feb 14, 2008 7:19 pm
Posts: 17
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.


Top
 Profile  
 
PostPosted: Thu Feb 14, 2008 8:29 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Jan 01, 2008 8:44 pm
Posts: 21
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!!!!!
viewtopic.php?f=431&t=375075

Hope this helps!


Top
 Profile  
 
PostPosted: Fri Feb 15, 2008 6:56 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Feb 14, 2008 7:19 pm
Posts: 17
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.


Top
 Profile  
 
PostPosted: Thu Jun 03, 2010 9:15 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Jun 03, 2010 9:09 am
Posts: 6
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


Top
 Profile  
 
PostPosted: Thu Jun 03, 2010 9:54 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Jun 03, 2010 9:09 am
Posts: 6
Ok, got something working now:

1) create file "plugins/content/columns.php", containing:
Code:
<?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:
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..


Top
 Profile  
 
PostPosted: Thu Jun 03, 2010 10:56 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Jun 03, 2010 9:09 am
Posts: 6
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:
<?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:
  // 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:
INSERT INTO jos_plugins (name, element, folder, published)
VALUES ('Content - Columns', 'columns', 'content', 1);


I hope you like it like this..

cheers, johan


Top
 Profile  
 
PostPosted: Sat Jun 12, 2010 5:20 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu May 13, 2010 7:05 pm
Posts: 9
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


Top
 Profile  
 
PostPosted: Sun Jun 13, 2010 7:18 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Jun 03, 2010 9:09 am
Posts: 6
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:
<?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


Top
 Profile  
 
PostPosted: Sun Jun 13, 2010 10:04 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu May 13, 2010 7:05 pm
Posts: 9
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.


Top
 Profile  
 
PostPosted: Sun Jun 13, 2010 3:06 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Jun 03, 2010 9:09 am
Posts: 6
Hi abatu,

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

Code:
<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:
Attachment:
Screenshot.png


cheers! johan


You do not have the required permissions to view the files attached to this post.


Top
 Profile  
 
PostPosted: Sun Jun 13, 2010 5:39 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu May 13, 2010 7:05 pm
Posts: 9
Hello mp_johan
U R just Great!!!!!! :D
Thank you so much.... exactly what i need.


Top
 Profile  
 
PostPosted: Sun Jun 13, 2010 7:16 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu May 13, 2010 7:05 pm
Posts: 9
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.


Top
 Profile  
 
PostPosted: Sun Jun 13, 2010 7:33 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Jun 03, 2010 9:09 am
Posts: 6
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:
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


Top
 Profile  
 
PostPosted: Sun Jun 13, 2010 7:40 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu May 13, 2010 7:05 pm
Posts: 9
Sorry for this stupid question, But where is the css file?,i have some experience in css.


Top
 Profile  
 
PostPosted: Sun Jun 13, 2010 8:27 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu May 13, 2010 7:05 pm
Posts: 9
:D Thanx i did it.
Thank you again.very nice plugin.


Top
 Profile  
 
PostPosted: Sat Aug 07, 2010 9:43 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri May 12, 2006 9:07 am
Posts: 32
Location: Moorea - Tahiti
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


Top
 Profile  
 
PostPosted: Mon Nov 29, 2010 12:03 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Nov 28, 2010 10:41 pm
Posts: 12
Location: California, USA
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


Top
 Profile  
 
PostPosted: Fri Mar 25, 2011 3:54 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Fri Mar 25, 2011 2:51 pm
Posts: 1
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 :-[


Top
 Profile  
 
PostPosted: Thu Apr 07, 2011 3:28 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Thu Apr 07, 2011 3:24 pm
Posts: 1
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!!!


Top
 Profile  
 
PostPosted: Thu Aug 18, 2011 10:52 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Thu Aug 18, 2011 10:37 am
Posts: 1
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 :)


Top
 Profile  
 
PostPosted: Sun Oct 23, 2011 3:46 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sun Oct 23, 2011 3:17 am
Posts: 2
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


Top
 Profile  
 
PostPosted: Mon Oct 24, 2011 11:18 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sun Oct 23, 2011 5:42 pm
Posts: 2
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.


Top
 Profile  
 
PostPosted: Mon Nov 28, 2011 9:42 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 03, 2009 8:22 pm
Posts: 33
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


Top
 Profile  
 
PostPosted: Tue Nov 29, 2011 1:18 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sun Oct 23, 2011 3:17 am
Posts: 2
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.


Top
 Profile  
 
PostPosted: Wed Feb 29, 2012 3:58 pm 
Joomla! Intern
Joomla! Intern

Joined: Thu Jan 19, 2012 8:24 pm
Posts: 72
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 ;)


Top
 Profile  
 
PostPosted: Wed Feb 29, 2012 7:27 pm 
Joomla! Intern
Joomla! Intern

Joined: Thu Jan 19, 2012 8:24 pm
Posts: 72
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 :(


Top
 Profile  
 
PostPosted: Mon Jan 21, 2013 9:14 pm 
Joomla! Intern
Joomla! Intern

Joined: Mon Nov 01, 2010 12:11 am
Posts: 55
my solution:
http://extensions.joomla.org/extensions ... 5pemVyIjt9

_________________
http://www.pc-design.si


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 27 posts ] 



Who is online

Users browsing this forum: No registered users and 6 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group