[archived] jcb_columnize_body

steventer · 2005-06-03 09:52:34

There is a wonderful script, written by Johgn Weir of smokinggun.com, that produces a multi-column layout, allowing horizontal, scrolling of those columns. The script is released under GPL and is extensively used on the International Herald Tribune site

I would really like to this as a plugin… this is very, very nice and excellent for multi-page articles...

jimb · 2005-06-04 00:46:04

Okay, here is my plan:

I can integrate the Smoking Gun script into a new plugin. My question is this: if I do, will anyoen still be interested in the original server-side version? By using Javascript it is possible to do a much better job of columnizing since it is then possible to get the actual height of each paragraph or other element and use this information to make much more accurate columnizing decisions.

In any event, version .3 of the jcb_columnize will be available tonight.

As a side note-I checked out the International Herald Tribune site, and when I disabled Javascript in Firefox, the article text was no longer viewable at all. Not good.

Last edited by jimb (2005-06-04 00:50:19)

marco · 2005-06-04 02:55:24

I think different people will have different preferences, so some will want a server-side, some a client-side solution.

I’ve been reading the IHT site for three years and during all this time they had the multi-column (and clippings) feature on, so it does not seem to be a problem for their readers or they would have removed it by now (if Javascript disabling was an issue).

In any case, at least the users who know how to disable JS would also know how to enable it and most people using a browser would know how to do a Google search for “enable Javascript” instructions, if the site puts up a message to that effect.

What I like about IHT is that even though they paid for the work, they allowed the author to release the code publicly. And many thanks to the author too.

steventer · 2005-06-04 08:11:31

Jim

I appreciate the work you’ve done on the plugin, but the IHT site has been one of my favourites for a long time now. It lloks good, works well, and I don’t think that many people have js disabled in their browsers. As Marco said, those who have it turned off are prob not newbies, and will know how to turn it on.

So: I, for one, would really appreciate the javascript version of the plugin… :)

Steve

jimb · 2005-06-04 09:14:32

Version 0.3 of jcb_columnize is available. This included Etz’s code and a few other options.

davidm: It would be really easy to add a feature such as you suggest. Can you be a little more specific about how you would like it to operate?

I will start working on a javascript version based on the Smoking Gun code right away.

steventer · 2005-06-04 10:14:37

I will start working on a javascript version based on the Smoking Gun code right away.

That’s fantastic! Thanks!

marco · 2005-06-04 13:53:54

> jimb wrote:

> I will start working on a javascript version based on the Smoking Gun code right away.

Super! That will give TXP a unique feature that is not available in any other Blog/CMS

I think a site’s usability may also be increased by the scrolling, multi-column feature.

Of all the online newspapers I read, I like the IHT most, of course not only for its usability
and aesthetics, but primarily for the content. But the nice layout doesn’t hurt either…

davidm · 2005-06-04 17:47:52

<blockquote> jimb wrote: Version 0.3 of jcb_columnize is available. This included Etz’s code and a few other options.</blockquote>

That’s very cool I’ll install it right away !

On the server-side vs javascript thing, I’ll go with server-side, much better option IMHO

<blockquote>davidm: It would be really easy to add a feature such as you suggest. Can you be a little more specific about how you would like it to operate?</blockquote>

Well, I did not try to use etz_pg with your plugin, maybe it could be done. Nor did I try 0.3 yet…
But what I had in mind was something like : I insert a symbol (something like === or whatever), and the plugins understands it has to create a new column. Better, I specify a number of words, e.g <txp:jcb_columnize words="120" /> (or characters) that defines a limit before it starts another column. Here the plugin would start a column when the plugin reaches 120 words.

Last edited by davidm (2005-06-04 17:49:01)

jimb · 2005-06-07 02:41:11

davidm:

I think I understand now. Look for 0.4 very soon (a few days-ish)- it will have what you want.

davidm · 2005-06-07 09:31:05

Thanks jimb !

0.3 is very nice already. If you can define columns page breaks in 0.4, it’s gonna be a real dream for webzines !
This plugin is yet another reason to choose textpattern :D

sekhu · 2005-06-07 10:08:03

this seems like such an excellent plugin but i’m still trying get my head around it. Is there any chance someone could do a step by step walkthrough in using this for idiots like me? I sort of get the idea, I just can’t seem toget a practical grasp of it and how I could use it.

I’m guessing that you could use it for a complex site where you have several sections/categories of excerpts – using the plugin you would add the code to the page content, and within each column place the excerpt of a certain number of cats which would sit in those columns? Or something like that?

davidm · 2005-06-07 12:36:22

A LITTLE GLITCH TO CORRECT IN HELP

There are still a little glitch in the help of 0.3 : styles are no longer column1, column2 but columnized1, columnized2.
The css example should be changed accordingly.

BTW, thanks jimb for including my CSS example in the help file :-)

THE SAMPLE CSS : THINGS I THINK WE SHOULD INCLUDE

I just think we need to add an example for 3 columns and give a little notice for beginners to help them understand how it’s done (And here, I’ll need help to make sure those example work in other context…).

<blockquote>
Examples :

This works for two columns
.columnized1 {float: left; width: 225px; padding: 5px;}
.columnized2 {margin-left: 250px; width: 225px; padding: 5px;}

This works for three columns
sample css here

How to calculate columns
width of column = (width of parent div / number of columns) – any padding or margins defined for columns and/or parent div
</blockquote>

I’ll need help to check this formula is correct, and also create if anyone has a working css for 3 or more columns, it would be nice.

<strong>THE QUESTION OF UNIQUE CLASS : HOW DO YOU CREATE COLUMN WITH JUST ONE CLASS ?
:AFTER PSEUDO-CLASS ?</strong>

Also I have a very dumb question but it struck me : How do you make the css columns work with the plugin set to a unique class (classes=unique parameter) ? e.g how do you set the float, you can not define the unique class to float since you can’t have a floating element based on another floating element if I remember correctly ? Maybe use pseudo class :after ?

I didn’t think of this, but we have to define one more CSS example for parameter classes=unique

USE SPANS WITH SPLITONTAG TO CONTROL COLUMN SPLITS

Other than that, the splitontag option already gives some kind of control over “column breaks”, now you can use spans to indicate where you want the column to split. Did not try it but should help me, thanks Etz :-)

Last edited by davidm (2005-06-07 12:59:58)

davidm · 2005-06-07 13:06:46

<blockquote>sekkhu wrote : this seems like such an excellent plugin but i’m still trying get my head around it. Is there any chance someone could do a step by step walkthrough in using this for idiots like me? I sort of get the idea, I just can’t seem toget a practical grasp of it and how I could use it. </blockquote>

I am replying in a different post since the last was so long…
Yeah I understand you having problem with this one. It relies a both on code and some CSS tricks to work…

I’ll try to contribute to a walkthrough, when I make some time for this…

<blockquote>sekkhu wrote : I’m guessing that you could use it for a complex site where you have several sections/categories of excerpts – using the plugin you would add the code to the page content, and within each column place the excerpt of a certain number of cats which would sit in those columns? Or something like that?</blockquote>

A very interresting use of the plugin. Didn’t yet try this, as I said I did not try a working 3 or more columns CSS code.
But yeah it would be doable with the splitontag parameter you could define spans to indicate where to split the columns, and txp:output_form with one form set by columns, to have the kind of effect you suggest… :-)

Last edited by davidm (2005-06-07 13:08:21)

sekhu · 2005-06-07 14:10:26

sounds great davidm i’ll look forward to your write up:)

vagari · 2005-06-08 17:58:41

Wow I worked on doing something like this a little while ago. I found that every time I pushed it beyond the basics while trying to get uniform height columns I always broke validation. Text was easy, throwing in links and other elements, not so much. I was trying server side.

If you go Javascript client side just make sure you don’t do anything to hide the content. I never got to go over the Herald Tribune site with a fine toothed comb but I’m sure you can manipulate the text without hiding it. Basically if javascript is turned off it should just be one column, the same as if CSS wasn’t on to layout the columns.

The only thing I think I accomplished that you don’t really have yet is the split into 3+ columns. Mine could get a number passed and split it into as many columns as needed.

Great job, I’m glad someone figured out a good method for building this… I’ll let you know if I ever figure out splitting it with almost perfect heights. ;) ha, yeah right… I tip my hat to you.

Textpattern CMS

Textpattern CMS support forum

#31 2005-06-03 09:52:34

Re: [archived] jcb_columnize_body

#32 2005-06-04 00:46:04

Re: [archived] jcb_columnize_body

#33 2005-06-04 02:55:24

Re: [archived] jcb_columnize_body

#34 2005-06-04 08:11:31

Re: [archived] jcb_columnize_body

#35 2005-06-04 09:14:32

Re: [archived] jcb_columnize_body

#36 2005-06-04 10:14:37

Re: [archived] jcb_columnize_body

#37 2005-06-04 13:53:54

Re: [archived] jcb_columnize_body

#38 2005-06-04 17:47:52

Re: [archived] jcb_columnize_body

#39 2005-06-07 02:41:11

Re: [archived] jcb_columnize_body

#40 2005-06-07 09:31:05

Re: [archived] jcb_columnize_body

#41 2005-06-07 10:08:03

Re: [archived] jcb_columnize_body

#42 2005-06-07 12:36:22

Re: [archived] jcb_columnize_body

#43 2005-06-07 13:06:46

Re: [archived] jcb_columnize_body

#44 2005-06-07 14:10:26

Re: [archived] jcb_columnize_body

#45 2005-06-08 17:58:41

Re: [archived] jcb_columnize_body

Board footer