Masonry layout

I absolutely love the module. I watched the beardcast and on my clean install, everything worked perfectly. I was wondering as well, if there is a way, even without it being built into the module, to perform the masonry grid layout. I am very interested in this feature, and would gladly appreciate any help or direction there. I can also provide any feedback if necessary for creating this functionality in the module.

@Greg Adams integrated layout mode options in a module in his and asked about merging project back in October #1309430: merging projects. I was buried in work at the time and didn't respond right away. I haven't been able to connect with Greg about collaborating, but manually changing the layout option in the javascript is an option until I have time to add a UI.

http://isotope.metafizzy.co/docs/layout-modes.html

$('#container').isotope({
  masonry: {
    columnWidth: 240
  }
});

http://drupalcode.org/project/views_isotope.git/blob/refs/heads/7.x-1.x:...

Then you'd need to remove the CSS setting specific sizes for the isotope-elements. Sorry I don't have time to add this ATM, but I'm willing to review any patches submitted.

Hello Kreynen,

i like Your module and i would like to implement manually the "one big element"-layout, which @Greg Adams posted here as code-snippets.
But i have no Idea, HOW and WHERE to implement. Could You give me some advice?

Thanks, Adam

Yes. I would LOVE to be able to use masonry layout with this too. I'll look into the js/ccs edits you mentioned kreynen in the mean time.

OK. not following the js edit.... I don't see a layoutMode set in your js. Do I need to add that setting variable or edit a line already in there, and if so what line? Thanks in advance.

OK OK, figured it out. in "views_isotope/views_isotope.js" around line 6, change:

 $container.isotope({
    itemSelector: '.isotope-element',
    //filter: '.nothing'
  });

to:

$container.isotope({
    itemSelector: '.isotope-element',
    layoutMode: 'masonry',
    masonry: {
            columnWidth: 240
    }
    //filter: '.nothing'
  });

then in "views_isotope/views_isotope.css" around line 83, change:

.isotope-element {
  width: 150px;
  height: 150px;
  margin: 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #bebebe;
  color: #fff;
}

to:

.isotope-element {
  width: 220px;
  margin: 10px 10px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #bebebe;
  color: #fff;
}

Obviously you can set the column width to something else, and style it how ever you want (margin, no margin, etc.)

@adam1

As for the example where the clicked item grows, here is what you can do. Add the same edits from my post above about masonry, AND in the .js file after line 4 ADD:

$container.addClass('clickable');

and before the close of the file which looks like:

  });
})(jquery);

ADD THIS:

// change size of clicked element
    $container.delegate('.isotope-element', 'click', function() {
       // first remove all large classes
      $container.find('.large').each(function(){
        $(this).toggleClass('large');
      });   
        // then we can toggle large on the selected item
        $(this).toggleClass('large');
        $container.isotope('reLayout');
    });

AND edit .css file by ADDING:

.isotope-element.large {
  width: 460px;
  margin: 10px 10px;
}
.clickable .isotope-element {
    cursor: pointer;
}

NOTE: This won't make the first element large, only the clicked ones. This module doesn't use the views row structure like the example you shared, so that won't work without restructure.

AND ONCE AGAIN: css style the blocks however you want. you may need to mess with widths and add heights to get the grid to layout the way you want it.

I hope this helps!

Thanks,
that helps!

The workaround in #7 works for me and it started to look like this: http://cl.ly/0U3w1u0m0l0J092X0s1C – there's no error in the console.

Now I would LOVE to have a resizable grid just like the main idea of Isotope in http://isotope.metafizzy.co/demos/layout-modes.html – is that possible and how? Did I do something wrong and it should resize it anyway but I missed a setting/patching?

Thanks in advance and for all your superb work!

/* edited my bad english... ;) */

resizing is the feature of the containing div and that is often influenced by the fluid/fixed/responsive configuration of the theme. Here is an example of using Isotope without the filter on an Omega sub-theme to get the resizing http://accessvision.tv/videos

You'll notice that as you adjust the width of the browser the grid adjusts the columns from 4 in the wide media query down to 2 for the mobile query.

I do want to make the different Isotope layout options something that can be configured in the View vs. having to edit the CSS.

I think the best way to achieve that is to leave the .js/.css file as the default, but use a dynamically generated CSS if the View uses another layout option. IMHO that would give everyone the most flexibility, be backwards compatible, be designer friendly (no hook overrides), and offer higher performance when using the static .js/.css file.

Anyone have thoughts/concerns with that approach?

@maerys, if you leave off the width setting in the css .isotope-element, and set the masonry columnWidth: to the smallest width you want, you should be able to achieve the mixed width thing in the main example you posted. The widths then would be dictated by the width of the contained content. You can use imagecache to set different image styles to achieve varying image size. (ie. each tag has a different width, or horizontal vs vertical displays).

@kreynen, yeah, that seems like the general direction. you may be able to set a base css file, then create appending css files per layout mode that are called via "format setting" in views. same with the js

How embarrassing... of course... the theme! Thanks for giving me this hint in such a polite manner! You guys rock!

May I add something ... don't know if it's the right place but: I could get all those things working except one little issue: When I load the page created by the isotope view nothing happens. When I enlarge the window the isotopes were appearing. So I changed the jquery stuff at the start and in the end of the views_isotope.js and now it works:

START
(function($) { $(document).ready(function() {

to

(function ($, Drupal, window, document, undefined) { jQuery(document).ready(function() {

END
}); })(jQuery);

to

}); })(jQuery, Drupal, this, this.document);

When calling an isotope-view, how can i show a predefined filtervalue instead of the default "*" (all) value?

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.

Note on images being loaded in view and screwing up the masonry (overlapping).

Do this: Download the imagesLoaded plugin referenced here: http://masonry.desandro.com/docs/intro.html
You can include anyway you would usually include js. For me I created a js folder INSIDE views_isotope and put the minified imagesLoded lib in there, then opent the .info file and included a reference to it:
files[] = js/jquery.imagesloaded.min.js

Then wrap thie $contaner.isotope({...}) with $container.imagesLoaded(function(){ ... });

Like this: $container.imagesLoaded(function(){
$container.isotope({
itemSelector: '.isotope-element',
//filter: '.nothing'
// SH Start
/*
masonry: {
columnWidth: 200
}
*/
// SH End*/
});
});

You can tell I commented out the masonry part... perhaps because I also have drupal masonry module loaded and that was doing the masonry for me... can't honeslyt remember because of all the things I have been messing with. The key is to call the imagesLoaded function.

SWEET!

This is some really great stuff!
@kreynen: thanks for all your work - the beardcast is awesome too.
@Greg Adams: if you're listening in on the Views isotope issue cue, thanks for reaching out, and for sharing your efforts.
It's a shame you two haven't been able to connect yet. To the others like @ruralrooster: thanks for sharing your insight and shedding light on manual overrides (i.e. hacks) and so forth. I have one production site using Views isotope and a few more in the wings, and I'm seriously thinking about how the pieces / UI should best be abstracted. I'm experimenting with some example use cases I believe to be fairly common, including:

• Preselected 'filter' (i.e. taxonomy term) for individual isotope blocks (i.e. View setting?).
• Different isotope layouts (i.e. sizes, masonry / not masonry, etc) based on different content types.
• Different layouts for Views vs. node (page) listing.

@kreynen: do you have any suggestions in terms of direction, and is there any way we can help? Anybody else have any ideas? I'll admit I haven't had a look at Greg's sandbox project yet, but it's on my list.

Edit: Never mind, I appear to be extremely dumb.

For the other dumb people out there, it would be nice if this had an official dependency on the Isotope module Soon(tm) so that it is easier to verify if the Isotope library is actually loaded. :)

Has anyone else noticed when using layoutMode: 'masonry' (#7) for instance, the images overlap on initial load? We experienced that issue here and corrected the problem by calling the imagesLoaded plugin in views_isotope.js and wrapping:

  $container.isotope({
    itemSelector: '.isotope-element',
    //filter: '.nothing'
    layoutMode: 'masonry',
    masonry: {
      columnWidth: 170
    }
  });

with:

  $container.imagesLoaded( function(){
    $container.isotope({
      itemSelector: '.isotope-element',
      //filter: '.nothing'
      layoutMode: 'masonry',
      masonry: {
        columnWidth: 170
      }
    });
  });

typo

#16 is totally off topic! adam1, there are other issues dealing with that question, please don't hijack.

Added a grid-sizer div to make the css work a little easier. (See examples at http://isotope.metafizzy.co/layout-modes/masonry.html)

Note: I recommend using media queries in a responsive theme to modify the widths, depending on how many columns you want for each screen size. If you're not using media queries you may like to replace the percentages with pixel widths.

Woops, forgot the patch.

Fixed in 7.x-2.0-beta1. Module now has reusable configurations. Feel free to raise new tickets for issues with specific layout modes, etc.