Tableless column breaks

Mar 15, 2013

A new feature in v1.2, this pseudo-filter gives editors the ability to split their text into columns of varying number, and change from split column to full width and back again, all in the standard page body field and without having to resort to the nightmare that is wysiwyg tables.

To use it you just enable the option under Config and make sure you have the basic Bootstrap CSS layout options enabled, as it uses fluid-row spans to do it's thing.

The simplest use case where the entire content block is to be split into columns: insert [[columnbreak]] into the text (on it's own line) at the point where one column should end and the next should start.

Use it once to split into two, twice makes three columns and so on.

A more complex usage is where the page perhaps starts out full width, then has a multi-column section, and then goes back to full width.

In this case, insert [[columns]] at the point where the multi-column area should begin, insert [[columnbreak]] as necessary to create the splits, and close the last column with [[endcolumns]] .

 And.. because it's using the Bootstrap grid system, the columns are also fully responsive (I wouldn't go above 3 columns myself though as the tablet-screen column width starts getting a bit narrow for most content cases) and will revert to a full-width stacked layout for phone browsers.

I should add, it's not an actual Jojo filter but if you have other plugin content you want to give this flexibility, you can enable it but passing the content block through Jojo_Plugin_Core::pagebreak($content)

The function assumes that if [[columns]] and/or [[endcolumns]] are absent (but [[columnbreak]] is present, it should put them at the beginning and end of the whole block.


Your Comments

post a comment