9th October 2014

Drupal Panels setup for clean markup

Dan James
Senior Developer

It’s a fact that you get a hideous amount of markup with the Panels module straight out-of-the box, even if you use it to create a single column page without changing any of the options.

This is because each layer of the rendering process brings its own markup to the party. 

Column: 
Image: 
Whiteboard photo describing the structure of a panel
Text: 

Panels and layers

Panels are structured in layers, which is what makes them so flexible for any given requirement. Within a layout sit the regions and inside these are panes.

Each of these panes are configurable by providing CTools plugins. You can render panes and regions with style plugins and the layout with a layout plugin.

Color: 
#ffffff
Text Color: 
Dark
Format: 
Image left of text
Image shape: 
Square

Each of these layers have their own wrapping markup and things can get excessive quickly. 

Help is at hand

Luckily for us, there’s quite a lot of help for Panels straight out-of the-box. Firstly, there’s a ‘naked’ style plugin which drops all the wrapping markup and can be applied to your panes and regions. While this is a good start, the layout will still need markup specific to the site’s theme.

You can override each Panels layout as it’s presented by a theme hook. It’s literally as simple as copying a template to your site. 

For most simple panels, it’s just a case of copying the panels-onecol.tpl.php file into the theme and customising it. 

If you’re using a CSS framework or grid system (we use Bootstrap at Deeson) then this file is where you can re-work the markup to be specific to the system you are using.

Column: 
Image: 
Sample screenshot for the configuration of a panels page listing recent content
Text: 

My Panels page

Keeping all this in mind, I’ve created a simple Panels page which lists recent content to authenticated users. It’s built from a bean, a view (with an access rule) and some custom markup. It uses the one col layout.

Color: 
#ffffff
Text Color: 
Dark
Format: 
Image left of text
Image shape: 
Square

Here’s my oh-so-simple panels-onecol.tpl.php file in my theme:

<div class="panel-display panel-1col clearfix" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
  <?php print $content['middle']; ?>
</div>

And here’s the markup you’ll get when viewed as an unauthenticated user:

<section id="block-system-main">
  <div class="panel-display panel-1col clearfix">
    <div class="panel-pane pane-block pane-bean-recent-content-header">
      <h2 class="pane-title">Recent content</h2>
      <div typeof="" about="/block/recent-content-header" class="entity entity-bean bean-editable clearfix">[...]</div>
    </div>
    <div class="panel-pane pane-custom pane-1">
      <p>Login or create an account to view this content...</p>
    </div>
  </div>
</section>

Let me know what you think!