Port Views Fluid Grid - jQuery Masonry to Drupal 7

+1

this would be great

Yes this would be genius !!!

Besides an idea: is it possible for a search to stick size of the output to the relevance of the result?

This should be pretty easy. Getting my hands on that now. Posting a file here when I am done. You can create a D7 branch of my work on this project @ maintainer.

And here we go. Attached file works for D7 and uses the newest masonry version. Also animation is included in the views plugin ui.

seems no one can make a new release or branch except the orginal poster,

maybe some one can make a new project for this, I suggest.

Subscribe. First glance on the port: very nice module!
I get the following error for every record in a view-page with a very recent version of Views:
- Notice: Undefined index: content in template_preprocess_node() (line 1466 of \node.module).

subscribe

Looks great- I'd love to use this in a D7 project I'm just gearing up on!

Changed title for better clearness in the dashboard

Thanks, works well with D7 !

I'm tring to add masonry's "filtering" option to this module.
It looks not so difficult but as i'm very very limited at coding i'd appriciate some help !

Here's what i'm trying to do > http://desandro.com/demo/masonry/docs/filtering.html

And what i've done to fluid grid's init.js >

;(function($) {
  $(function() { 
  
    $('.views-fluidgrid-wrapper').each(function(index) {
      var current = $(this).attr('id');
      var settings = Drupal.settings.viewsFluidGrid[current];
    
      $(this).masonry({
	    singleMode: settings.singleMode,
	    columnWidth: settings.columnWidth,
	    //itemSelector: '.views-fluidgrid-item:visible',
	    itemSelector: '.views-fluidgrid-item:not(.invis)',
	    resizeable: settings.resizeable,
	    saveOptions: false,	    
	    animate: settings.animate,
	    animationOptions: {
    	  duration: settings.animationOptions.duration,
    	  easing: settings.animationOptions.easing,
    	  queue: settings.animationOptions.queue
    	}
      }, function() { eval(settings.callback); });
      
      
     $('#filtering-nav a').click(function(){
        var colorClass = '.' + $(this).attr('class');

        if(colorClass=='.all') {
          // show all hidden boxes
          $(this).children('.invis')
            .toggleClass('invis').fadeIn(speed);
        } else {  
          // hide visible boxes 
          $(this).children().not(colorClass).not('.invis')
            .toggleClass('invis').fadeOut(speed);
          // show hidden boxes
          $(this).children(colorClass+'.invis')
            .toggleClass('invis').fadeIn(speed);
        }
        $(this).masonry();

        return false;
      });
      
    }); 
	
  });
  
})(jQuery);

My guess is that the community might have to take a stand and port this themselves as it looks like the maintainer hasn't been around for a while. It might be smart just to port this module and do a restart.

@jmix - I suggest starting a new issue for that.

Quite agree!

As this is a useful module, and it seems obvious the maintainer is very much unavailable for new commits.

Very much needed! +1

This works thanks you. I have a question, how can I "reload" the masonry for Drupal (in pure html-css-js page i can use 'reload' method easily) after my custom jquery action? for example, I want to expand a div on click and the reload the script itself. How is it possible?

@gleenk Until this is a commited release by a maintainer, it isn't released correctly. Please start a new issue for this.

Was cleaning up my modules directory today and realized I forgot to post about modifying this to work with v2 of jQuery Masonry a month or two ago. I believe I started with fubhy's version from above.

Note: This requires modernizr installed to libraries/modernizr.

Oh thank goodness. I was about to attempt to get this ported by other means. Testing.

Which version of Modernizr? The 2.0 version makes it confusing to install with this module.

I was running modernizr 1.7.

doesnt work properly for me.. testing..

Subscribe!

sub

+1

subscribe

s

Thanks for your good work inolen)) Your code works for me, but when working with Infinite Scroll, pager is visible when loaded new photos, see here http://test.vybir.net/fluid-gallery

If someone wants to takeover the module, just follow the procedure and you'll get git access...

http://drupal.org/node/251466

Thanks for this recent work - it looks like there is some nice progress

I am battling with getting Inolens code to work properly. To confirm, do I need to have the modernizr module installed as well as the library in the libraries folder?. It stacks my images correctly but does not respond (or animate) when the window is resized.

Thanks for any clarifications

Would love to see this module get some more love and am happy to test where needed

With just the modernizr library installed and with all views config checkboxes on except "Animate in CSS3" - I get a nice responsive masonry grid. I still don't get any animation on screen resize and I was wondering @rodych what you may have done to enable this feature. I would also be interested in your steps to integrate the lazy loading. Thanks for any info.

Would love to see this module working fine on drupal 7!
Subscribe!

#28
I've been trying to get it to work. Could you please export your views so I can see how your are setting it up?

Thanks.

This is a great module, would love to be able to use this in D7 also. I plan to have a go at it myself in the next week or two if no progress is made here.

In template_preprocess_views_view_fluidgrid() this line:

if ($options['animation_options']['use_css']) {

needs to be:

if ($options['animate'] && $options['animation_options']['use_css'])

Thanks Arthurf. I substituted the code you mentioned but still dont have animation working. I found that if I check the "Use CSS 3 animation" checkbox in the views settings it flattens my masonry grid into one long column. If I disable that checkbox then it works responsively but with no animation.

Any ideas what else to look for?

Thanks
Gregg

Did you clear caches after selecting that option?

I did try clearing my cache with no difference. As soon as "CSS 3 animation" is checked, my masonry grid turns back into a single column.

bookmarking..

I can't get this too work .. Keep getting ajax error?
An AJAX HTTP error occurred.
HTTP Result Code: 500

OK I found that my path to modernizr was wrong - it is fixed and now I get the correct masonry layout with the "CSS3 Animation" checked but still no animation :(

my ajax error was a views / drupal core / ctools issue... latest devs fixed it.

This might be terribly daft--but I found that animation would work after I implemented arthurfs fix and set a number for 'Duration' (A string or number determining how long the animation will run.) as well as enabled 'Queue'; I set mine for 200, and it started working--that is without CSS enabled. If 'Use CSS' is enabled, it still doesn't seem to work.

Ok--got CSS to work; my modernizr path was wrong as well; it looked for it in 'sites/libraries/modernizr/' instead of 'sites/modules/modernizer/'; So, being lazy I just created a new directory with modernizr-1.7.min.js in '/libraries/'; Hope that saves some time for people; I am loving Masonry.

sub+

How do i get rid of this error? What am i doing wrong?? :(

I have the latest devs as suggested above: views(7.x-3.x-dev), ctools(7.x-1.x-dev), drupal(7.12)

An AJAX HTTP error occurred.
HTTP Result Code: 500
Debugging information follows.
Path: /?q=admin/structure/views/view/frontpage/preview/page/ajax
StatusText: Internal Server Error
ResponseText:

after installing pathauto, token and libraries it seems to be working ..somehow. wish this module was properly supported, masonry is fast becoming the latest web trend/ already is.

Also interested in this.

internet explorer doesn't render it proper.

shadows of items in the border are covered. the js set the overflow property of the views-fluidgrid-wrapper somehow to hidden. i'm not sure if this caused by this module. does anybody have the same issue?

subscribe

internet explorer throws below error and the images are not aligned proper.

Webpage error details
Message: Exception thrown and not caught
Line: 32
Char: 217
Code: 0
URI: http://dev.harvardartmuseums.org/misc/jquery.js?v=1.4.4

Views infinite scroll and the D7 port of fluid grid (#17 above), If you have this working please comment here: http://drupal.org/node/1552192 and share your method. Thank you

The module from #17 works, should be released, at least as a dev branch.

Tried the module from #17.

It installed with out any errors. Only problem is that all the images show up under each other and not in a grid.

For those who have made it work, how did you do it? What settings did you use for Views?

Subscribe, and yeah suffering from the same issues with no grid action, would love to see this working!

I found fuhbys version frm #5 to work well, though it needed to be updated a little to D7-style js events.
Comparing with inolens from #17

Assuming fuhbys was a pretty feature-compatible port for the current D6 version, I'll summarize what looks like changes in #17

Both versions clean up the code structure a little by shifting plugins into an includes dir. No big deal there.
Both (I assume initially fuhbys) fix up some dodgy script methods.

#17 code is an improvement, and visually looks solid.
#17 uses and bundles "* jQuery Masonry v2.0.110526" (todays download is v2.1.03)
#17 drops 'singlemode', animation 'easing', and 'callback' options
#17 adds 'gutterwidth', 'rtl', 'fitwidth' options.
#17 adds css-only animation options, I guess as an alternative to jquery animation.
# 17 has some additional support for re-calculating layout when needed (page resize) and for dealing with images that don't have dimensions available at render time.
#17 has a *-processed class that is good practices for adding D7 jquery processing (though it could be improved by using jquery 'once()' instead.

So everything is looking really cool. One thing.
#17 requires Modernizr library. This is a bit annoying.
A theme our team is working on has gone with html5shiv, and I'm reluctant to require both.

The #17 tarball is probably the best thing to take as a fresh start for D7, but for the record, here is a git-compatible patch that will upgrade from current D6-dev to D7-dev and keep git history. I backformed it from #17, to include the moving of files around.

Let the testbot run :)

Dunno if testbot can handle a full version upgrade without even a D7 branch to fork from...
And ... well there are no tests to run :-) The effect is purely visual and requires javascript in the browser.
The best we can hope for is that "things don't break" but it won't tell you that anything worked!

does any one got it working with internet explorer?

Hmm, the version of Modernizer I downloaded seemed a lot higher than what was requested in the module, so I modified accordingly, however the only thing that seems to happen is 2 pictures are either underneath each other or by the side, with no scaling or anything

@tr33m4n if you are only laying out 2 items, you won't really be seeing masonry in action. It doesn't *scale* your content, it arranges it. See http://masonry.desandro.com/

@dman Ah, makes sense! Should really read about things instead of looking at pictures and getting excited!

Could someone make a 7.x-1.x-dev version then? So we can test and file issues...

I've been using this patch and so far it seems to be working quite well. But what is modernizr?

+  // add modernizr
+  $modernizr_path = libraries_get_path('modernizr');
+  drupal_add_js($modernizr_path . '/modernizr-1.7.min.js');

I think it's this: http://modernizr.com/

I'm not sure where to find the 1.7 version of it though (only 2.x versions seem to be available) , and it's triggering some errors.

it doesn't work if i enable "Aggregate JavaScript files. " #17 was used

Has anyone tried the function as described here?

http://masonry.desandro.com/demos/centered.html

I tried applying it but it doesn't work.

Has anyone tried http://drupal.org/project/views_isotope ?
The demo page states it implements masonry as well.

Views Isotope does not work with exposed filters, if the goal is integrate masonry layout with drupal filters, I do not think isotope is the right approach since its filtering system differs heavily from drupal's filtering.

Here's a patch to run /after/ the patch in #56. I'm not sure what to do about the modernizr issue as I can't find version 1.7 which is what the patch is requesting. This simply does a check to see if modernizr is in your libraries before trying to load it.

If the maintainers are listening, it would be really nice to get a D7 branch based on #56, so that new issues can be filed against that version, rather than in this ticket.

here is the 1.7 version of modernizr hosted in the Microsoft CDN you can download or load directly

http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js

And in the modernizer web page by clicking in the latest release download simply change the version in URL

http://modernizr.com/downloads/modernizr-1.7.min.js

Branch 7.x-1.x has been created.
Patches #56 #69 has been committed. Also added dependency on Libraries module.

Where can I find the branch?

Thank you Mohammed

@Gaara You can find all releases by clicking on "View all releases" at the bottom of the project page.

Usualy you can see it on the main page, but only if the maintainer has gone to edit > releases (/edit/releases), and checked "Show snapshot release" & Supported, etc.

Thx - Yesterday i didn't find the release there.

Thanks Mohammed for the great functionality and others supporting with patches. Will there be any stable release for 7.x soon? Appreciated your efforts.