description
This recyclable snippet allows you to automatically convert a textfield in your custom-layout.tpl.php files to newspaper style columns.
This has been tested and works with Drupal 4.5.x, Drupal 4.6.x and Drupal 4.7.
usage
The code (called the drupalicious_convert2columns
function) sits in your template.php file so you can call it from various tpl.php layout files, such as node.tpl.php, node-image.tpl.php, flexinode.tpl.php etc. using just one simple line of code.
The drupalicious_convert2columns
function uses a simple table to convert your text field to columns. (A DIV version of the same will follow.)
Step 1 of 2
In a text editor like notepad.exe, create a file called template.php using the following snippet. If you already have a template.php file, simply add it to your existing one.
<?php
function drupalicious_convert2columns ($colcontent, $columns, $column_spacing) {
$coloutput = "<table border=\"0\" cellpadding=\"$column_spacing\"><tr>";
$bodytext = array("$colcontent");
$text = implode(",", $bodytext); //prepare bodytext
$length = strlen($text); //determine the length of the text
$length = ceil($length/$columns); //divide length by number of columns
$words = explode(" ",$text); // prepare text for word count and split the body into columns
$c = count($words);
$l = 0;
for($i=1;$i<=$columns;$i++) {
$new_string = "";
$coloutput .= "<td style=\"text-align:justify\" valign=\"top\">";
for($g=$l;$g<=$c;$g++) {
if(strlen($new_string) <= $length || $i == $columns)
$new_string.=$words[$g]." ";
else {
$l = $g;
break;
}
}
$coloutput .= $new_string;
$coloutput .= "</td>";
}
$coloutput .= "</tr></table>";
return $coloutput;
}
?>
Upload your new or edited template.php file to your active theme folder.
Step 2 of 2
Insert the following snippet in your custom-layout.tpl.php file.
<?php
$columns = 3;
$column_spacing = 8;
print drupalicious_convert2columns($textfieldname, $columns, $column_spacing);
?>
$textfieldname = the name of the field you want trimmed.
$columns = the number of columns, increase or decrease to suit.
$column_spacing = the "gutters" or column spacing in pixels, increase or decrease to suit.
notes
- Because the
drupalicious_convert2columns
function is sitting in your template.php file, this snippet is recyclable so you can use the short step 2 of 2 snippet above as many times as you like.
Comments
i think there is a typo
In this line:
$coloutput .= "<td style=\"text-align:justify\" valign=\"top\">"';
I think there is an extra apostrophe near the end -- it should be:
$coloutput .= "<td style=\"text-align:justify\" valign=\"top\">";
With the original version, I got a parse error.
Nice, but take a look at this.
This isnt bad, but it didnt fit what I needed. I needed a non-tables newspaper column layout that had columns that were uneven heights and also accounted for br's and p's. This might help others that ran into the same problem I had. The following uses CSS for the columns to its very easy to style and place the columns anywhere on the page. You can add/remove columns simply by cut/pasting the column code to have as many columns as you need and modifying the calculations a little bit. It's not the prettiest looking thing on the planet but it works. If someone can come up with a better version of what I'm showing here, then by all means post away!
Works but..
Hey,
This seems to work pretty good but I have a few questions. Why would you print 'n' at the beginning of a line where you don't want '\n' to be displayed? This might be moot if the forum is just stripping out the backslash.
Should it read more like this?
Also, I think this needs to be tweaked so that if the first character in the column is a paragraph or line break it is stripped. This way the first line does not contain a space which is what is happening in my versions of Firefox and IE. Only problem is you'd have to deal with the closing tag. A good solution might be to modify the CSS class for p or br if it is the first paragraph.
I'm not using this in drupal just another php project.
Adjust P style
This seems to fix the p issue by adding to the top of the page.
You probably don't want to modify the rest of the content on the page so maybe contain the 3 column code inside a div that you could reference in the css:
You could probably try different variations of padding and margin spacing depending on your page layout. I'm not totally familiar with drupal but some wysywg editors might add
marks so you'd probably want to control this better.
DIV version
Hey, I modifed the original code to create a DIV version. I hope someone finds this useful...
Drupal 6 ?
Do you have ported your code to Drupal 6 ?
Sidecontent helps with this too
Hi,
I know it's a bit different, but I thought I'd mention that there's a great module called sidecontent:
http://drupal.org/project/sidecontent
That lets you easily modify the left or right column from the page you're editing. It basically creates an extra Title and Body field on each page that is included in the left or right column, this gives you great control over a 2 column layout.
If you're looking for something simple that doesn't require coding, I'd recommend this.
www.1websitedesigner.com
D7 Custom Formatters version
Hi all,
I put together a quick D7 Custom Formatters version of this:
Simply change the
$columns
code variable as needed. When CF eventually gets support for Formatter Settings I'll add it as a setting.Cheers,
Deciphered.
CSS3 Browser Compatibility
Why aren't we using CSS3 for this?
http://www.w3schools.com/css3/css3_multiple_columns.asp
http://www.koodoz.com.au/klog/web-design-html-xhtml-css-cascading-style-...
language-javascript-flash-php/newspaper-style-columns-with-and-without-css3/
It just seems a simpler solution. I'd like to hear your reasons for not using CSS....
_
Your welcome to use CSS3 for this, I chose not to because I like my design to actually work (http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_S...)
Multi-value long text field displayed with Grid Field Formatter
Hi guys,
Just wanted to follow-up quickly on this post.
I thought another solution could potentially be using the Grid Field Formatter module, which
With a multi-value long text/textarea field, each value could potentially be configured to display in a table cell, based on the number of columns. So the amount of text entered in each value would have to be manually balanced, but it would still provide a very quick and simple solution to get text formatted in a table layout.
For more information on the use cases, see project's page, the paragraph called Integration.
I have read through other solutions suggested in this post and a lot of them are very different, which is great, since it provides more potential solutions for different use cases.
I thought Grid Field Formatter module could also come as a very handy solution in some cases and assumed it would be worth adding this method to this list of comments.
Feel free to let us know if I missed anything, this doesn't work, or if you would have any more questions, comments or issues related with this requirement or module, I would be glad to provide more information or explain in more details.
Any more feedback, reporting, testing, comments or questions would be highly appreciated.
Thanks to all in advance!
Cheers!