Mini panels

Create mini panels that can be used as blocks.

See the tutorial about mini panels.

Panel nodes

The panel node module creates a new node type, the 'panel' node, which has a panel layout. It is otherwise independent from your other nodes, as well as from panel pages. It is sort of a lesser cousin to panel pages, and it exists in case you actually need the functionality of a 'node' for your panels; sometimes this does turn out to be necessary.

Panel pages

Create pages that are divided into areas of the page.

This is the core functionality of Panels. There are a few tutorials available.

• Create a node override
• Creating a new front page with Views and Panels 2
• Overriding the node edit form

Panels

Core Panels display functions

This is the heart of panels. See for example the sourcecode.

Panels exporter

Allows exporting multiple panel pages, mini panels and other types at once.

Most of the tutorials list the files generated by the exporter.

Panels simple cache

Adds the simple cache as an option when configuring panel panes.

Views panes

Creates views as content types that can be added to displays

This module prepares a view for usage within panels.

You can configure what view properties can be are overridden through the configuration when added to a panels content. Ie the title or pager provided by the view.

Panels 2: Adding a node to a panel page

The recommended method for adding a node to a panel page is as follows:

• Go to the 'Contexts' tab.
• Under the Contexts section on the right, select 'Node' and click Add.
• Select the node you want.
• Save the page.
• Then go to the Content tab. Click any add content button. You will notice there is a section you do not normally see named 'Node context'. Any of these panes will allow you to display a node or information about a node. Use the 'Node content' pane under the 'Node context' section to do a basic node view.

For advanced theming

• In the 'Node content' add config dialog, there is an item called the 'panel_identifier', which you can use to get maximum control over the presentation of the data and be able to automatically use different panel-based templates depending upon what you enter in that field. In your _phptemplate_variables, you can use a piece of code like this:

Alternative method for adding a node to a panel page

If the power of the above method is not needed or not wanted, there is always the legacy nodes module. Panels legacy nodes does not have a normal administrative UI, such as panels pages or mini panels. With this module, users may add a node directly to a panel via the add content interface. They may then select this node using an auto-complete field. In general, this method of adding nodes to panes should be considered deprecated and is only retained to support updating sites that use this older method. Moving forward, it is recommended that the context system be used to embed nodes, as that is far more powerful and interesting.

Panels 2: Basic text layouts

Panels 2 is a powerful tool that allows anyone to quickly create an easy layout, using all sorts of content. To learn how to create a basic layout, let's use the example of creating a standard 'about us' page. Normally, an about us page would be one long page. However, Panels 2 allows us to spice up the content with new looks and layout.

1. First, make sure you have Panels 2 installed. You'll just need the core Panels module, as well as the Panel pages module, for this tutorial- however, as you progress in using Panels, you will find the other included modules very handy.
2. Okay, now that you've got Panels 2 installed, let's get our hands dirty.
3. First, click Panels on the menu. That will bring up an informational page, which you might find interesting to read. After you are done with that, click Panel pages, as that is the main tool we will be using in this tutorial. This displays all the panels you have made, so if you ever need to edit a panel in the future, come back to this page.
4. Click the 'Add' tab at the top. That brings us to a page with all the possible layouts for a panel. Select the 'Three column 25/50/25' option.
   
   
5. Set the Panel name to: about_us
6. Set the Page title to: About Us
7. Set the Path to: node/aboutus
   
   
8. Click save. This will bring you to the Advanced tab.
9. Click 'Provide Menu' under the 'Menu' part of the Advanced tab. This adds a menu item into Drupal. If you don't want this, or you want the link somewhere else, feel free to skip this step.
   
   
10. Click save.
11. Now, let's add some content to the page. Click the 'Content' tab at the top. It's time to think about what we want in our 'about us' page. Let's list what we want where. Let's presume we want a bio in the middle, employee information on the right, a logo on the left, some links on the left, and perhaps some contact information on the bottom.
• Left: Employee Information
• Middle: Bio
• Right: Links, Contact Information
12. Click the plus sign on the left pane. A window should pop up: find 'New Custom Content' under 'Custom'.
13. We'll do one employee at a time. Type the name of an employee in the 'Title' field, and the description in the 'Body' field.
14. Click 'Add Pane' at the bottom to save the pane. Remember, you'll still have to save the whole panel at the end!
15. Repeat the last few steps as many times as necessary. I'll do it twice.
16. Now for the about text. Click the plus sign in the middle pane. Again, click 'New Custom Content' under 'Custom' on the window.
17. For the 'Title' field, fill in 'About CompanyFoo' (replacing CompanyFoo with the name of your company or group). Then, type in the about text into the 'Body' field. Click 'Add Pane' when you are done.
18. The links is a little bit more complicated. Again, click the plus sign in the right pane, and find 'New Custom Content' under 'Custom' on the window.
19. Type 'Links' in as the title, and use the following code example as a starting point.
    
    
    <a href="http://drupal.org">Drupal</a>
    <a href="http://groups.drupal.org">groups.drupal.org</a>
    <a href="http://localhost/">Localhost</a>
20. Click 'Add Pane' at the bottom.
21. Finally, to add some contact information, click the plus sign in the right pane, and click 'New Custom Content' under 'Custom' on the window.
22. Type 'Contact Information' into the 'Title' field, and type some contact information in the 'Body' field.
23. Click 'Add pane' at the bottom.
24. Don't worry about not having used the top pane- Panels 2 ignores the panes you haven't used. Now, click save at the bottom of the page.
    
    
25. Navigate to your home page, and click 'About Us' on the primary menu.
26. There you go! You now have a custom content panel in Drupal. The possibilities are endless.
    
    

If you want to import a starting point, download the code and import it by clicking the import tab at the top of the Panel pages module.

Panels 2: Create 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. If you want some basic layout tools, you can very quickly create specific layouts for specific content types with Panels 2. Let's try it, creating different layouts for pages and stories.

1. Make sure you've got Panels 2 installed.
2. Go to the Panel pages menu item (administer » Panels » Panel pages)
3. Click the 'Add' tab at the top.
4. Select the 'Two column stacked layout' (for this example).
   
   
5. Set the Panel name to: node_override
6. Set the Path to: node/%
7. Click 'Save and proceed'.
   
   

8. Skip the next page by clicking on the 'Context' tab at the top.
9. Under the 'Arguments' section, select 'Node ID' and click 'Add argument'.
10. In the modal dialog, select the content types 'Page' and 'Story', and select them again under 'Own display'. This will allow you to modify the node presentation for just these content types (and separately if you choose, as we are doing). Click 'Save' at the bottom of the window.
    
    
11. Click 'Save' at the bottom.
    
    
12. Click the 'Content' tab at the top.
13. Since we want different displays for different content types, we aren't using the 'Default' tab. So let's click the 'Node ID 1 Page' tab for now. That will edit the page node override.
14. For the 'Page' content type, let's have an override that shows the content on top, the comments on the middle left panel, as well as some text and a comment add form on the middle right. The bottom won't be used, but don't worry, Panels 2 ignores the parts that aren't used. The first thing to add is the content:
15. Click the plus sign icon in the top section of the panel.
16. Under the 'Node context' heading, find and select 'Node content'.
    
    
17. Click the 'Link title to node' checkbox.
18. Click 'Add pane' at the bottom of the window.
19. Ok, now for the left side. Click the plus sign on the left section of the panel.
20. Under the 'Node context' heading, find and select 'Node comments'.
21. Click 'Add pane' at the bottom of the window.
22. And on to the right side; click the plus sign on the right section of the panel.
23. Under the 'Custom' heading, find and select 'New custom content'.
24. Set the Title to: Comment Policy
25. Set the Body to:
    
    
    Please use our comment system responsibly; and don't flame! We're a happy community here.
26. Click 'Add pane' at the bottom of the window.
27. Click the right plus sign again.
28. Under the 'Node context' heading, find and select 'Comment form'.
29. Click 'Add pane' at the bottom of the window.
30. Click 'Save'.
    
    
31. And now we have a page override:
    
    
32. Now, on to the node override for Stories. Let's have something similar to our page node override, but with the content and comments on the left, and the comment policy and comment add form on the right. Nothing will be on the top this time.
33. Click the 'Node ID 1 Story' tab at the top.
34. Click the plus sign on the left.
35. Under the 'Node context' heading, find and select 'Node content'.
36. Click the 'Link title to node' checkbox.
37. Click 'Add pane' at the bottom of the window.
38. Click the plus sign on the left again.
39. Under the 'Node context' heading, find and select 'Node comments'.
40. Click 'Add pane' at the bottom of the window.
41. And on to the right side; click the plus sign on the right section of the panel.
42. Under the 'Custom' heading, find and select 'New custom content'.
43. Set the Title to: Comment Policy
44. Set the Body to:
    
    
    Please use our comment system responsibly; and don't flame! We're a happy community here.
45. Click 'Add pane' at the bottom of the window.
46. Click the plus sign on the right side again.
47. Under the 'Node context' heading, find and select 'Comment form'.
48. Click 'Add pane' at the bottom of the window.
49. Click 'Save'.
    
    
50. And now we have a page override:
    

    

51. You are now done with this tutorial, but remember, this can apply in a ton of ways to any content type.

If you want to import a starting point, download the code and import it by clicking the import tab at the top of the Panel pages module.

Panels 2: Creating a mini panel and passing arguments through context

Overview

Passing an argument from the URL into a block is a common thing. The idea is that the content of block will change according to what is viewed. For example we would like a block to show us all the taxonomy terms of a certain node. For this reason we need to pass to the block the argument of the node id (nid). In the following url http://xxx/node/123 argument number 1, which we will call %1, equals to the 123.

When creating a mini panel, you get the functionality of Panel pages, but the outcome is a block, that can be either configured through the blocks admin (http://xxx/admin/build/block), or of course added to in a panel page.

Modules

• Panels
• Panel pages
• Mini panels
• Views

Requirements

• Create a mini panel that shows the comments the currently signed-in user has written in the currently viewed page.
• Enable the block on nodes.

Operation

1. Create a view according to the requirement- user_comments_per_node.
2. We need to prepare the integration of our view 'user_comments_per_node' with panels.
   1. Go to Admin, Panels, Views, or http://xxx/admin/panels/views.
   2. Select the view from the dropdown list and click create panel view
3. In the view Select our View - user_comments_per_node.
1. Set the Panel view title to: User comments per node
2. Keep the view type as block, since we defined there this should appear as 'List'.
3. Set the required context to: Node
4. Set the amount of items to display to five (5).
5. Click 'Save'.
4. Just to understand what's going in this page:
1. 'Basic information' concerns the Visual representation of the Views in the panel admin.
2. 'Arguments' defines which argument the view can and is allowed to get. Since panel can have several context it's important to make sure the views gets the correct arguments.
3. 'Paging information' defines whether the output of the views should be paged (i.e. those | 1 | 2 | next>> | Last | links ). Even if paging wasn't defined in the views, it can be defined here. Also the number of posts or offset (i.e. output the view starting from the 2nd result).
4. 'Pane decorations' are Merlin's way of letting us, grateful people, decide if the panel will allow us to override few settings from the panel itself. This can become handy if you have several pages showing the same views, but need a slightly different behavior.
5. Add a mini-panel by going to Panels -> Mini Panels, or http://xxx/admin/ panels/panel-mini/add.
6. Set the layout as 'Single column'.
7. Enter the mini panel title and name. Set the title to 'My comments' and the name to 'user_comments'. Click 'Next'.
   
   
8. We've been redirected to the 'Content' tab – here we will add the View created previously.
9. Click on the 'Add content' Icon and select under 'Views' our view. Click 'Add pane'.
   

   

10. Our view was added. Don't forget to save the panel; just adding it is not enough.
11. The mini panel is ready, which means that in the blocks admin (http://xxx/admin/build/block) we have a new mini-panel called Mini panel: "My comments". Set it to appear on the 'Right sidebar'.
12. How to show the block only on certain content types, and in another place? Use the panel pages node override of course. Here's a tutorial for getting started with node overrides.

If you want to import a starting point, download the code and import it by clicking the import tab at the top of the Panel pages module.

Panels 2: Creating a new front page with Views and Panels 2

When you have tools as useful as Views and Panels 2, you'll want to be able to use them together. To figure out how to use them together, let's create a new front page. Drupal's standard front page is useful, but we want something a little more.

1. The first thing to do is make sure you have both Views and Panels 2 installed. You don't need them all, but it's easiest to enable them all.
2. The next step is to create the views we'll need. The first one we need, the front page view, is a sample view that comes with Views. Let's enable that.
3. Click Views (Site Building > Views). This brings you to the Views management page. On the bottom, under the 'Default Views' heading, find the 'frontpage' default view, and click 'Add'.
   

   

4. Click 'Save' at the bottom.
5. Now, we need one more view. We'll use the simple monthly archive view. Import the code provided there using the 'Import' tab at the top of the Views management page, and copy and paste the code into the text box. Click 'Submit' at the bottom.
6. The resulting View is fine; click 'Save' at the bottom.
7. Now, on to the panel. Click Panel pages (Panels > Panel Pages).
8. Before we can create the panel, you need to make sure Panels can "see" the content you've created. Click the 'Settings' tab at the top.
9. Make sure everything under the 'New content behavior' heading is checked, especially the checkboxes next to 'New View' and 'New Legacy views'.
10. Now, to create the panel. Click the 'Add' tab at the top of the page.
11. Let's select the 'Flexible' layout, which allows us to create our own layout.
    
    
12. Set the Panel name to: front_page
13. Set the Page title to: Home
14. Set the Path to: front
    
    
15. Click 'Save' at the bottom.
16. The 'Layout settings' tab that you are brought to looks intimidating, but we're just making a couple changes. The benefits of having a flexible layout, as we selected earlier, include being able to easily manipulate your panel to have any kind of configuration.
17. Now, we want some custom dimensions for the panel, so set the Rows to: 1.
18. In the first row (the previous changes haven't yet gone into effect), set the Columns to: 2.
19. Again in the first row, set the Column titles to: Left, Right.
20. Click 'Save' at the bottom (to refresh the page with the new settings).
21. Set Width 1 to: 80, and Width 2 to: 20.
22. Click 'Save' at the bottom. The final settings should look like this:
    
    
23. Now we need to add a menu item. Click the 'Advanced' tab at the top.
24. Click the checkbox next to 'Provide Menu'.
25. Set the Tab Weight to: -10.
26. Click 'Save' at the bottom.
    
    
27. Click the 'Content' tab at the top.
28. Click the plus sign on the left.
29. Under the 'Views' heading, find and select the 'frontpage' view we added earlier. Click
30. Click the checkbox next to 'Link title to view'.
31. Click the checkbox next to 'Provide a "more" link that links to the view'.
32. Click 'Add pane' at the bottom.
33. Click the plus sign on the right.
34. Under the 'Core blocks' heading, find and select 'Who's new'.
35. Click 'Add pane' at the bottom.
36. Click the plus sign on the right.
37. Under the 'Core blocks' heading, find and select 'Who's online'.
38. Click 'Add pane' at the bottom.
39. Click the plus sign on the right.
40. Under the 'Views' heading, find and select 'Monthly Archive'.
41. Click the checkbox next to 'Link title to view'.
42. Click 'Add pane' at the bottom.
43. Click the plus sign on the right.
44. Under the 'Core blocks' heading, find and select 'Recent comments'.
45. Click 'Add pane' at the bottom.
46. Click 'Save' at the bottom.
    
    
47. Now, one last thing to do; we still have to make our front page the front page. Go to the 'Site information' menu (Administer > Site configuration > Site information).
48. Set the Default front page to: front
49. Click 'Save configuration' at the bottom.
50. Click the 'Home' menu item we added on the menu.
51. Voila, we have overrided the front page with a panel!
    
    

Here is the code for the monthly archive view, if you want to import it using the 'Import' tab at the top.




Here is the code for the front page view, if you want to import it using the 'Import' tab at the top:

If you want to import a starting point for the front page panel, use the following code by clicking the import tab at the top of the Panel pages module:

Panels 2: Overriding the node edit form

Panels 2 allows you to override the Node Edit Form. Why would you want to do that? Let's say, for example, you need to see all the comments on a node when you are editing it, and you also want the taxonomy editor on the right. Panels 2 allows you to configure the node edit form to be just the way you need it. The advantage is clear for developers and non-developers as well, as placing difference blocks in different places is all made through an easy to use UI.

Let's override the Edit form of all the story nodes and divide it into two columns. On the left will place the content form, and on the right the taxonomy editor as well as node comments.

1. Make sure you've got Panels 2 installed
2. Click Panel pages (Administer > Panels > Panel pages). At the top of the page, there are some tabs: click the 'Add' tab, which will bring you to a selection of possible panel layouts. Let's select a 'Two Column' panel.
   

   

3. Set the Panel name to: override_node_edit
4. Set the Page title to: Edit
5. Set the Path to: node/%/edit
   
   
6. Click next.
7. From the tabs at the top, click 'Context'.
8. In the arguments select list, select 'Node edit form' from the drop down menu and click 'Add argument'.
9. A window will pop up; find the heading 'Node types' and enable the checkbox next to 'Story'. This means the panel will grab (i.e. override) all the nodes edit form of the story content type. If your main content type that you want to change is not called 'Story', substitute the other name for 'Story' from this step on.
10. Press save at the bottom of the popup, and then save at the bottom of the page.
11. Select the 'Content' tab at the top.
12. On the left side, click the plus sign. A window should again pop up. Under the 'Form' heading, select 'General Form'. If you wish to restrict access to a specific user type, this window will allow you to (if you don't click any user types, access will not be restricted). Let's just click 'Add pane' for now. This inserts your standard node edit form onto the left half of the panel.
13. On the right side, click the plus sign. A window should again pop up. Under the 'Form' heading, select 'Node form categories'. This adds a taxonomy editor onto the right side.
14. Let's add the comments now. On the right side, click the plus sign again. Under the 'Node context' field, select 'Node comments'. Again, if you wish to restrict access, this window is the place to do that, but let's just click 'Add pane' for now. This inserts the comments on the node onto the right half of the panel.
    
    
15. Save your panel.
16. To test out the panel, go to some content, and click the 'Edit' tab at the top (the one you would normally click). Voila, Panels 2 has overridden the Node edit page!
    
    

If you comprehend the steps above, you can skip the manual labor and import the panels, using the import tab at the top:

Panels 2: Panels everywhere

In some cases, you may desire to use panels as the primary layout tool for your website.

Why all panels?

A typical situation is where you are leaning on panels heavily to override nodes, suppressing blocks/regions on panels pages, and perhaps have a panels_page as a front page. You're at the stage where themer has developed page.tpl.php and css that matches the design specs, and the site looks hot.

Now, go to a page that is not a panel, like node/add, and you realize that the work has just begun for pages with the traditional sidebar_left, sidebar_right mentality - you have all the extra printing in your page.tpl.php, or you need to have a separate page.tpl.php for panels and non-panels. Wouldn't it be easier to just have everything as a panel? You'd be practically finished.

Why not % override?

The obvious option is to create a panels_page with the path '%' to be the default path override. However, the result is a panels page missing the original content. This is because when Panels overrides the menu path, it obliterates any previous callback information with it's own. In the case of node pages, this is ok, Panels figures out the context and calmly renders the node data. But this requires specific code for each context.

A great thing about Drupal 6, is that it will be possible for Panels to use the new hook_menu_alter() to store the callback information about the page it is overriding. So on node/add (for example), panels will know to call node_add() for the $content. This is not possible in Drupal 5. Update: Panels 2 can do node/add, but I'll use this example for simplicity - see here.

Steps to override any page with a panel

If you are happy to configure things on a site by site basis, the steps to achieve this are pretty straight-forward:

1. Go into block configuration admin/build/block and create a new block. Call it CONTENT, and in the body type %CONTENT%. Make the block PHP format to avoid additional markup when it is displayed.
2. Go into your Panels admin, and add a new Panels Page. Call it DEFAULT, add whatever content you desire, but in one of the areas, add the block you created in the previous step.

3. Now open your template.php and put this code in _phptemplate_variables(), where $op = 'page'.
   
   
   <?php
     $current_panel = panels_page_get_current();
     if (!isset($current_panel->pid)) {
       // Load our default panel, call it by name.
       $panel = panels_page_view_page('DEFAULT', false);
       // Insert the actual content of the page using string replace.
       $panel = str_replace('%CONTENT%', $vars['content'], $panel);
       // Replace the page content with our altered panel.
       $vars['content'] = $panel;
     }
   ?>

Extra tweaks

It may be worth considering pushing extra $vars like $messages and $help into the panel as well - more information may follow.