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

Last modified: September 13, 2009 - 01:01

When you have tools as useful as Views and Panels 3, 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. Please note that the screenshots are from Panels 2, but are similar to Panels 3.

  1. The first thing to do is make sure you have both Views and Panels 3 installed. You don't need all of the Panels modules, but it's easiest to enable them all at once.
  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'. Note that this screenshot is for Views 1; the Views 2 screen is different, but the frontpage view is still available.
  4. Click 'Save' at the bottom.
  5. Views 2 has an 'archive' view provided by default. Simply enable it.
  6. Click 'Save' at the bottom.
  7. Now, on to the panel. 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. (Administer > Site Building > Panels > Settings > Panel pages)
  8. Make sure everything under the 'New content behavior' heading is checked, especially the checkboxes next to 'New All Views' and 'New Views Panes
  9. Save.
  10. Now, to create the panel. Click Panel pages (Administer > Site Building > Panels > Panel Page).
  11. Set the Name to: front_page
  12. Set the Administrative title to: Home
  13. Set the Path to: front (Alternately, you can check the "Make this your home site page" checkbox.)
  14. Click 'Continue' at the bottom.
  15. Let's select the 'Flexible' layout, which allows us to create our own layout.
  16. Click Continue.
  17. The 'Layout settings' tab that you are brought to looks intimidating, but we're just making a couple changes. One of the benefits of selecting a flexible layout is being able to easily manipulate your panel to have any kind of configuration.
  18. Now, we want some custom dimensions for the panel, so we'll need to invole the Layout designer. Click the "Show Layout designer" button.
  19. In the Region menu, select Region settings, and change the region title to "Left".
  20. Move up a 'box' to the row. In the Row menu, select "Add region to right". Title this region "Right".
  21. Use the slider bar to set the width to 80 on the left, 20 on the right.
  22. Click Finish.
  23. Now we need to add a menu item. Click the 'Menu' tab on the left.
  24. Click the checkbox next to 'Normal menu entry'.
  25. Set the Weight to: -10 and the Title to 'Home'.
  26. Click 'Update' at the bottom.
  27. Click the 'Content' tab on the left.
  28. Click the gear icon in the left pane.
  29. Under the 'Views' heading, find and select the 'frontpage' view we added earlier.
  30. Select the display you wish to use (try page if it's available.)
  31. Click Continue.
  32. Click the checkbox next to 'Link title to view'.
  33. Click the checkbox next to 'Provide a "more" link that links to the view'.
  34. Click 'Finish' at the bottom.
  35. Click the gear icon in the right pane.
  36. Under the 'Activity' heading, find and select 'Who's new'.
  37. Click 'Finish' at the bottom.
  38. Click the gear icon in the right pane.
  39. Under the 'Activity' heading, find and select 'Who's online'.
  40. Click 'Finish' at the bottom.
  41. Click the gear icon in the right pane.
  42. Under the 'Views' heading, find and select 'archive'. Use the block display.
  43. lick Continue
  44. Click the checkbox next to 'Link title to view'.
  45. Click 'Finish' at the bottom.
  46. Click the gear icon in the right pane.
  47. Under the 'Activity' heading, find and select 'Recent comments'.
  48. Click 'Finish' at the bottom.
  49. Click 'Save' at the bottom.
  50. 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).
  51. Set the Default front page to: front
  52. Click 'Save configuration' at the bottom.
  53. Click the 'Home' menu item we added on the menu.
  54. Voila, we have overriden the front page with a panel!


Cannot see the "Views" heading at step 29

mattyoung - September 7, 2009 - 03:13

> 29. Under the 'Views' heading, find and select the 'frontpage' view we added earlier.

There is no "Views' heading that I can see. I click on the gear icon and all I can see is:

Activity
Menus
Miscellaneous
Page elements
Widgets
Existing node
New custom content

I've enable both the front page and archive views.

A few revisions

Sheldon Rampton - September 20, 2009 - 00:20

In working through this tutorial, I've noticed a few things that should be changed to make it more clear:

Currently step 1 says, "The first thing to do is make sure you have both Views and Panels 3 installed." I recommend revising this to be more precise about which modules are needed: "First, install the Views, Panels 3 and Chaos Tools projects, and make sure you have the necessary modules enabled. The necessary modules from the Views project are Views and Views UI. From the Chaos tools suite, you will need to enable the Chaos tools, Views content panes, and Page manager modules. From the Panels project, enable the Panels module. Also, make sure the Comment module from Drupal core is enabled."

Step 3 uses a screenshot from Views 1. Since Panels 3 is only compatible with Views 2, the screenshot should be updated. Also, the written instructions refer to interface details that pertain to Views 1 and not Views 2. Instead of "On the bottom, under the 'Default Views' heading, find the 'frontpage' default view, and click 'Add'," it should say, "Find the 'frontpage' default node view and click its 'Enable' link."

Step 11 should be reworded from "Set the Name to: front_page" to "Set the Machine name to front_page."

Step 17 is unnecessary. It says, "The 'Layout settings' tab that you are brought to looks intimidating, but we're just making a couple changes. One of the benefits of selecting a flexible layout is being able to easily manipulate your panel to have any kind of configuration." Actually, I didn't find the page that I was brought to intimidating. It's a very simple-looking form. Also, it isn't named "Layout settings." It's named "Basic settings » Choose layout » Panel content." In any case, step 17 isn't a "step." It doesn't tell the user to DO anything. It's simply commentary intended to reassure the reader and explain why the next few steps are necessary.

In step 18, "invole" should be changed to "involve."

Step 28 should be changed from "Click the gear icon in the left pane" to "Click the gear icon in the left pane and select 'Add content.'"

Step 38 should be changed from "Click the gear icon in the right pane" to "Click the gear icon in the right pane and select 'Add content.'"

Step 41 should be changed from "Click the gear icon in the right pane" to "Click the gear icon in the right pane and select 'Add content.'"

In step 43, "lick" should be changed to "Click."

Step 46 should be changed from "Click the gear icon in the right pane" to "Click the gear icon in the right pane and select 'Add content.'"

One final thought: I think this tutorial would work better as a video than as a written narrative.

----------------
IT consultant, web designer, writer and researcher
http://www.sheldonrampton.com/portfolio

~

mattyoung - September 20, 2009 - 01:16

>The necessary modules from the Views project are Views and Views UI. From the Chaos tools suite, you will need to enable the Chaos tools, Views content panes, and Page manager modules

Views content panes is what I need.

One small hiccup for me: after I got all working and preview showing up, when I visit my front page, it's blank. Turns out I have both the path set to '/front' and "This is your site home page" checked. After I uncheck "This is your site home page", it all worked.

Thanks!

Thank you

lhugg - September 28, 2009 - 16:52

Thanks for adding that detail. I was going crazy because I didn't have Views Content Page enables on Chaos tools. Even a modicum of documentation goes a long way.

14.Click 'Continue' at the

runeveryday - October 15, 2009 - 03:09

14.Click 'Continue' at the bottom.
when i did this step,the page was always waitting.could't advance to the 15 step.why?anybody happen to this? any help would be appreciated!

Question

cobraw3 - October 21, 2009 - 21:20

On step 11 where you say set Name to front_page, when I get to the panel pages which is:

/admin/build/pages/add --> this seems correct

Anyways when I get there it asks for an Administrative title and Machine name. Step 11 says the name. Is this Machine name?

 
 

Drupal is a registered trademark of Dries Buytaert.