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

Last modified: November 14, 2008 - 00:21

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 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. If using Views 1, 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. Views 2 has an 'archive' view provided by default. Simply enable it (and skip the next step.)
  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'. In Drupal 6, these boxes are 'New All Views' and 'New Views Panes
  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' (Save and proceed) at the bottom.
  16. 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.
  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 in the left pane.
  29. Under the 'Views' heading, find and select the 'frontpage' view we added earlier.
  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 in the right pane.
  34. Under the 'Core blocks' heading, find and select 'Who's new'.
  35. Click 'Add pane' at the bottom.
  36. Click the plus sign in the right pane.
  37. Under the 'Core blocks' heading, find and select 'Who's online'.
  38. Click 'Add pane' at the bottom.
  39. Click the plus sign in the right pane.
  40. Under the 'Views' heading, find and select 'Monthly Archive'. If you are using Views 2, and have checked 'All Views', you should choose 'archive: Block'.
  41. Click the checkbox next to 'Link title to view'.
  42. Click 'Add pane' at the bottom.
  43. Click the plus sign in the right pane.
  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 overriden 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 (Views 1), if you want to import it using the 'Import' tab at the top:

  $view = new stdClass();
  $view->name = 'frontpage';
  $view->description = 'The basic front page view.';
  $view->access = array (
);
  $view->view_args_php = '';
  $view->page = TRUE;
  $view->page_title = '';
  $view->page_header = '';
  $view->page_header_format = '1';
  $view->page_footer = '';
  $view->page_footer_format = '1';
  $view->page_empty = '';
  $view->page_empty_format = '1';
  $view->page_type = 'teaser';
  $view->url = 'frontpage';
  $view->use_pager = TRUE;
  $view->nodes_per_page = '10';
  $view->sort = array (
    array (
      'tablename' => 'node',
      'field' => 'sticky',
      'sortorder' => 'DESC',
      'options' => '',
    ),
    array (
      'tablename' => 'node',
      'field' => 'created',
      'sortorder' => 'DESC',
      'options' => 'normal',
    ),
  );
  $view->argument = array (
    array (
      'type' => 'node_feed',
      'argdefault' => '2',
      'title' => 'Drupal - ',
      'options' => '',
      'wildcard' => '',
      'wildcard_substitution' => '',
    ),
  );
  $view->field = array (
  );
  $view->filter = array (
    array (
      'tablename' => 'node',
      'field' => 'promote',
      'operator' => '=',
      'options' => '',
      'value' => '1',
    ),
    array (
      'tablename' => 'node',
      'field' => 'status',
      'operator' => '=',
      'options' => '',
      'value' => '1',
    ),
  );
  $view->exposed_filter = array (
  );
  $view->requires = array(node);
  $views[$view->name] = $view;

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:

$page = new stdClass();
$page->pid = 'new';
  $page->name = 'front_page';
  $page->title = 'Home';
  $page->arguments = array();
  $page->contexts = array();
  $page->relationships = array();
  $page->access = array();
  $page->path = 'front';
  $page->css_id = '';
  $page->css = '';
  $page->no_blocks = '0';
  $page->menu = '1';
  $page->menu_tab = '0';
  $page->menu_tab_weight = '-10';
  $page->menu_title = '';
  $page->menu_tab_default = '0';
  $page->menu_tab_default_parent_type = 'tab';
  $page->menu_parent_title = '';
  $page->menu_parent_tab_weight = '0';
$display = new stdClass();
$display->did = 'new';
$display->name = NULL;
$display->layout = 'flexible';
$display->layout_settings = array (
  'width_type' => '%',
  'percent_width' => '100',
  'rows' => '1',
  'row_1' =>
  array (
    'columns' => '2',
    'width_1' => '75',
    'width_2' => '25',
    'names' =>
    array (
      0 => 'Left',
      1 => 'Right',
    ),
  ),
  'sidebars' =>
  array (
    'left' => 0,
    'left_width' => 200,
    'right' => 0,
    'right_width' => 200,
    'width_type' => 'px',
  ),
);
$display->panel_settings = array (
  'style' => 'default',
  'style_settings' =>
  array (
  ),
  'edit_style' => 'Edit style settings',
  'individual' => 0,
  'panel' =>
  array (
    'row_1_1' =>
    array (
      'style' => '',
      'edit_style' => 'Edit style settings',
    ),
    'row_1_2' =>
    array (
      'style' => '',
      'edit_style' => 'Edit style settings',
    ),
  ),
  'did' => '35',
);
$display->content = array();
$display->panels = array();
$pane = new stdClass();
  $pane->pid = 'new-1';
  $pane->panel = '';
  $pane->type = '';
  $pane->subtype = '';
  $pane->access = array();
  $pane->configuration = NULL;
$display->content['new-1'] = $pane;
$display->panels[''][0] = 'new-1';
$pane = new stdClass();
  $pane->pid = 'new-2';
  $pane->panel = 'row_1_1';
  $pane->type = 'views';
  $pane->subtype = 'frontpage';
  $pane->access = array();
  $pane->configuration = array (
    'context' =>
    array (
      0 => 'empty',
    ),
    'override_title' => 0,
    'override_title_text' => '',
    'css_id' => '',
    'css_class' => '',
    'view' => 'frontpage',
    'type' => 'embed',
    'link_to_view' => 1,
    'more_link' => 1,
    'feed_icons' => 0,
    'use_pager' => 0,
    'pager_id' => 1,
    'nodes_per_page' => '10',
    'offset' => '',
    'panel_args' => 0,
    'args' => '',
    'url' => '',
  );
$display->content['new-2'] = $pane;
$display->panels['row_1_1'][0] = 'new-2';
$pane = new stdClass();
  $pane->pid = 'new-3';
  $pane->panel = 'row_1_2';
  $pane->type = 'block';
  $pane->subtype = 'user-2';
  $pane->access = array();
  $pane->configuration = array (
    'override_title' => 0,
    'override_title_text' => '',
    'css_id' => '',
    'css_class' => '',
    'module' => 'user',
    'delta' => '2',
    'block_visibility' => 0,
    'block_settings' =>
    array (
      'user_block_whois_new_count' => '5',
    ),
  );
$display->content['new-3'] = $pane;
$display->panels['row_1_2'][0] = 'new-3';
$pane = new stdClass();
  $pane->pid = 'new-4';
  $pane->panel = 'row_1_2';
  $pane->type = 'block';
  $pane->subtype = 'user-3';
  $pane->access = array();
  $pane->configuration = array (
    'override_title' => 0,
    'override_title_text' => '',
    'css_id' => '',
    'css_class' => '',
    'module' => 'user',
    'delta' => '3',
    'block_visibility' => 0,
    'block_settings' =>
    array (
      'user_block_seconds_online' => '900',
      'user_block_max_list_count' => '10',
    ),
  );
$display->content['new-4'] = $pane;
$display->panels['row_1_2'][1] = 'new-4';
$pane = new stdClass();
  $pane->pid = 'new-5';
  $pane->panel = 'row_1_2';
  $pane->type = 'views';
  $pane->subtype = 'archive';
  $pane->access = array();
  $pane->configuration = array (
    'context' =>
    array (
      0 => 'empty',
    ),
    'override_title' => 0,
    'override_title_text' => '',
    'css_id' => '',
    'css_class' => '',
    'view' => 'archive',
    'type' => 'embed',
    'link_to_view' => 1,
    'more_link' => 0,
    'feed_icons' => 0,
    'use_pager' => 0,
    'pager_id' => 1,
    'nodes_per_page' => '10',
    'offset' => '',
    'panel_args' => 0,
    'args' => '',
    'url' => '',
  );
$display->content['new-5'] = $pane;
$display->panels['row_1_2'][2] = 'new-5';
$pane = new stdClass();
  $pane->pid = 'new-6';
  $pane->panel = 'row_1_2';
  $pane->type = 'block';
  $pane->subtype = 'comment-0';
  $pane->access = array();
  $pane->configuration = array (
    'override_title' => 0,
    'override_title_text' => '',
    'css_id' => '',
    'css_class' => '',
    'module' => 'comment',
    'delta' => '0',
    'block_visibility' => 0,
  );
$display->content['new-6'] = $pane;
$display->panels['row_1_2'][3] = 'new-6';
$page->display = $display;
$page->displays = array();

Nope

danorton - December 8, 2008 - 22:50

All worked fine for me until step #49 (maybe these instructions shouldn't have all 51 steps on the same page), where I get "The path 'front' is either invalid or you do not have access to it."

Got it

danorton - December 8, 2008 - 22:59

I took "You don't need all of the Panels modules" at its word.

I'm using D6 and these instructions would be better either if they indicated that all Panels modules must be enabled, else if they identified precisely which modules must be enabled.

same with me..:-(

saurabhi - December 29, 2008 - 17:20

same thing happened with me!
please help! I have enabled all the panels modules!

=========

First, I thought views is the toughest/hardest module to work with, but then I installed panels! ;-)

got it! ;-)

saurabhi - December 29, 2008 - 17:26

those who are getting this error, should unable 'front' module (If they have installed it) and then try again.

=========

First, I thought views is the toughest/hardest module to work with, but then I installed panels! ;-)

You should type "frontpage"

Charly75 - January 12, 2009 - 14:07

You should type "frontpage" instead of "front".

Thanks for the tips but I can't configure my layout settings !

Re: You should type "frontpage"

anselmbradford - March 4, 2009 - 00:39

I believe using "frontpage" would place the view on the front page, not the panel that uses that view. Using this tutorial the path to the view is set as "frontpage" while the path to the panel is set as "front" ... see your settings in the admin view and panels areas.

too difficult to navigate

alex.ihlo - January 25, 2009 - 16:16

too difficult to navigate through this tutorial with my version of Views. just FYI, the tutorial looks very nicely made though.

Alexander Ihlo

How I can use panels and

Slobodan - February 22, 2009 - 10:18

How I can use panels and views for one type of content e.g story?

Got to #3 and there is no

derfz - April 9, 2009 - 03:07

Got to #3 and there is no "add" button under "frontpage" only "enable". There is an add button at the top of the page.

Where can I find full instructions (tutorials) for the current version?

Thanks

Fred

Arguments to be sent to a view

kk-mini-pw - April 16, 2009 - 07:02

Hi,
Panels are great and are a very helpful tool, however I have problems with sending arguments to an embedded view. I fill in the filed about arguments and put both %0 and %1 but none of them seems to be really passed to the view. The view itself works perfectly alone, outside the panel, consuming arguments and giving proper output.

Thanks for help in advance.
KK

 
 

Drupal is a registered trademark of Dries Buytaert.