layout content in columns

Question

I'm trying to figure out someway to allow end-users to format page content into columns. Right now if they edit a page they get a title field and a body field which is fine a lot of the time but what if they want to do something like this...

-------------------------------------------------------------------------
| TITLE                                                                 |
|                                                                       |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam      |
| pharetra lorem mollis dui egestas convallis. Nam vitae sapien urna.   |
| Nam quis tellus ligula, non gravida metus.                            |
|                                                                       |
|              HEADER                             HEADER                |
|                                                                       |
|      ----------------------             ----------------------        |
|      |                    |             |                    |        |
|      |                    |             |                    |        |
|      |       image        |             |       image        |        |
|      |                    |             |                    |        |
|      |                    |             |                    |        |
|      ----------------------             ----------------------        |
|                                                                       |
|    Lorem ipsum dolor sit amet,       Aliquam pharetra lorem mollis    |
|    consectetur adipiscing elit.      dui egestas convallis.           |
|                                                                       |
|                                                                       |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam      |
| pharetra lorem mollis dui egestas convallis. Nam vitae sapien urna.   |
| Nam quis tellus ligula, non gravida metus.                            |
|                                                                       |
-------------------------------------------------------------------------

A title followed by a full width paragraph 
then two 50% width columns with headers, images, and text
and a full width footer paragraph

This is just an example of what they might want to do. I'm using the WYSIWYG module's ckeditor to edit the page contents. The only way I can think of doing this is either allowing them to inline css in style attributes or using something like panels.

using inline styles and predefined classes might work but it would require the end user to know css. Panels looked good as I could create the layout the way I liked and add custom content (or otherwise customize the page) but I couldn't figure out how to translate the panels page into another language like I can with nodes.

This must be a common situation but I haven't found the solution yet. Anyone have any suggestions?

Answer 1

In a recent project I needed content editors to insert a special div wherever they needed that would float right and have custom styling.

The best solution I came up with was a custom ckeditor plugin. Basically editors just click on the appropriate icon and the necessary html is inserted into the editor. All they have to do is add the content.

Example:

• Create a folder inside ckeditors plugin dir and name it "doublecolumn".
• Create a plugin.js file inside that dir.
• Add an icon to use for the button inside that dir i.e. "myimage.png.

Then, add the following code in plugin.js:

(function ($) {
CKEDITOR.plugins.add( 'doublecolumn',
{
    init: function( editor )
    {
        editor.addCommand( 'insertDoubleColumn',
            {
                exec : function( editor )
                {
                    editor.insertHtml('<div style="half-width"></div><div style="half-width"></div><div class="clearfix"></div>');
                }
            });
        editor.ui.addButton( 'doublecolumn',
        {
            label: 'Double Columns',
            command: 'insertDoubleColumn',
            icon: this.path + 'myimage.png'
        } );
    }
} );
})(jQuery);

I haven't actually tested this but it's similar to what I had used and it should work.

You could also expand the html for each column to something like:

<div class="half-width">
  <h3>Add Title</h3>
  <p class="image">add image</p>
  <p class="text">add text</p>
</div>

In your case it might be better to put the two columns inside a wrapper div - just to be safe.

Don't forget to enable the plugin and add it to your toolbar from admin/config/content/ckeditor.

Hope this helps.