2016 Apr 07

It is sometimes handy to have the ability to add columns to your websites content. Grid layouts using front-end frameworks have been popular for some time now. Using columns on larger displays such as that on desktops and tablets help make better use of screen space. On mobile devices and smaller screen sizes the expectation for those columns is to usually stack them on top of each other.

Normally these layouts are built as part of a featured area on a homepage or as a featured content listing page. It's now becoming more common to see this power handed over to the content creator in the form of editor tooling. Wordpress has many plugins to solve this issue, some of which include:

For a recent Wordpress project we had chosen WP Easy Columns. It provided us shortcodes to use within the editor to wrap our content so that it would render columns on the front end.

This prompted us to look for a similar solution in the Drupal world. Some brief research turned up something called "templates" in ckeditor. It looked promising and so some testing ensued.

It turned out that this could provide a good solution to the problem. Really though it's a way to provide pre-thought out HTML for a content editor to drop in. It could be wrapper markup for columns or it could just be another custom element. In our case there was a request to have sidebars within content offset to one side. 

The default install of the ckeditor module in Drupal 7 pulls in the full version of ckeditor library. It includes the templates plugin ready to go. Below are steps we've taken to set this up on a fresh install of Drupal 7.

Setting things up 

First, head over to the configuration page for the Full HTML text format. Typically we use this as our default text format when setting sites up and we'll use it here for demo purposes.

admin/config/content/ckeditor/edit/Full

Under "editor appearance", drag the templates button into the editor toolbar to make it active. It looks like the screenshot below.

Button to launch templates in ckeditor

Now, under "CSS", set a custom path to a CSS file you'll use in the editor. This is important to have so we can add CSS to correspond to the HTML being inserted as part of the templates.

Under CSS, set "define css" to the following

%tcss/ckeditor.css

In the case of this test site, which uses the bartik theme by default, this dynamic path turns into:

/themes/bartik/css/ckeditor.css

In that CSS file is the following:

.content_sidebar{
  background: #ccc;
  border:1px solid black;
  margin:10px;
  width: 30%;
  padding:10px;
}
.content_sidebar.right{
  float:right;
}
.content_sidebar.left{
  float:left;
}

The final steps involve settings under the advanced options section within the Custom JavaScript configuration textarea. 

config.templates_files = [ '/themes/bartik/ckeditor_templates.js' ];
config.templates_replaceContent = false;
config.allowedContent = true;

The first is setting a path to the javascript file holding the template code. The second option will uncheck an option in the template popup which asks you to replace the content in the editor (something we don't want to do). The last option disables filtering done by ckeditor. We want this to stop CSS classes from being removed upon saving.

Now that we have set the requisite options to get templates working, we need to populate the javascript file with our template code. Below is the example we're using that'll provide two options.

CKEDITOR.addTemplates('default', {
// The name of the subfolder that contains the preview images of the templates.
imagesPath : '/themes/bartik/images/',
// Template definitions.
    templates :
        [
            {
                title: 'Sidebar Left',
                image: 'sidebar-left.png',
                description: 'Description of Left Sidebar',
                html: '<div class="content_sidebar left"></div>'
            },
            {
                title: 'Sidebar Right',
                image: 'sidebar-right.png',
                description: 'Description of Right Sidebar',
                html: '<div class="content_sidebar right"></div>'
            },
        ]
});

See it in action

Here's a screenshot showing the popup that appears when clicking on the templates button in the editor. Note the checkbox for "Replace actual contents" is unchecked based on our settings above. There's a setting called "imagesPath" as well which will assign a directory to house images that are set in each templates code block. They appear broken as there aren't any there to load in our project. But you could provide a representation if needed or simply comment out the "imagesPath" option to disable images.

Template popup within ckeditor

Here is a shot of the content containing the markup that was inserted by using the first "sidebar left" option. It started out giving us an empty div to start typing into with styles being applied based on the .content_sidebar.left CSS classes.

sidebar template within ckeditor

Another example using this idea is to make columns within the content. Bootstrap or another framework with a grid system can be leveraged to setup a container holding structured columns. Using boostrap you could add this to the list of template options to get a 3 columns layout:

{
    title: '3 cols',
    description: 'Makes a container containing 3 columns',
    html: '<div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div></div>'
},

To go along with this markup, the bootstrap stylesheet has been brought into the CSS file we setup earlier using the import method so we can see the styles within the editor:

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");

Now when we use the column option that we added, we get this (some content has been added to better demonstrate the columns):

Showing columns in the editor using templates

Conclusion

Having more options available to empower content creators can help make for a better experience. It can be a double edged sword though. It's important to consider how tools can sometimes cause more workflow challenges than they're worth. Usually it's best practice to maintain a consistent workflow and appearance that adheres to accessibility standards as a general rule. The templates solution we've just covered is a good example of providing more flexibility while still staying simple enough to use effectively.