I' having some issues getting this to work on some of my themes. I noticed it works fine within the admin theme (SEven) but not on my main theme Zymphonies. Also tried on bartik, and it works, not on stark. I'm thinking this is a bootstrap issue. And I followed this comment, https://www.drupal.org/node/2620994 and although the items show up in a grid, The masonry effect does not seem to work. It just looks like a grid. I"m noting the views div classes are different on themes it works on:

Working: "contextual-region view view-masonry view-id-masonry view-display-id-page_1 js-view-dom-id-xxxxxxxxxxxxxxxxx"
Not working: "contextual-region js-view-dom-id-xxxxxxxxxxxxxxxxxx"

hoping for some helpful insights...

CommentFileSizeAuthor
#23 not_working_with_custom_theme--2716399-23.patch1.74 KBDom.
#6 not_working_with_custom_theme--2716399-6.patch1.68 KBDom.
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

butteryak created an issue. See original summary.

butteryak’s picture

butteryak CreditAttribution: butteryak commented

So as far as I can tell, the container cannot be built as the div cannot be targeted by the masonry script.

As an experiment I hacked the module to change this:

// Build the view container
  $container = '.view-' . Html::cleanCssIdentifier($view->storage->id()) . '.view-display-id-' . $view->current_display . ' > .view-content';

To this:
// Build the view container
$container = 'mscontainer';

And then in the views advanced settings I set the views class to "mscontainer"
Voila! that works.

still getting my feet wet with drupal 8, perhaps I'm missing something, but why is the view class created differently for some themes?

butteryak’s picture

butteryak CreditAttribution: butteryak commented
Issue summary: View changes
Dom.’s picture

Dom. CreditAttribution: Dom. commented

I guess if the view template file is overriden from the theme and if it removes the default classes, then it would break indeed. I don't know what can I do against it for moment...

butteryak’s picture

butteryak CreditAttribution: butteryak commented

well, for now my "hack" works. perhaps it might make sense to include an option to declare your own css class for the div that the jquery attaches to. or even just hard code it as a specific class, and then as part of the module setup, just declare the view class. perhaps.

Dom.’s picture

Dom. CreditAttribution: Dom. commented
Status: Active » Needs review
FileSize
not_working_with_custom_theme--2716399-6.patch1.68 KB

Could you eventually have a try at this patch ? Does it solves your issue ?

  • Dom. committed e3d3e1c on 8.x-1.x 
    Issue #2716399 by Dom.: Not working on some 8 themes
Dom.’s picture

Dom. CreditAttribution: Dom. commented
Status: Needs review » Fixed

Committed on dev

Dom.’s picture

Dom. CreditAttribution: Dom. as a volunteer and at ACINO commented

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Dom.’s picture

Dom. CreditAttribution: Dom. as a volunteer and at ACINO commented
Status: Closed (fixed) » Needs work

This patch prevents "infinite views scroll" integration. reverted.

matthewn’s picture

matthewn CreditAttribution: matthewn commented

I have experienced this problem as well, with the Basic theme. In debugging, I noticed that Basic calls core/themes/stable/templates/views/views-view.twig.html, whereas Bartik (which works fine) instead calls core/themes/classy/templates/views/views-view.twig.html.

Copying core/themes/classy/templates/views/views-view.twig.html into the templates directory of my Basic theme makes masonry work. The 'classy' version of that file contains a <div class="view-content"> that the 'stable' version does not. That makes all the difference.

tanc’s picture

tanc
he/him
Primary language English
Location Italy
CreditAttribution: tanc at Agile Collective commented

I came to the same conclusion, certain classes are expected and these are only provided by themes using classy as their parent.

griffincox’s picture

griffincox CreditAttribution: griffincox commented

Thanks #12, #13. I'm using my own custom theme on Drupal 8.5.2 and following #12 got it working!

emma.maria’s picture

emma.maria
she/her
CreditAttribution: emma.maria at TES Global commented

After screaming at my code for hours I came to the same conclusion as #12 and #13. The classes that exist to make this whole thing work only exist in the views-view.html.twig template in the core theme Classy and not in the core theme Stable.

Dom.’s picture

Dom. CreditAttribution: Dom. as a volunteer and at ACINO commented

Hi Emma !

Have you had a try at patch #6 ?
It worked to solved this issue, but introduced a conflict with "Infinite Views Scroll" module so was reverted at #11.
You may have a try at it as a temporary fix. Meanwhile, I need to find some time to fix it and commit it back to the module.

Your help to test it is welcomed :) !

Farnoosh’s picture

Farnoosh CreditAttribution: Farnoosh commented

Thank you #12. I only copied views-view template from classy into Pattern Lab theme and masonry-views looks working.

Farnoosh’s picture

Farnoosh CreditAttribution: Farnoosh commented

Which adds the 'masonry-layout' class required for the masonry js to work.

satrece’s picture

satrece CreditAttribution: satrece commented

I have faced the same issue then i tried #12 masonry worked well. But infinite scroll doesnt. After click on load more content loaded but masonry doesnt add its style for the divs. Im using D8.7.x

gagarine’s picture

gagarine CreditAttribution: gagarine as a volunteer commented
Title: Not working on some 8 themes » Not working themes based on "stable"
gagarine’s picture

gagarine CreditAttribution: gagarine as a volunteer commented
Title: Not working themes based on "stable" » Not working on themes based on "stable"
lucasvm’s picture

lucasvm CreditAttribution: lucasvm commented

I had the same issue, and i can confirm its working with the patch provided from #6 -> Dom.

Dom.’s picture

Dom. CreditAttribution: Dom. as a volunteer and at ACINO commented
FileSize
not_working_with_custom_theme--2716399-23.patch1.74 KB

Hi guys !

It turns out, indeed there is an issue with themes not having a views-view.html.twig template like classy have. Indeed, the module relies on the classes added by this template.
Using stark theme which does not have this template, the simple container.html.twig template is used and those classes mentionned are not added.
It turns out #6 patch fixes the issue described above BUT does not work with views_infinite_scroll activated because views_infinite_scroll injects it's own class on the wrapper but does it SAVAGE by removing every other classes added.
SO we have to tweak masonry_views to run AFTER by increasing it's module weight.

A new patch is attached which fixes all issues and allows multiple masonry views with different settings on the same page.

  • Dom. committed 047f89a on 8.x-1.x 
    Issue #2716399 by Dom.: Not working on themes based on "stable"
Dom.’s picture

Dom. CreditAttribution: Dom. as a volunteer and at ACINO commented
Status: Needs work » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.