Show views display based on exposed filter value

Question

I've a views with 2 different displays which are Picture View and List View, both sharing the same exposed filter(the query string).

I have an exposed filter block, one of the exposed filter(Radio Button) is View by: 1) Picture view 2) List View

How to show the respective views result based on user selection (View By filter)?

Updates: My intention is to let the user to choose which Display she wants to see before clicking the Apply/Search button of the exposed filter block. There is only ONE display at a time, no tabbed/links for multiple display option. Solution similar to Views Mode module is not i looking for.

Answer 1

I find out two methods here.

Method 1: Use set_display function

function mymodule_views_pre_view(&$view, &$display_id, &$args)
{
 //To get the query string to find out the field value
$query = drupal_get_query_parameters($_GET, array('q', 'page'));

if( $query['viewby'] == 'photo')
 {
  $view->set_display('view_photo');
 }
}

Method 2: drupal_goto (if the two displays are not sharing the same exposed filter)

function mymodule_views_pre_view(&$view, &$display_id, &$args)
{
 //To get the query string to find out the field value
$query = drupal_get_query_parameters($_GET, array('q', 'page'));

if( $query['viewby'] == 'photo')
 {
  //build up the the query string here
 $query['filter_a'] == 'xxx';
 drupal_goto('viewphoto_path',array('query' => $query));
 }
}

To my case, i used Method 2.

I am really new to drupal, and not sure are these methods will cause any problem or not. Let me know if they are ok.

Answer 2

May be Views Modes module can help you. It works different than you want, but this is an alternative method.

A Drupal Views display plugin which provides alternate display modes that can be switched to for a single View. This allows exposed filter parameters or contextual filters to be kept active while switching display mode.

Answer 3

I guess this could help you getting ride of the problem,

I have created two view displays (as blocks)

• Block name: title_image (Custom Themed with views-view-field--custom-view-theming--block-1--title.tpl.php)
• Block name: image (Custom Themed with views-view-field--custom-view-theming--block-2--field-image.tpl.php)

views-view-field--custom-view-theming--block-1--title.tpl.php

     <!-- Themed with node title, image and a small description -->

    <div class="main-content" style="float: left; clear: both;margin-bottom: 30px;">
    <a href="/?q=node/<?php print_r($row->nid);?>" title="<?php print_r($row->node_title);?>" style="float: left; padding-right: 20px;">
      <img width="170" class="bordered-image -align" title="<?php print_r($row->node_title);?>" src="sites/default/files/field/image/<?php print $row->field_field_image[0]['raw']['filename']; ?>" /> 
    </a>
    <h2>
     <a alt="" title="<?php print_r($row->node_title);?>" href="/?q=node/<?php print_r($row->nid);?>"> <?php print_r($row->node_title);?> </a>
    </h2>
    <div class="article-additional-info">
      <?php if($row->field_body) print $row->field_body[0]['raw']['value']; ?>
    </div>
    </div>
    <div style="clear: both;"></div>

views-view-field--custom-view-theming--block-2--field-image.tpl.php

     <!-- Themed with only node  image -->

    <div class="main-content image-only" style="float: left; clear: both;margin-bottom: 30px;">
        <img width="170" class="bordered-image -align"  src="sites/default/files/field/image/<?php print $row->field_field_image[0]['raw']['filename']; ?>" /> 
    </div>
    <div style="clear: both;"></div>

Both the contents are themed separately now we need to couple both the tpl files in a common place. Since both the displays are created as blocks we can add a comon wrapper in the following tpl views-view--custom-view-theming--block.tpl.php.

views-view--custom-view-theming--block.tpl.php

<div class="tab"> <!-- class="tab" is a wrapper for each tab-->
<input type="radio" name="tab-group" <?php if ($view->current_display == "block_1") print_r("checked")?>>
<!-- The above radio button is used to switch the tab , here we are controlling through css no js required-->
<label for="tab-<?php print_r($view->current_display);?>">Tab One<?php print_r($view->current_display);?></label>


<!-- The following are the common variables / template served by drupal-->       
<div class="<?php print $classes;?>">
  <?php print render($title_prefix); ?>
  <?php if ($title): ?>
    <?php print $title; ?>
  <?php endif; ?>
  <?php print render($title_suffix); ?>
  <?php if ($header): ?>
    <div class="view-header">
      <?php print $header; ?>
    </div>
  <?php endif; ?>

  <?php if ($exposed): ?>
    <div class="view-filters">
      <?php print $exposed; ?>
    </div>
  <?php endif; ?>

  <?php if ($attachment_before): ?>
    <div class="attachment attachment-before">
      <?php print $attachment_before; ?>
    </div>
  <?php endif; ?>

  <?php if ($rows): ?>
    <div class="view-content">
      <?php print $rows; ?>
    </div>
  <?php elseif ($empty): ?>
    <div class="view-empty">
      <?php print $empty; ?>
    </div>
  <?php endif; ?>

  <?php if ($pager): ?>
    <?php print $pager; ?>
  <?php endif; ?>

  <?php if ($attachment_after): ?>
    <div class="attachment attachment-after">
      <?php print $attachment_after; ?>
    </div>
  <?php endif; ?>

  <?php if ($more): ?>
    <?php print $more; ?>
  <?php endif; ?>

  <?php if ($footer): ?>
    <div class="view-footer">
      <?php print $footer; ?>
    </div>
  <?php endif; ?>

  <?php if ($feed_icon): ?>
    <div class="feed-icon">
      <?php print $feed_icon; ?>
    </div>
  <?php endif; ?>

</div>
</div> <!-- END class="tab" is a wrapper for each tab-->

Add the following css :

    /** Tabbing Starts here**/

/** Drupal region class .region-content**/
    .region-content {
      position: relative;   
      min-height: 200px; /* This part sucks */
      clear: both;
      margin: 35px 0 25px;
      background: white;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: #eee; 
      padding: 10px; 
      border: 1px solid #ccc; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
      top: -29px;
      -webkit-transition: background-color .17s linear;
    }
    .tab [type=radio] {
      display: none;   
    }
/** Drupal region class .view-custom-view-theming **/
    .view-custom-view-theming {
      position: absolute;
      top: 14px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc; 
      -webkit-transition: opacity .6s linear;
      opacity: 0;
    }
    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .view-custom-view-theming {
      z-index: 1;
      opacity: 1;
    }

Sample output :