Product layout using Panels

Starting From Zero

How to Start an Ecommerce Business

Get Instant Access

The Panels module is one of the most controversial Drupal modules. The main reason for this is the long period this module, for Drupal version 6, has spent in beta version. Only recently has a stable version 3.2 for Drupal 6 been launched. In addition there was a dead end in the Panels version 2 development branch that forced the module developers to skip the version and jump to 3. Panels module has gained a new momentum with new and rich page customization features that address both experienced and everyday users that want to configure their home page or their inner pages as well. Experienced themers that were reluctant to use the Panels module as they were used to performing most of the layout actions using XHTML and CSS (we discussed themes in Chapter 8, Customizing the Frontend) are becoming more open to adopt Panels, as it provides reusable page layouts along with the option for end users to change their site look and feel in just a few seconds. The real power of Panels emerges, of course, in conjunction with the Views module generating a fully customizable block view that can be placed in every single area of your template.

Panels in Drupal

The Panels module allows a site administrator to create customized layouts for multiple uses. In our case you may be thinking of changing the home page layout or your electronics search page. You can use the drag-and-drop content manager functionality that lets you visually design a layout and place content within that layout. Integration with other systems allows you to create nodes that use this, landing pages that use this, and even override system pages such as taxonomy and the node page so that you can customize the layout of your site with very fine-grained permissions. Panels comes with a number of preconfigured page layouts that you can choose, in order to fully customize each page according to your needs. You can see all possible page layout configurations available in your Drupal site in the following image. This image shows the Panel administration screen at Administer | Site building | Panels | Settings | Panel Nodes.

Drupal Context

Panels makes a wide use of contexts in Drupal. Context in plain words is a mechanism Drupal uses for the runtime engine to decide on some global variables about the page being rendered at the present time. Therefore, Panels can change its layouts according to aspects of the page rendered such as the time you see the page, the role of the users that makes the request, and the preferred language of the user. These contexts can be checked for information and used not only to make content available to be displayed, but to choose which layout to display. For example, if your site is international, you can use context to see if the node being viewed is set for a particular language and choose to display it one way if it is in French or another way if it is in English. You can also select on attributes such as node type, whether or not the user has access to edit the node, and more.

Panels also includes simpler applications of the drag-and-drop system. There is a node type (the 'panel' node) that can simply be added as content to your system. By being a node it loses a lot of the features that the more powerful page system has, but it does have the advantage of simplicity, and gaining all of the functionality that nodes normally get.

Panels can also be used for items smaller than pages. What if you have a normal sidebar, and you have two pieces of content that waste a bunch of space because they're really too narrow, and your design looks significantly better if they are side by side? That's complex to do in Drupal because what you end up having to do is create a custom block with custom code to display these two pieces of content. With Panels, you just create a "mini-panel" with a two-column layout. Add one block to the left, one block to the right, and finish. This mini-panel will then be available to your system as an ordinary block, or as panel content to go in other panels.

The Panels module integrates with Views to allow administrators to add any view as content. Or, for uses where the layout editor needs more tightly controlled content, Views can be given custom displays to provide only what the site administrator wants the panels builder to use.

• Panel pages are the primary Panels module; you can use this for creating single full page layouts. This replaces the standard panel that existed in the earlier versions of Panels. If you are upgrading your site from Panels 1, and you cannot find where your panels went, be sure to enable the panel pages module.

• Panel nodes are useful for creating layouts that only occupy the content area of your pages. Frequently, it is desirable to add an area to a node layout, such as a pull quote for a newspaper or a photo block, which you don't necessarily want on every node. Panels nodes let you control the layout of a single node at a time and place content such as blog posts, images, and blogs in and around the post.

• Mini panels are a layout mechanism for blocks. It won't take long using panels before you get to a point when you want a panel inside of a panel. Or a panel that can be used as a block. That is exactly what mini-panels do. You can create a small panel here with various pieces of content and then put it inside of a panel page or panel node.

In order to install the Panels module you need to download it from http: / /drupal. org/proj ect/panels and unzip it in your site's modules directory. Take into account that the Panels module has a prerequisite of the ctools module so if you have not installed this you need to do it right now. You can find ctools at http: //drupal. org/proj ect/ctools. You also need to unzip ctools in your modules directory and then navigate to the modules page from your Drupal administration screen, Home | Administer | Site building | Modules. At this screen make sure you activate the following modules because to have a fully functional panels installation you need the page manager chaos tools counterpart. This is actually the old delegation module that was renamed and added to chaos tools in Drupal 6. If everything works fine you will be able to see the following modules:

• Chaos tools

• Page manager

• Views content panes

• Panels

• Panel nodes

• Mini panels


Enabled Name Version

0 6.X-3.2 panels

Create mini panels that can be used as blocks by Drupal and panes by other panel modules. Depends on: Panels (disabled), Chaos tools (disabled)

. Panel

Ml 6.X-3.2 nodes

Create nodes that are divided into areas with selectable content,

Depends on: Panels (disabled), Chaos tools (disabled)

Core Panels display functions; provides no external UE, at least one other Panels module

should be enabled.

13 Panels 6.X-3.2

Depends on: Chaos tools (disabled]

Required by: Chaos Tools (CTools) P-lu-gln Example (disabled). Mini panels (disabled), Panel nodes [disabied)

You probably need all of them so check them and click on Save configuration. There you are, with the Panel module installed and ready to start the action.

Panels used in theming

Creating a custom layout in your theme can also be accomplished using panels and to find out more navigate to http : / /drupal. org / node/495654.A panel layout is a layout that can be used by the Panels module. You can add content to defined content areas within a panel. The Panels module comes with several layouts, but you can also create your own for your own module or theme. Here we will create a layout for a theme.

Panels basic configuration

Before we start developing our first page we will take some time and review all the configuration options of panel pages. Luckily, as the developer of Panels is also developing Views we will see some resemblances and same clean and intuitive design as Views. Navigate to Home | Administer | Site building | Panels where you will see the following screen:

Create new... Panel page

Panel pages can be used as landing pages. They have a LFRL path, accept arguments and can have menu entries.

Panel node

Panel nodes are node content and appear in your searches, but are more limited then panel pages.

Mini panel

Mini panels are small content areas exposed as blocks, for when you need to have complex block layout Or layouts Within layouts.

Manage mini panels...

Create new... Panel page

Panel pages can be used as landing pages. They have a LFRL path, accept arguments and can have menu entries.

Panel node

Panel nodes are node content and appear in your searches, but are more limited then panel pages.

Mini panel

Mini panels are small content areas exposed as blocks, for when you need to have complex block layout Or layouts Within layouts.

Manage mini panels...

Titers are no mini panels. Go to list

Actually, Panels relies upon third-party modules for page administration, hence it does not provide many options in its main administration screen. You will see all three possible panel types that you can make, namely, Panel page, Panel node, and Mini panel. Panel node behaves like a plain old Drupal node but with specific layout and mini-panels, which can be assigned in blocks. By clicking on these options you will be able to navigate to other sections such as Pages from the page manager module. We take the opportunity to point out that Panels is literally a huge module that provides a great number of configuration options to the end user. Therefore, in this book our main intention is not to provide great insight into Panels operations but rather to show how Panels can be used efficiently to interact with your customers and arrange your content properly. We will not go into detail on mini-panels and other special features like context role panel layout.

Menage pages...

User profile template



All blogs



User contact



Node add/edit form



Node template



User blog



Taxonomy term template


Go to list

Furthermore, in the basic administration configuration you can change the following features and functionality:

• In Home | Administer | Site building | Panels | Settings | General settings you can change the following:

° The first option is Term hierarchy URL parsing options. Panel pages can take terms as arguments in their URL and then pass them to each view that is configured in each panel area. By changing this option, you can alter this behavior by allowing only one term in each request.

° If hierarchy injection is checked, taxonomy term parents will appear in the breadcrumb trail. For instance, if you have a term that is the child of the term cameras, which is the child of the term electronics then by checking this option you will get electronics, cameras as your taxonomy URL entries.

° If the last checkbox is checked, all views will be made available as content panes to be added to content types. If it is not checked, only views that have a 'Content pane' display will be available as content panes. This is actually a way of telling Drupal if all your views including the existing ones should be available for placement inside panels.

Home > Administer > Site buiiding > Panels

Panels Dashboard ~

, Pane! pages Mini panels Panel nodes Allow multiple terms on taxonomy/term/%term:

O Single term © Multiple terms

By default, Drupal allows multiple terms as an argument by separating them with commas or plus signs. If you set this to single, that feature will be disabled.

0 Inject hierarchy of first term into breadcrumb trail

If checked, taxonomy term parents will appear In the breadcrumb trail.

g] Make all views available as panes

If checked, all views will be made available as content panes to be added to content types. If not checked, only Views that have a 'Content pane' display will be available as content panes. Uncheck this if you want to be able to more carefully control what view content is available to users using the paneis layout UI.

(^Save configuretiorT) (Reset to defaults^

• In Home | Administer | Site building | Panels | Settings | Panel pages you can alter basically the same properties as in the other two pages, Administer | Site building | Panels | Settings | Mini panels and Administer | Site building | Panels | Settings | Panel nodes:

° Select the default behavior of new content added to the system. If checked, new content will automatically be immediately available to be added to Panels pages. If not checked, new content will not be available until specifically allowed here.

° Check the boxes for all layouts you want to allow the users to choose from when picking a layout. You must allow at least one layout. You can see the available layout in the previous section.

Panels for product layout

Keep in mind that the Panels module provides a vast number of features and functionalities that can customize your online shop to great extent. Following our analysis on Panels module 3 and Drupal 6 we will go through some of these features focusing on first page configuration, some special product categories, and some promotional areas for new products. We need to define two things before we continue:

• What exactly we need to show to our customers in our first page

• The outline of this information

For the first question, in a real-life example we would need to include in our analysis a number of factors like what merchandise we want to promote, where a promotion area should be placed, what lifetime these promotion screens should have, how often they will be updated, and what other information will we show. Questions like these cannot be addressed without the presence of substantial data and reports. Large organizations, in order to perform minor changes to their corporate site profiles or their online shops, tend to get really sophisticated with direct marketing research, focus groups, and in general high-cost approaches. We on the other hand, having all these valuable statistics and reports, which we have set up in Chapter 7, Managing Customers and Orders, can take these decisions based on solid data for customer trends and behavior trends. Suppose that our customers produce a high click rate for featured products and camera electronics. We create some views using the views module and position them in our starting page in areas we think will be most visible to ensure a higher click rate.

To do so, we need to navigate to Administer | Site building | Pages. Here we can see all the active panels pages that are of type system. Another very useful feature with Panels is that you can use it to override specific Drupal core screens such as the node edit screen, or even get some new cool ways of displaying Taxonomies. You can add variants and context-dependent functionality by clicking on Edit, but we will not consider this at the moment.

Home * Administer > Site building


J Add custom page Import page

See the getting started guide for more information.



Enabled: Search:

( <Alt>

[ <AII> I H

( <AI(> ^

Sort by:


[ Enabled


'-;■■! [ up

h»~) (Apply) (Reset)









User profile template

/user/% user

In code




bio g

Alt blogs


In code





User contact

/user/% user/co nta ct

In code





Node add/edit form

/no de/% node/e dit

In code





Node template

/node/% node

In code





User blog


In code





Taxonomy term template


In code



» Create

new page

Here you have two different options for creating the panel layout you need: simple panel pages and custom pages that stand for more advanced panels with all the context-aware functionality we have been discussing. So, click on the Create a new page link and you will see the new pages creation screen, where we need to add the following information to the form:

• Administrative title: This is the name of the page and will help you to refer to this page from the "pages" screen.

• Machine name: This is the machine-readable name of the page. It must be unique, and it must contain only alphanumeric characters and underscores. Once created, you will not be able to change this value.

• Administrative description: This is a description of what this page is, and does, for administrative use.

• Path: This is the URL path to get to this page. You may create named placeholders for variable parts of the path by using %name for required elements and ! name for optional elements. For example: "node/%node/foo", "f orum/%f orum" or "dashboard/ ! input". These named placeholders can be turned into contexts in the arguments form.

• Make this your home page: This is a very useful option that helps you use your customized panel page as your home page.

• Variant type: For this choose the default value, Panel.

• Optional features: These are the additional configuration options for your panel screen. You can associate different behavior to different roles, languages and so on. In our case, as we are creating a promotional page with access from all, we will leave this blank.

After filling out the details click on Continue. Just like every Drupal wizard screen, keep in mind that nothing is being saved until you finish all the screen sequences. You then have to choose your preferred layout and we will choose the Three column view as we would like to have results from three different views displayed in our promotional page.

Following the decision on the panel layout, in the next screen we will also be asked to choose a name for the page and configure caching settings. Caching is extremely important for panels as they consist of different views and rendering time can start increasing if we are not a little careful. Usually we will define cashing time and attributes in the Views module but you can do it in the panel section globally in the same way you are doing it in Views, that is by defining data lifetime before the next rendering. So, after you enter the title click on finish and your panel definition is ready. You will be redirected to the panel edit page, which is depicted in the following image. The resemblance to Views screens is obvious, while the configuration options span from content layout settings to access rules and positioning.

home > Administer ■ Site building > pages

Eshop Offer Page home > Administer ■ Site building > pages

Eshop Offer Page

| Clone | Export | Delete | Disable | Add variant | Import variant


Variants » Panel » Content


Variant operations | Clone | Export | Delete Disable


Add content Items and change their location with a drag and drop interface. * Display settings Title type:



variants ft

Panel ft

[ Manually set hv-j Title:

[online Shop Stock Page

The title of this panel. If left blank, a default title may be used. Set to No Title If you want the title ta actually be blank.

Left side Middle column Right side



Selection rules



Content ft


( Update ) ( Update and preview )

The next thing we want to do is to try to populate the areas we have assigned to our three-column panel. We will be using two system views from Ubercart and we will manually create another one ourselves for our example.

It should be clear by now that the rich usability of panels in Drupal emerges from the integration with the Views module. Literally the best content that you would like to add in your panel areas is a views block. Therefore, we will step right into creating the three views we will assign to the different areas of the panel. Navigate to the views creation page, Administer | Site building | Views. To create a view with the most visible products of the day do the following:

1. Click on the Add view button.

2. Add to the view a name, the identification "daily products" and the description "daily most viewed products" and click on Next.

Layout Panels Drupal

3. In the view configuration screen add a block display by selecting block from the drop-down option list on the top left of the screen, and then click on Add display.

4. Ignore the error generated and continue to add a sorting criterion. Click on the add icon on the sorting criteria box and in the option list that appears choose "Node Statistics", click on View today and choose ordering as descending, then click on Add.

5. Then we continue to add a filter. Click the add icon on the filter box and in the option list that appears choose "Node", click on Node:Type and choose "is One Of" and the type "Product" then click on update default display.

6. At Block Settings box click on caching and choose Cache Once for everyone.

7. Finally, as we are using fields display options (the default) we need to define these fields for our view. We choose to display the product title and the product teaser in our view. To do so click on the Add button on the fields box and select Node from the drop-down list and then click on Node:Title and Node:Teaser. Afterwards, click on Add. Then in the title field click on Link this field to its Node option. Click on update default display and everything should be set.

8. After we have created our custom view we will go through and populate the content areas in our panel; we go back to Administer | Site building | Pages and click on the page we just created. Go to Variants | Content and then click on the little gear-like icon on the top left of the content screen. You will be provided with the following option:

Title type:


|Online Shop 5tock Page

The title nf this panel, If left blank, a default title ma^

|Online Shop 5tock Page

The title nf this panel, If left blank, a default title ma^

( Update j f Update and preview )

( Update j f Update and preview )

9. Choose Add content and a pop-up modal window will appear with all the available blocks of your site. The blocks are categorized so feel free to change between categories and see all blocks available to you. Also keep in mind the option to add new custom content, which stands for manually added HTML and adding existing nodes inside the panel block. We will choose to add from the Views tab the following:

• popular_products

• dailyproducts

In order to add the view to our panel display we perform the following steps for each view on our panel:

1. Choose the view you want to add to the particular panel area.

2. On the modal pop-up window choose the view you want to add. Usually custom views are found in the views tab. Click on the view you want to add.

3. Afterwards, you will be prompted to choose a display type for your current view. Choose block and click on Continue.

4. The next screen provides a large number of configuration options. In our case we will narrow down our changes only to the block title and the view title. You can see the administration options in the following image. Some very interesting options are:

• The feed icons, especially if this is a feeds view—we recently created a node view in our shop.

• The argument passing capabilities and how Panels module lets you associate URL parameters to view exposed filters.

5. After you have finished configuring the look and the feel click on Finish. Congratulations! You have successfully associated your panel area with the view we created in the previous steps.

Configure view newjroducts [Block]

□ override title

Vbu may use %keywnnds tram contexts, as well as vjtitl& to contain the original title.

□ Provide a "mere" lint that links tt, the view

"mis is Independent any more lint mat nay be piicvlded by the view Itself: If you sea twd more lid lis,

□ Display feed leans custom pager settings

□ use different pager settings from view settings

□ Send arguments

Se lect this tp send a II arg unients Tram the panel d i ectiy to th a view ir checked, the ps nel a rgumeri3 w that arguments cc net include tile- bas« URL; dnly values alter the URL dr set as placeholders are cdnsid


Additional arguments to send to the view as if tfiey were part of the URL In the form of arg£/art|2/arg.3. Note: use these values only as a last resort. In future versions of Pa nefs these may go away.

Override URL:

If this is set, override the View URL; this can sometimes be useful to set to the panel URL (^Baefc j ( Finish ^

After you have finished adding all the three views the result will be very elegant and will definitely resemble the work of an experienced web designer.

Was this article helpful?

+1 0


    How to create a panel for product deatils in drupal?
    9 years ago
  • Irene
    How we can change the image in the Panel in drupal?
    9 years ago

Post a comment