Getting Started with Drupal 6 Panels

Exclusive offer: get 50% off this eBook here
Drupal 6 Panels Cookbook

Drupal 6 Panels Cookbook — Save 50%

Over 40 recipes to harness the power of Panels for building attractive Drupal websites

$23.99    $12.00
by Bhavin (Vin) Patel | August 2010 | Cookbooks Drupal Open Source

In this article, by Bhavin (Vin) Patel, author of Drupal 6 Panels Cookbook, we will learn about getting started with Drupal 6 panels. We will specifically cover:

  • Setting up Ctools and Panels
  • Upgrading from Panels 2 to Panels 3.0
  • Adding a custom Panels page
  • Adding a custom Panels node
  • Adding Mini panels
  • Managing pages via the Panels dashboard

(For more resources on Drupal, see here.)

Introduction

Drupal Panels are distinct pieces of rectangular content that create a custom layout of the page—where different Panels are more visible and presentable as a structured web page. Panels is a freely-distributed, open source module developed for Drupal 6. With Panels, you can display various content in a customizable grid layout on one page. Each page created by Panels can include a unique structure and content. Using the drag-and-drop user interface, you select a design for the layout and position various kinds of content (or add custom content) within that layout.

Panels integrates with other Drupal modules like Views and CCK. Permissions, deciding which users can view which elements, are also integrated into Panels. You can even override system pages such as the display of keywords (taxonomy) and individual content pages (nodes).

In the next section, we will see what the Panels can actually do, as defined on drupal.org: http://drupal.org/project/panels.

Basically, Panels will help you to arrange a large content on a single page. While Panels can be used to arrange a lot of content on a single page, it is equally useful for small amounts of related content and/or teasers. Panels support styles, which control how individual content's panes, regions within a Panel, and the entire Panels will be rendered. While Panels ship with few styles, styles can be provided as plugins by modules, as well as by themes:

  • The User Interface is nice for visually designing a layout, but a real HTML guru doesn't want the somewhat weighty HTML that this will create. Modules and themes can provide custom layouts that can fit a designer's exacting specifications, but still allow the site builders to place content wherever they like.
  • Panels include a pluggable caching mechanism: a single cache type is included, the 'simple' cache, which is time-based. Since most sites have very specific caching needs based upon the content and traffic patterns, this system was designed to let sites that need to devise their own triggers for cache clearing and implement plugins that will work with Panels.
  • A cache mechanism can be defined for each pane or region with the Panel page. Simple caching is a time-based cache. This is a hard limit, and once cached, it will remain that way until the time limit expires. If "arguments" are selected, this content will be cached per individual argument to the entire display; if "contexts" are selected, this content will be cached per unique context in the pane or display; if "neither", there will be only one cache for this pane.

  • Panels can also be cached as a whole, meaning the entire output of the Panels can be cached, or individual content panes that are heavy, like large views, can be cached.
  • Panels can be integrated with the Drupal module Organic Groups through the #og_Panels module to allow individual groups to have their own customized layouts.
  • Panels integrates Views to allow administrators to add any view as content. We will discuss Module Integration in the coming recipes.

Shown in the previous screenshot is one of the example sites that use Panels 3 for their home page (http://concernfast.org). The home page is built using a custom Panels 3 layout with a couple of dedicated Content types that are used to build nodes to drop into the various Panels areas. The case study can be found at: http://drupal.org/node/629860.

Panels arrange your site content into an easy navigational pattern, which can be clearly seen in the following screenshot.

There are several terms often used within Panels that administrators should become familiar with as we will be using the same throughout the recipes. The common terms in Panels are:

  • Panels page: The page that will display your Panels. This could be the front page of a site, a news page, and so on. These pages are given a path just like any other node.
  • Panels: A container for content. A Panel can have several pieces of content within it, and can be styled.
  • Pane: A unit of content in a Panel. This can be a node, view, arbitrary HTML code, and so on. Panes can be shifted up and down within a Panel and moved from one Panel to another.
  • Layout: Provides a pre-defined collection of Panels that you can select from. A layout might have two columns, a header, footer, or three columns in the middle, or even seven Panels stacked like bricks.

Setting up Ctools and Panels

We will now set up Ctools, which is required for Panels. "Chaos tools" is a centralized library, which is used by the most powerful modules of Drupal Panels and views. Most functions in Panels are inherited from the chaos library.

Getting ready

Download the Panels modules for the Drupal website: http://drupal.org/project/Panels

You would need Ctools as a dependency module, which can be downloaded from: http://drupal.org/project/ctools

How to do it...

  1. Upload both the files, Ctools and Panels, into /sites/all/modules. It is always a best practice to keep the installed modules separate from the "core" (the files that install with Drupal) into the /sites/all/modules folder. This makes it easy to upgrade the modules at a later stage when your site becomes complex and has too many modules.
  2. Go to the modules page in admin (Admin| Site Building | Modules) and enable Ctools, then enable Panels. Go to permissions (Admin | User Management | Permissions) and give site builders permission to use Panels.
  3. Enable the Page manager module in the Chaos tools suite. This module enables the page manager for Panels.
  4. To integrate views with Panels, enable the Views content panes module too. We will discuss more about views later on.
  5. Enable Panels and set the permissions.
  6. You will need to enable Panel nodes, the Panel module, and Mini panels too (as shown in the following screenshot) as we will use the same in our advanced recipes.
  7. Go to administer by module in the Site building | Modules.
  8. Here, you find the Panels User Interface.

There is more

Chaos tools suite includes the following tools that form the base of the Panels module. You do not need to go into the details of it to use Panels but it is good to know what it includes. This is the powerhouse that makes Panels the most efficient tool to design complex layouts:

  • Plugins—tools to make it easy for modules to let other modules implement plugins from .inc files.
  • Exportables—tools to make it easier for modules to have objects that live in database or live in code, such as 'default views'.
  • AJAX responder—tools to make it easier for the server to handle AJAX requests and tell the client what to do with them.
  • Form tools—tools to make it easier for forms to deal with AJAX.
  • Object caching—tool to make it easier to edit an object across multiple page requests and cache the editing work.
  • Contexts—the notion of wrapping objects in a unified wrapper and providing an API to create and accept these contexts as input.
  • Modal dialog—tool to make it simple to put a form in a modal dialog.
  • Dependent—a simple form widget to make form items appear and disappear based upon the selections in another item.
  • Content—pluggable Content types used as panes in Panels and other modules like Dashboard.
  • Form wizard—an API to make multi-step forms much easier.
  • CSS tools—tools to cache and sanitize CSS easily to make user input CSS safe.

How it works...

Now, we have our Panels UI ready to generate layouts. We will discuss each of them in the following recipes.

The Panels dashboard will help you to generate the layouts for Drupal with ease.

Drupal 6 Panels Cookbook Over 40 recipes to harness the power of Panels for building attractive Drupal websites
Published: August 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

(For more resources on Drupal, see here.)

Upgrading from Panels 2 to Panels 3.0

If you are using Panels 2 on your site, you need to upgrade your site to Panels 3.0.

The best way to use Panels is to pair it with the Page Manager from the Chaos Tools Suite, and use its interface for creating Panels pages. This completely replaces the Panels Pages module from Panels 2. If you used an earlier beta version, the Page Manager used to be known as delegation. If you are upgrading from Panels 2, and the Ctools module is already in the tree but not enabled, it will be automatically enabled for you. This is the best way to upgrade from Panels 2.

Please ensure that you are using Ctools 1.0 along with this, and not a beta version! Earlier versions of Ctools will not work with Panels 3.0!

Page Manager introduces the concept of Variants, which are different ways that a page can be displayed. For many uses, you will have only one variant. However, if you want a page to look different based upon the data being displayed (for example, you want story nodes displayed differently from article nodes), or permissions of the user (you may want an administrator to see something different from a regular user, or a logged-in user to see something different from a logged-out user), then you will add additional variants to a page. You will use the selection rules to determine which variant a user sees. Remember that the first variant that passes the selection rules will be used, so be sure to put the most specific rules first and the more general rules later. You can put a variant with no rules at all in the end and it will serve as a default.

Getting ready

These are the basic steps for upgrading from Panels 2 to Panels 3 on Drupal 6:

  • Back up your site before you begin
  • Disable your Panels module

How to do it...

  1. If you have any Panels exported, 'in code', please override them. The upgrade can only update the Panels you have in the database.
  2. Delete all old Panels module files from the sites/all/modules directory.
  3. Unpack the new Panels files & Chaos tools files in sites/all/modules.
  4. Enable Chaos tools, including the Page Manager module.
  5. Run update.php.
  6. Enable all Panels modules (and Views Content Panes if you use views in your Panels).

After following these steps, Panels 3 should be working properly on your system. Make sure you upgrade on a test site before you upgrade on the live site however, because there may be unforeseen issues.

Adding a custom Panels page

We start our initial recipe by creating the " Test" page.

Getting ready

  1. Go to the Panels UI From admin through Module | Panels. In the Panels Dashboard, select create Panels page.

How to do it...

  1. In the Pages section of Panels, type in the administration title of the page. Here, we will type test. This will appear in the administrative interface to easily identify it.
  2. Type in the machine name as the same, test. It is the machine readable name for this page. It must be unique.
  3. Type Test panel page in the administrative description. It is a description of what this page does for administrative use.
  4. Put test in the Path.
  5. Leave the home page and optional features as they are for now.
  6. In the layout Panels, select the Single column for now as shown in the following screenshot:
  7. In Title type, select Manually set and in the Title put Test panel page:
  8. Here comes the real magic of Panels—the core Panels with all options, select update and preview.
  9. The blank page preview is now created, select save.
  10. The summary page will show you all the properties of our test page created via Panels. Let's see it.
  11. Here is the blank page where we can now create the content as we like. We can even put our custom content here. Go to Edit Panel | Content and select the gear in the middle column.
  12. Select Add content and then select New custom content as shown in the following screenshot.
  13. Type in the information, as shown in the following screenshot, and click on Finish and then update and then save.
  14. Here is your custom page by Panels:

How it works

Panels provide such flexibility that you can create a completely different page on your website, which would be different from the main template. Such functionality are often required when you develop complex sites with a lot of data.

Adding a custom Panels node

We will now create a custom node using Panels. Panel nodes are node content and appear in your searches, but are more limited than Panel pages.

Getting ready

We need to go to the Panels Dashboard as we did in the previous recipe.

How to do it...

  1. Select Panel node.
  2. Select Single column again:
  3. This opens a node page of Drupal but with a custom CSS tag too, which we will discuss later in the CSS recipe. Click on Save:
  4. As we kept the default settings of the node, the node is promoted to the front page of our Mindtrades application:
  5. Note that this is the same way we create a normal node, but there is a vast difference when we create a node by Panels. By making a node via Panels, we have full flexibility to change the content and even use custom HTML and CSS. This can be made clear by using a simple example for this custom node. Let's divide this node in two parts. Suppose there was a need on the website to put more content in a presentable form.
  6. Go to Custom node panel and edit, select Panel layout.
  7. Now select Two column:
  8. This shows now that you are making a transition from a single column to double column. Select Save.
  9. Now, go to Panel content and we will see two columns. Voilà! It's easy with Panels.
  10. Now, we'll add content to both the columns, the Left side and the Right side as discussed in the previous recipe. We will use the existing nodes.
  11. We will now need to create two independent nodes say Custom 1 and Custom 2. Create two stories and do not promote to front page. Disable comments on each story.
  12. Now, select the gears of each side and add the content. You will find an auto-content activated when you type in Custom1 at Title of the node as shown in the following screenshot.
  13. Now, you will see both the contents on the node.
  14. Save it and preview.
  15. See your work now on the main page.

  16. So here is what your Custom node will look like. You can put images as well as custom HTML too:
  17. How it works...

    See how beautifully Panels arranges the content now. Even the code behind is streamlined, so that your page loads faster. Let's see the code behind the Custom1 node, indeed, a neat code for such a great functionality that can dynamically change the entire look of your node or a portion of your site. Each content in the pane is a separate &ltdiv> tag.>

    <div class="content clear-block">
    <div class="Panels-display Panels-2col clear-block">
    <div class="Panels-Panels Panels-col-first">
    <div class="inside"><div class="Panels-pane">
    <div class="admin-links Panels-hide">
    <ul class="links"><li class="update first last"><a href="/
    drupal/node/2/edit?destination=node%2F1">Edit node</a></li>
    </ul> </div>

    <h2 class="pane-title">Custom 1</h2>

    <div class="pane-content">
    <div id="node-2" class="node">
    <h2><a href="/drupal/node/2" title=""></a></h2>
    <span class="submitted">Sat, 11/28/2009 - 17:28 — <a href="/
    drupal/user/1" title="View user profile.">admin</a></span>

    <div class="content clear-block">
    <p>This is the content on left side</p> </div>

Drupal 6 Panels Cookbook Over 40 recipes to harness the power of Panels for building attractive Drupal websites
Published: August 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

(For more resources on Drupal, see here.)

Adding Mini panels

As defined on drupal.org, Mini panels are a layout mechanism for blocks. It won't take long using Panels before you get to a point when you want Panels inside of Panels or Panels that can be used as a block. That is exactly what Mini panels does. You can create a small Panel here with various pieces of content and then put it inside of a Panels-page or Panels-node.

Getting ready

We need to be on the Panels dashboard.

How to do it...

  1. Select Mini panels.
  2. Select Single column.
  3. Add the title, name, and category as shown in the previous screenshot. Use the Panels name with underscores.
  4. Once you add the mini panels, the Dashboard changes as shown in the following screenshot, showing the manage mini Panels.
  5. As we will use node as the context, click save and proceed.
  6. We add a custom content by clicking on the gear as discussed earlier.
  7. Do a live preview:
  8. Now, we will see the real advantage of Mini panels, as we add a second content and change the layout.

    Note that each content has a gear on the right-hand side that governs the properties of that content.

  9. Click on Display settings and then select the layout as rounded corners on each pane.

Now, go to the Panels Dashboard and do a Preview.

This is the wonder that Mini panels does for your content.

So, Mini panels can be used to create Panels within Panels. In this recipe, I have shown how to use a single column mini panel. But, for complex website layouts, you can use more columns and add any number of content in each.

Managing pages via Panels Dashboard

We can manage all the pages created by Panels via the Dashboard. This becomes extremely useful when your site has many pages created via Panels.

Getting ready

Once again, we need to be in the Panels Dashboard.

How to do it...

  1. We can manage all our Panels pages from the Dashboard. Here, we can see the test page that we created earlier in the node page recipe.
  2. Click on Go to list. You will be able to see our test page here in custom-type Panels:
  3. You will be able to sort the pages by Type, Storage (even up to the code level), and Title.
  4. Click on Edit for our test Panels page.

This shows the Panels UI for the page "test", which we will cover in our UI recipe.

Summary

In this article, we learned the basics of Panels and getting things done the Panel way. It is very important to be well versed with the recipes in this article to understand all other recipes in Drupal 6 Panels.


Further resources on this subject:


About the Author :


Bhavin (Vin) Patel

Bhavin is a result-oriented lead architect with a focus on delivering high-quality code and products in high traffic environments. He is enthusiastic about building new products and services. He has nine years of experience in the internet industry, and specializes in Drupal and ROR (Ruby on Rails)/LAMP technologies. He has hands-on experience with all aspects of building large-scale, high-availability applications: application development, n-tier architecture, frameworks, data interchange, security, online commerce, database administration, replication, optimization, server administration, open source software, and quality assurance. He stays up-to-date with best practices and is always finds himself learning new technologies.

Books From Packt


Drupal E-commerce with Ubercart 2.x
Drupal E-commerce with Ubercart 2.x

Drupal 6 Performance Tips
Drupal 6 Performance Tips

Drupal 6 Attachment Views
Drupal 6 Attachment Views

Drupal 6 Search Engine Optimization
Drupal 6 Search Engine Optimization

Drupal 6 Content Administration
Drupal 6 Content Administration

Drupal 6 Themes
Drupal 6 Themes

Drupal 6 Site Blueprints
Drupal 6 Site Blueprints

Flash with Drupal
Flash with Drupal


Your rating: None Average: 4.7 (7 votes)
I don't have, and have never used, Drupal 6. by
I therefore found it a little slow going following the tutorial because I'm using Drupal 7. and the as the instructions didn't match up. Having said that, I was still able to pick out enough to get started and to hack away at it rest. Without the bits gleaned from this tutorial I would have been clueless as to how to proceed, so yes, top marks, and thanks. p. d. gaucher
That is awesome by
That is awesome
Not bad by
Helpful tutorial but already as of Dec 2010 the 6-x-3.8 version of Panels has changed the workflow and UI enough from the version used here to make things still somewhat confusing, one of my pet peeves with Drupal documentation.
Thank you very much by
I always wanted to start with panels, but the shere flexibility of it was too overwhelming. With your Tutorial I started using Panels now and I like it

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
m
b
Z
u
G
5
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software