Implementing Panels in Drupal 6

Drupal 6 Panels Cookbook


August 2010

$23.99

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

(For more resources on Drupal, see here.)

Introduction

This is an article centered on building website looks with Panels. We will create a custom front page for a website and a node edit form with a Panel. We will also see the process of generating a node override within Panels and take a look at Mini panels.

Making a new front page using Panels and Views (for dynamic content display)

We will now create a recipe with Views and Panels to make a custom front page.

Getting ready

We will need to install Views as the module, if not done already. As the Views and Panels projects are both led by Earl Miles (merlinofchaos), the UIs are very similar. We will not discuss Views in detail as it is out of the scope of the article. To use this recipe, a basic knowledge of Views is required.

We will use our recipe of fl exible layout as our start for this recipe. To make a better layout and a custom website, I recommend using adaptive themes (http://adaptivethemes.com/). Here, in this recipe, I have used that theme. The adaptive theme is a starter theme and it includes several custom panels. There is also a built-in support for skins, which helps to make theming a lot easier. We will be using adaptive themes in this recipe for demonstration and will change our administration view from Garland to adaptive theme.

The adaptive themes add extra layouts as shown in the following screenshot.

How to do it...

  1. Go to the Flexible layout recipe we created or you can create your own layout using the same recipe.
  2. Now, we will create Views to be included in our Panels layout.
  3. Assuming that Views is installed, go to Site building | Views.
  4. Add a View.
  5. In the View name, add storyblock1, and add a description of your choice.
  6. Select the Row style as Node.
  7. Put in Items to display as 3.
  8. In the Style, we can select Unformatted or Grid depending on how you want to display the nodes. I will use Grid.
  9. In the Sort criteria, put in Node: Post date asc and Node: Type asc.
  10. In Filters, we just want the posts promoted to the first page.
  11. Do a live preview.
  12. We will need to add display of the default view as Block, so that the View is available as a block, which we can select in our Panels. We can also put the views default output as a Panel pane, but using blocks as a display of the Views gives the "read more" links by default. In the direct View, we have to create it. Say, we create a block—storyblock1, as shown in the following screenshot:
  13. Now, we need to go to the Flexible Layouts UI, as a layout created by you.
  14. Go to the Content tab.
  15. Earlier, we had displayed a static block; now we will display a dynamic View.
  16. Disable earlier panes in the first static row.
  17. Select the gears in first static rows and select Add content | Miscellaneous.
  18. The custom view block will be here, as shown in the following screenshot. Select it.
  19. Save and preview.
  20. So, we have now integrated the dynamic View in one of our Panel panes.
  21. Let's add sample content to each region now. You can select your own content as you want on your front page, as shown in the following screenshot:
  22. Go to Site configuration | Site information.
  23. Chan ge the default home pages to the created Panels page.
  24. Your home page is now the custom Panel page.

How it works...

In this recipe, we implemented Panel panes with views and blocks to make a separate custom page and separate display for the existing content in the website.

(For more resources on Drupal, see here.)

Creating a node override

Drupal's built-in content viewing is decent, but sometimes, especially with custom Content types, you might need a special way of displaying that content. Suppose we want to put in an "add comment" form on the same page where our node is displayed; this cannot be possible with built-in content viewing. We can do this with Panels by a node override.

Getting ready

Create a new Panel page using Panel UI.

How to do it...

  1. Create a Panel page named node override.
  2. Select a Three column layout.
  3. We now create a node override using the Contexts.
  4. Select any one node type; I have selected one of a Google news post, you can select any node of your choice.
  5. Go to the Content tab now.
  6. On the Left side, click on the gear, and then on Add content. Go to Node and select Node comments.
  7. In the Middle column, we will keep the Node | Node content.
  8. In the Right side, let's keep the Comment form.
  9. Do an update and preview. You will see a page similar to the following screenshot:

How it works...

This is how we actually make an override for a particular node. All nodes, except this, use the normal Drupal input format.

Summary

In this article, we have covered and learnt the following:

  • Making a new front page using Views and Panels
  • Creating a node override
  • Overriding a node edit form
  • Using Panels with feeds
  • Using Mini panels

Further resources on this subject:


Books to Consider

Drupal 6 Site Blueprints
$ 26.99
Building Powerful and Robust Websites with Drupal 6
$ 16.20
Drupal: Creating Blogs, Forums, Portals, and Community Websites
$ 12.00
comments powered by Disqus
X

An Introduction to 3D Printing

Explore the future of manufacturing and design  - read our guide to 3d printing for free