2

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.

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.

0

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.

  • Thanks for your suggestion. I've tried this module before this, not exactly what i want. The view has to be executed then only you can choose other view mode. I wish to choose the view mode before that. – Kent Dec 11 '13 at 12:06
  • @user20395 drupal.stackexchange.com/questions/65928/… - this discussion? – xurshid29 Dec 11 '13 at 12:10
  • nope. this is more to the Views Mode solution. – Kent Dec 11 '13 at 12:16
  • @user20395 I have never faced with such a task. Let me know if you find a solution:) – xurshid29 Dec 11 '13 at 12:23
  • hi please take a look of my answer. – Kent Dec 13 '13 at 5:09
0

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 :

Screen shot on view tabbing

  • Thanks for your answer, I believe you misunderstood my question. Please see the updates of my question. Thanks! – Kent Dec 12 '13 at 5:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.