I want to give editors the ability to take advantage of a grid system we have on our site. I can easily jump into a node and add this to the Body

<div class="grid-12 alpha omega">one column</div>
<div class="grid-6 alpha">content on the left</div>
<div class="grid-6 omega">content on the right</div>
<div class="grid-12 alpha omega">one column</div>

Editors aren't savvy enough with HTML and CSS to do this themselves, and that's fine, that's what wysiwyg editors are for, and why we use Drupal in the first place (mainly).

But, this is a system of layout that can be applied consistently on any node. I'd think it would be easy enough to allow editors to take advantage of it. I'd love to let them create as many rows with as many columns as they want on any node without having to code it up themselves.

I know I can create template files that will apply structured HTML to all nodes of a given type, or one node, or some subset of nodes. However, I don't want to make that choice for editors. And besides, you can't split up the body content of a node into rows and columns like that from a tpl.php file.

I've looked into Panels too, but from what I can tell that's just a GUI means of creating tpl.php files. Same problem.

This is very similar to the unanswered question Select Panel Node Layout on Node edit form. I'm using 7.

4 Answers 4


My advice would be to use Field Collection.

  1. Add a "collection field" and set it as "multiple values". Each value will be a row.
  2. In that collection field, set one text field and one option field (like select list : text)
  3. For that option field, the options will be the regions where the text will be displayed.
  4. Create a Panel for the node, and in each region, place a view that displays the text, filtered by the option field that goes with that region.

EDIT: I just saw that you also wanted "as many columns as they want"... Then you'll have to play with your option field and set it to a numeric value, that you'll use in css or something like that. It will be quite more complicated, but feasible !

  • I really like this solution. What's great is it gives me the flexibility to let editors create as many or as few chunks of structured content. The content could be a simple text area, or it might be a text area followed by a select list followed by a link. And I can create a tpl.php to govern the styling of that repeating region (and the rest of the page). If I want to, I can get really creative and add optional text areas to be displayed above and below the region. In general I think this option gives me the most flexibility with the least amount of custom tpls and custom content types.
    – cdmo
    Commented Jan 29, 2013 at 14:46

You're asking a chicken and egg problem. Nodes just hold data and no information about the theme (usually). You're describing mixing the two in the Body field of a node, in essence hard-coding the look (layout) of your "node" in the database.

Drupal in many respects fights this as the page content is 1 item and drupal7 cares nothing about whats around it. In D8 their is a UX initiative to make a nicer page layout creation system.

In D7 you may be interested in context_layouts found in Context. See this youtube video on its usage.

I've done something similar (but not Grid aware) using Spaces, spaces_node and Dashboard (spaces dashboard) in Drupal6 per node (I also used node_block heavily). Every node/page could have their own unique layout using Spaces and its submodule of Dashboard; you can set any content to any block/region of the page as needed using a drag-and-drop overlay. Actually, the site I'm mentioning is UCSB SageCenter. Unless your logged in and editing a Space/Dashboard you dont really see anything in the source. I added a node field to pre-assign a known space for node pages on node creation. This site was hard.

Here's a video demo on spaces_node -- its not supported anymore really.

  • I like the Context solution, and I find it similar to Panels. It's great if you just want to take single chunks of content and place them in the same place on every template that governs that content, but that's not really flexible enough for me, I think.
    – cdmo
    Commented Jan 29, 2013 at 14:43

I'd possibly use something like Context Entity Field in conjunction with Delta and Omega (which it looks like you're using). You could create a couple of delta templates for a user to choose from, and then put a Context entity field onto your nodes.

Then you set up a couple of Contexts to react based on the value of the Context entity field.

For example:

Contributor one adds some content, and wants to use a delta template you've called "Awesome 6 column layout". They set the value of their Context entity field to "Awesome 6 column layout". When they view their content, Context changes the delta template being used!


I think you should give Panels another shot. If you use the Clean Markup module, you can change the markup and classes of Panel panes and regions. allowing you to put grid classes on them.

If you also use Panelizer, you can change the Panels layout and markup on a per node basis.

  • By the way, I really recommend against putting layout markup inside content. It makes responsive design harder to implement and it will give you major headaches when you need to migrate the content later.
    – dcmouyard
    Commented Sep 6, 2013 at 2:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.