Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Simple Views display switch

Parent Feed: 

If you need a simple Views display switch 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 switch. 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.

How it needs to work

Our use case dictates that while switching a display, the view needs to retain the exposed filter values and page number. The page will be reloaded, no AJAX magic here.

Views display switch

So let's create our own views display switch. 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.

  1. /**

  2.  * Gets HTML output of a switch which will switch between grid and list display of a view.

  3.  */

  4. function [mymodule]_get_views_display_switch() {

  5. $switch = l(t('Grid'), '[page/grid]', array(
  6. 'query' => drupal_get_query_parameters(), // This ensures the view will keep filter settings when switching the display.

  7. 'class' => array('page-grid-switch') // Adding a css class for this link.
  8. )

  9. ));

  10. $switch .= ' | ';

  11. $switch .= l(t('List'), '[page/list]', array(
  12. 'query' => drupal_get_query_parameters(),

  13. 'class' => array('page-list-switch')
  14. )

  15. ));

  16. // Adding CSS class for whole switch.

  17. $switch = "

    "</span> . $switch . "

    "
    ;
  18. return $switch;

  19. }

Implement views hook

Implement hook_views_pre_view hook to add the switch to the view.

  1. /**

  2.  * Implements hook_views_pre_view().

  3.  */

  4. function [mymodule]_views_pre_view(&$view, &$display_id, &$args) {

  5. if ($view->name == '[view]' && $display_id == '[display1]' || $display_id == '[display_2]') {

  6. // Adds a display switch to the header of a view.

  7. // 'footer' as second parameter will add the display switch to the footer of the view instead.

  8. $view->add_item($display_id, 'header', 'views', 'area', array('content' => [mymodule]_get_views_display_switch(), 'format' => 'full_html'));
  9. }

  10. }

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 exposed filters and current page are retained while swichting.

Update

Apparently there is now a Drupal 8/9 module which implements these solutions: views_display_switch. I have not tested it, but have a go and let me know how well it works.

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