Thanks for this nice module.

I tried something like this but it doesn't work.

<div id="isotope-options">
  <select id="filters" class="option-set clearfix" data-option-key="filter">
    <?php foreach ( $rows as $id => $row ): ?>
      
      <?php 
      // remove characters that cause problems with classes
      // this is also do to the isotope elements
      $dataoption = trim(strip_tags(strtolower($row)));
      $dataoption = str_replace(' ', '-', $dataoption);
      $dataoption = str_replace('/', '-', $dataoption);
      $dataoption = str_replace('&amp;', '', $dataoption); 
      ?>
      <option value="#filter-<?php print $dataoption; ?>" data-option-value=".<?php print $dataoption; ?>"><?php print trim($row); ?></option>
      
    <?php endforeach; ?>
  </select>  
</div>

Comments

kreynen’s picture

kreynen commented
Status: Active » Closed (works as designed)

You can use any type or form element to apply a filter, but something needs to trigger the change. When using id="isotope-options" the isotope.js is converting the links in that div for you. When you are building your own filter, you need to trigger that yourself. Here's some code snippets from NAR's site for the Isotope filter as a select list that we use for mobile users...

      $term = taxonomy_term_load($flag->content_id);
      $list[$flag->content_id] = $term->name;

      $output .= '<div class="mobile-isotope-filters">';
      $output .= '<select id="mobile-isotope-select">';
      //adding infocus
      $output .= '<option value=".in-focus">Hot Topics</option>';
      foreach ($list as $key => $item) {
        $output .= '<option value=".' . $key . '">' . $item . '</option>';
      }
      $output .= '</select>';
      $output .= '</div>';

That just puts the options into a select list. We then need some custom JQuery to watch that select list for a change...

jQuery(document).ready(function() {
 
  jQuery('#mobile-isotope-select').change(function() {
    
    var catergory = jQuery("option:selected", this).val();
    
    if(catergory == '.in-focus') {
      //alert(linkstring.search(/in-focus/i));
      jQuery('.isotope-in-focus').show('slow');
      jQuery('.isotope-topics').hide('slow');
    } else {
      
      jQuery('.isotope-in-focus').hide('slow');
      jQuery('.isotope-topics').show('slow');
    }   
    
    jQuery('#isotope-container').isotope({filter: catergory});
  });
});
jalapi’s picture

jalapi commented
Issue summary: View changes

Hi, I'm also trying get Views Isotope to create a select list for the filter block instead of a UL. Can you provide more direction on where to add the custom code that you have mentioned above? I have successfully been able to create a custom select list by writing some code within a block but I need to be able to dynamically omit any terms that are not present in the display items. Any further direction that you can provide for making the modification to the views filter block would be much appreciated.