Dynamic resizing of elements.

The desire for more option that can be configured within Views far exceeds the time I have to contribute to this module. Client work funded the initial development and while I continue to use views_isotope in projects, I don't need a UI to add these options and I'm overwhelmed with other projects.

Anyone interested in stepping up to co-maintain this project? I'd rather put the limited time I have into helping get another developer familiar with git, Drupal.org packaging, and testing updates.

Here's how I got it to work... but I don't have time to write patches for it. ;) But I hope it helps.

I added a new taxonomy vocabulary with "Small, Default, Medium, Large" as terms and added the vocabular to the content types that I wanted to have in the Isotope view. I added classes to the css file that matched the terms i.e., .isotope-element.large, etc. Then add the new term to the view and specify the class as isotope-class. Then I duplicated the filter variable in the following two steps and bingo, I can have unlimited sizes of tiles.

Step 1
I added the following code to views_isotope.theme.inc at line 55

  /* ISOTOPE SIZE CLASS */
  $vars['isotope_sizes'] = array();
  
  // Extract isotope size fields.
  $filters = array();
  foreach ($fields as $field => $data) {
    if (strpos($data->options['element_class'], 'isotope-size') !== FALSE)
      $filters[] = $field;
  }
  
  // Build class for size.
  foreach ($handler->rendered_fields as $index => $row) {
    foreach ($filters as $field) {
      if (isset($row[$field])) {
        $value = $row[$field];
        
        if (strstr($value, ',')) {
          // Check for commas and treat as an array for list of taxonomy terms.
          $classes = explode(',', $value);
          foreach ($classes as $class) {
            if (isset($vars['isotope_sizes'][$index]))
              $vars['isotope_sizes'][$index] .= ' ' . strtolower(drupal_clean_css_identifier(trim($class)));
            else
              $vars['isotope_sizes'][$index] = strtolower(drupal_clean_css_identifier(trim($class)));
          }
        } else {
          // Treat as single value.
          if (isset($vars['isotope_sizes'][$index]))
            $vars['isotope_sizes'][$index] = strtolower(drupal_clean_css_identifier($value));
          else
            $vars['isotope_sizes'][$index] = strtolower(drupal_clean_css_identifier($value));
        }
      }
    }
  }

Step 2
I added the $var with the class to views-isotope.tpl.php

<?php
/**
 * @file views-isotope.tpl.php
 * Default simple view template to display a list of rows.
 *
 * @ingroup views_templates
 */
?>
<div id="isotope-container">
  <?php
    $count = 0;
    foreach ($rows as $row):
  ?>
    <div class="isotope-element <?php print $isotope_sizes[$count]; ?> <?php print $isotope_filter_classes[$count]; ?>" data-category="<?php print $isotope_filter_classes[$count]; ?>">
      <?php print $row; ?>
    </div>
  <?php
      $count++;
    endforeach;
  ?>
</div>	

This is a valid feature request against the latest version.

After further thought, this is not something that will ever be practical to put into the module. It is really a site-specific use case. If you want it to expand, first you need a css class that defines the larger "expanded" size. Then you just add a little bit of your own JS (e.g. in your theme) that does something like this:

        $('.isotope-element').on('click', function(e) {
          $(this).addClass('large');
          $('.isotope-container').isotope('layout');
        });

For help with sizing, take a look through http://isotope.metafizzy.co/layout.html.

Hi @Chris Gillis,

I like this module a lot because it combines all possibility's of Isotope, Masonry, Packery, Imagesloaded,... together.

Just to make it more complete, it would be very handy to just have a setting where you can enter an extra row class on top of the isotope-element class.
If that setting would also accept tokens from fields that are used in the view, is becomes very dynamic!

Then you could add a field to your content type that defines the width for example width1, width2, width3, etc...
=> in ccs you can define all those width values (for example width1 = 10%, width2=20%,...etc)
Over at the masonry_views module, the do it like that and also in the packery docs (http://packery.metafizzy.co/#css) there is an example like this:

HTML

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

CSS

.grid-item { width: 25%; }
.grid-item--width2 { width: 50%; }

Maybe something to think about?

Hi Maxplus,

That's a nice idea. Could you please open a new feature request over at https://www.drupal.org/project/issues/isotope

Thanks,
Chris

Suggestion from #8 being handled at #2709103: Adding arbitrary css classes to elements