Probably not entirely groundbreaking, but a nice way to achieve nice layouts using Drupal + WYSIWYG occured to me about 3 projects ago when I was trying to figure out a way of haveing multiple columns in a page’s body field. Sure, you can do the same thing by using CCK and define a couple of add-on fields and assign each to a column and code the necessary logic into the template for generating the layout.
This is possible without a single line of code (except for CSS), using only already existing modules. I’m not going into the details here, just want to give a general overview. If you refine the process or have a suggestion, I’d be happy to hear from you in the comments.
Drupal: 6.x current
Additional Modules: WYSIWYG with TinyMCE, WYSIWYG Templates, FlexiFilter
- Download and install the modules if you haven’t already.
- Config WYSIWYG to use Templates and make to use the following settings in the “Cleanup and Output”-section of the desired profile: “Check HTML: ON”, “Preformatted: OFF”, “Convert <font> tags to styles: ON”, “Remove Linebreaks: OFF”, “Format Source: ON”, “Force cleanup on standard paste: ON”
- Config the Templates module: follow the modules instruction.
- Create a template file to start with: let’s say we want to achieve a 2 column layout. The source of mine looks like this:
<p>2 Columns</p>
<table class=”layouttable” width=”100%” border=”0″ cellspacing=”10″ cellpadding=”0″>
<tbody>
<tr>
<td class=”layoutcolumn” width=”50%”><p>This is the first column.</p></td>
<td class=”layoutcolumn” width=”50%”><p>This is the second column.</p></td>
</tr>
</tbody>
<!– layouttable –>
</table>
<p> </p>
- Check if you can select and include the HTML data into your editor by using the Template Selection button. If not, empty your browser cache and try again. The JS of the template inclusion file has a tendency of not refreshing.
- Enter some text (or images) into both columns and save the page. Now we want to get rid of the table we used for layouting and convert it into a nice layer based layout on output. I used a table because layers have a tendency of being deleted when you hit backspace one time too much.. Doesn’t happen with a table. :)
- Go to the Flexifilter module and create a new filter.
- I guess you know what comes next: Create a series of filter which converts the table tags to div tags accordingly. You can create regex-matches or just simple search for a block of text and exchange it properly: <div class=”layoutcol1″>, </div><div class=”layoutcol2″>, </div>.
- Create both classes for your tinymce layouttable and the cleaned div layout in your stylesheet.
- Finetuning!
A note from the typographical point of view: IF you use 2 text columns side by side, make sure the line-heights match eachother properly. To achieve this, it’s useful to use multiples of the standard lineheight of your text for margins following or preceeding titles or paragraphs. Grids are your friends.