By Dublin Drupaller on
Hi Laura,
(I'm posting this for someone else who asked for it in another discussion..)
I'm a good bit away from finishing it..and will have to move on to something else now..so here it is as if you want to play around with it:
Notes: I was using this in a flexiMAX.module test page where $bodytext = theflexiMAX field for the main body text.....but have modified it so it works with some dummy text and without flexiMAX...easier for you to play around with.
hope that makes sense and is of use. The same principle could be applied to a lengthy blog or other..
/**
* This php snippet splits $body into multiple columns.
* to specify how many columns you want change the
* $columns value.
*
*
* Dublin Drupaller
* please email me any nifty updates.
* http://drupal.org/user/8625/contact
*
* */
print "<table border=\"0\" cellpadding=\"8\"><tr>"; // start the table adjust cellpadding to suit
// Dummy text to play around with the Snippet
$bodytext = array("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
Labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
");
$text = implode(",", $bodytext); //prepare bodytext
$columns = 3; // number of columns
$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 = "";
echo "<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;
}
}
print $new_string;
print "</td>";
}
print "</tr></table>"; // complete the table
I tested the snippet before posting it..works fine..
Dub
Comments
Great
Any reason why this wouldn't work on node.tpl.php?
Laura
===
pingVision • rare pattern • scattered sunshine
_____ ____ ___ __ _ _
Laura Scott :: design » blog » tweet
Not sure Laura...
A quick guess would be that you need to extract the main $body from the $content.. i.e. in the node.tpl.php file..here is a $content variable..without searching on here, I don't know off the top of my head how to get at the $body of the $content..if you know what I mean.
I think $content is an array which contains other bits apart from the $body.
I was playing around with a flexiMAX(flexinode).tpl.php file...so it was very simple for me to point to a specific field and say "columnise that text"..
Dub
Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate
quick follow up....
Laura...
Just tested it with a test node-blog.tpl.php file and it works fine, here's an example on my test site. I was using and playing around with flexiMAX(flexinode).module..maybe this is easier for you to work from (Assuming you're using a phptemplate based theme):
node-blog.tpl.phpNote: I haven't tested it fully with images and complex html $bodytext. An image within a column does tend to knock the columns off balance a bit at the moment.
Hope that's of use..
Dub
Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate
You got to it before I did
Thanks for testing and posting. I might just try this out on a blog site.
Laura
===
pingVision • rare pattern • scattered sunshine
_____ ____ ___ __ _ _
Laura Scott :: design » blog » tweet
It works nicely
Based on Dub's snippet, I used a node-blog.tpl.php with a 2 column body. It works like a champ, all blog posts automatically receive the desired formatting.
-jv
nice one..
Here's an updated version of that snippet
The difference is that the teasers are *NOT* columnised...only when the blog node is in full view does it columnise the main body text...
here is is:
Dub
Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate
Column width
Dub,
Only thing I noticed is that if you have long paragraphs in the node body and choose a a "2 column display", it widens the column that contains the long paragraph. I have not tested it with more than 2 columns but in this setup, he columns are no longer of equal width.
-jv
td width=50%
I wonder if making the table column widths equal to 50% will do the trick for you for a 2 col page.
Alternatively it might be better to do it using DIVs instead of tables..
I don't have time to play with it at the mo..so please post back up here if you work out what's knocking the column width off. I notice when an image is in the columns it also knocks it off balance..so it still needs a bit of work.
It seems to work well with just plain text though.
Dub
Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate
404 error on demo link
Nancy W.
Drupal Cookbook (for New Drupallers)
Adding Hidden Design or How To notes in your database
NancyDru
FlexiMAX?
Is this for 4.6? Could you please post more background information on this? Thanks.
some background..
Hi Liza,
Some background info:
Preamble
I hate scrolling.
I think it is more distracting than turning a page and I wanted to investigate a better way of displaying long passages of text on a screen...
The most eye-friendly layout that most are familiar with is newspapers and magazines, which have used the trick of splitting article text into columns, making the page prettier to look at and ultimately making it easier to read.
If you click through to my Test bed example where I'm playing around with it...it should make more visual sense than just a snippet.
As you can see it's working quite well and I think for blogs and most nodes, a 2-column bodytext is acceptable..once you go to 3 or 4 columns in a non-newspaper/magazine context, I think it loses it's value and actually looks very scrunched up.
The next stage is to paginate very long articles. i.e. instead of scrolling, which I think is distracting, the user simply clicks on [PREVIOUS] - [ NEXT] where the full page isn't loaded again, but, the body text jumps to the next bit...not unlike how Sumah Shah has done with how his codex thing works.
he uses Javascript...I'm not planning to. With the next version of Drupal 4.7 there is some ajax features included and if I can't use those, I will just use a simple DIV which is paginated using very basic and simple principles. The key is to avoid a full page reload to move to the next page, without having to use javascript..
Usage
Instead of creating a new module, I was planning on unleashing it as a simple snippet that could be used in a flexinode.tpl.php file or a blog.tpl.php file.
I mentioned the snippet in another post and Laura nudged me to share it...so I pasted it above as a standard PHP page snippet so others could play around with it.
To play around with using a normal Drupal Page (PHP Input filter):
To insert it into a flexinode-n.tpl.php file...change the lines that define the $bodytext, i.e.
To this:
Hope that makes sense..it will work with Drupal 4.6 and pretty much any recent version of Drupal...
Dub
Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate
Dub,
Dub,
This is great, very useful and I couldn't agree more with your assessment that columns are way prefered over long pieces of text that require vertical scrolling.
Two things here:
- I see you use the regular, non-column display for your teaser. Maybe a silly question but how did you get the teaser to look normal while the body has columns? I assumed that, since the teaser is typically the first 200,400 or 600 characters of that same body, you'd need the excerpt module to differentiate the look of the two?
- The ability to paginate is critical. If you have long articles, columns will help but in this setup you would just create a number of even yet potentially still very long columns. Any thoughts as to how to indicate (I assume based on a desired "column lenght") that pagination (prev, next etc) is required?
Thanks for the good work. These snippets are extremely useful.
-jv
normal teasers with columnised main body..
Hi Visserj
A simple IF statement in the node-blog.tpl.php file does the trick.
Here's the full ammended node-blog.tpl.php that automatically creates a normal teaser (no columns) and a multicolumn main body.
http://drupal.org/node/38235#comment-70376
The plan with Pagination is to try and achieve something like what Sumah Shah has donewith his codex thing.
he uses javascript..which is fine..but I'd prefer not to have to use such heavy JS and keep it very simple - to avoid issues and that delay that you get when you first look at a page on his site. That's very disconcerting. Some light JS might be needed..but nothing as serious as what he uses.
There are a number of options..and one of those is to split the page into seperate hidden DIV elements and simply jump to anchors within the DIV. Or Using an ajax widget..or using a light piece of javascript similar to that used by tabbed navigations.
If you have any simple ideas on that front..please post up here or email me.
Dub
Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate
Hi Dub,
Hi Dub,
Thanks for supplying us the code. I know Sumah's solution with JS. It works fine on both IE and FF but the delay it has to print the text (with IE) is indeed very worrying...
Can't we think of a workaround to hide the DIV tag first and then show it a few secs later?
But I agree, it would be better to use a light piece of JS that is also used with tabbed navigations.
Are you going to keep working on your code? I hope so!
I really want to use the code in a new website I am going to launch soon :)
RK
a few options..
I'm working on something else at the moment, but, yeah, I plan to revisit the pagination thing.
Someone has unleashed a paging.module which looks good..the only drawback is you have to insert the page breaks manually..i.e.
I'm going to jump back to the DIV pagination thing..and one idea I had bubbling..was to split the text by character count..i.e.
#page [n]anchor tag where n=page numberDoing it that way, it will "jump" to the next page (anchor), but, it is actually already loaded..so there's no need for a page refresh.
I hope that makes sense..Drupal 4.7 will have some ajax and javascript stuff built in...so there maybe other approaches in implementing an automated pagination thing. The paging.module is great by the way if you're looking for a right here right now solution.
Dub
Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate
Hi Dub,
Hi Dub,
Are you aware of the dashboard module that makes two, three and even four column layouts possible?
http://drupal.org/node/35094
Just wanted to flag it for your attention, in case you had missed it.
thanks Ramdak..
HI Ramdak.
yeah, I saw the dashboard.module...it's a great module but it's not the same thing.
The snippet above columnises a piece of content...the dashboard.module puts content blocks into columns. There's a big difference.
If you look at the new example on my test bed site...i.e. a variation of your Dashboard.module example...Fettucine in Tomato Cream Sauce it should be self explanatory how it's different..
Dub
p.s. thanks for the email!
Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate
Nice
Nice work, though I expect this approach would run into trouble with content containing tables, lists, and other markup.
Perhaps there's a good HTML tokenizer in PHP that could be adapted to this? Or a DOM based solution? By the way, this is the same issue that the teaser-generation runs into.
--
puregin
additional festures
Hi Dub,
I used your code.... Thanks for that!
But my array also contains
<br />tags. How can I deal with those? They are seen by the code as normal text.Besides that, on my website I would like to have 2 columns of text, with the first column longer than the second.
The code splits the text in half, as in 50/50.... how can I get something like this:
[ header ]
text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text
text text text text text
text text text text text [ link ]
text text text text text [ link ]
text text text text text
This is a version that I use
This is a version that I use that uses CSS Div's instead of Tables. Its a little more versitile than the above snippet as well. Improvements are always welcome. It takes into account 2 br combinations as well as deals with p tags
Works, but..
Hello LanceLight,
your code works beautifully for me but could you explain a bit on the $br_weight value. I have been tweeaking it for my setup but no matter what value I choose the last par of the content (how much will depent on the length of the text) will not be displayed.
As I understand the br_weight corrects a certain amount of characters, but how is this done while each line consumes a diggerent amount of characters, depending on the font-type (non monospace) usewd?
regards,
Does this work in Drupal 5?
Does this work in Drupal 5?
Ditto.
Drupal 5 compat?
another way
Just wanted to share the code im using to split the $body text into different parts depending on the paragraph after which you want to split the text.
$TextAfterParagraphSplit and $TextBeforeParagraphSplit contains the number of paragraphs after and before the split. This can be used inside the node-type.tpl.php file to place it anywhere on the page. In addition you can also place a ImageWidget at any location on the page by just specifying the paragaph after which you want to place the ImageWidget
one <p>
Hello Janwari,
can you confirm this will only work if you have a body consisting of more paragraphs?
If there is one large text in only one paragraph the text will not be split (within the paragraphs). Is this correct?
Regards
will work only if $body has multiple paragraphs
As you can see in the first line, we are splitting the whole $body text by using the < p > tags as delimiters. Therefore if your $body contains only one paragraph, executing preg_spilt is unnecessary.
If you want to split $body which is a single paragraphs then you could use substr instead.
equalising columns?
Just a couple Q's (i am not that well versed in theme functions)
This function will divide columns with the same number of paragraphs?
To use this, i would replace $content with two separate divs in the node-type.tpl.php containing $TextAfterParagraphSplit and $TextBeforeParagraphSplit and theme via css to achieve the two columns?
Does this work with D6 or only D5?
thx
avolve designs | ethical by design
bump/D6?
bumping this to see if anyone has tested this for D6??
avolve designs | ethical by design
Is this possible in D6?
Wondering if anyone did such customizations on D6, I plan to use blog content type as regular columns on a magazine website.