Simple Views display switcher

Parent Feed: 

If you need a simple Views display switcher to toggle e.g between a list and a grid display of a view, there are a couple of plug & play options already.

Display Suite and Quick Tabs are modules which provide this functionality but they seem to be quite an overkill for a simple display switcher. View modes on the other hand seems to be exactly what is needed, however there is no stable version and the development one did not work for me.

Our use case dictates that the filters and the page number have to stay intact while switching to a different views display. The page will be reloaded, no AJAX magic here.

So let's create our own views display switcher. In order to do that you will obviously be needing a view with at least two page displays showing content in different ways. You will also have to put some code into your custom module. If in doubt, refer to the countless other tutorials.

Set up your view

In the view named [view] set the path of [display_1] to e.g [page/grid], the path to [display_2] to e.g [page/list].

Create callback function

Create a simple callback function which will provide the switch in ready-to-be-displayed HTML.

<?php
/**
* Gets HTML output of a switch which will switch between grid and list display of a view.
*/
function [mymodule]_get_views_display_switch() { $switch = l(t('Grid'), '[page/grid]', array(
   
'query' => drupal_get_query_parameters(), // This ensures the view will keep filter settings when switching the display.
   
'attributes' => array(
     
'class' => array('page-grid-switch') // Adding a css class for this link.
   
)
  ));
 
$switch .= ' | ';
 
$switch .= l(t('List'), '[page/list]', array(
   
'query' => drupal_get_query_parameters(),
   
'attributes' => array(
     
'class' => array('page-list-switch')))); // Adding CSS class for whole switch.
 
$switch = "
" . $switch . "
"
;
  return
$switch;
}
?>

Implement views hook

Implement hook_views_pre_view hook to add the switch to the view.

<?php
/**
* Implements hook_views_pre_view().
*/
function [mymodule]_views_pre_view(&$view, &$display_id, &$args) {
  if (
$view->name == '[view]' && $display_id == '[display1]' || $display_id == '[display_2]') { // Adds a display switcher to the header of a view.
    // 'footer' as second parameter will add the display switcher to the footer of the view instead.
   
$view->add_item($display_id, 'header', 'views', 'area', array('content' => [mymodule]_get_views_display_switch(), 'format' => 'full_html'));
  }
}
?>

This should do it. The l() function will make sure the link is marked active when it's active and drupal_get_query_parameters() makes sure the filters and current page stay intact while swichting.

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web