[Resolved] Masonry Posts on a Nested View

[Author]

Posts

[Jaime]

Tell us what you are trying to do?
I need to set up a Masonry (not using Blocks if it's possible) with my posts on a nested view.

1) I have a nested View created (it shows "anecdotas" which is a grandchildren post from this relationship): Rutas > Peliculas > Anecdotas
and it's working fine
https://toolset.com/forums/topic/display-grandchildren-posts/

2) With this topic https://toolset.com/forums/topic/masonry-grid/
I have created a Masonry View (also working fine), for "Peliculas" View
(screenshot 1)

3) My problem is when displaying the Masonry View on the "Rutas" View (the grandfather)

As far as I could see the problem is:
A) the Masonry is working for posts coming from the same Parent, but for each Parent, a new Masonry starts.
B) Between posts from one parent and another it shows a big blank space

(screenshot 2)

What is the link to your site?
You can see the issue here
hidden link

Thanks a lot!!!!

[Jamal]

Hello and thank you for contacting the Toolset support.

From what I see, the blank space is just empty it is not created because of a CSS style. The position of each Masonry is calculated and put. I think that the second masonry calculates the position before the first one has already organized elements, this will reduce its height, and leave the space of the moved sections empty.

To better understand this issue, I'll need to take a closer look at your view. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal]

Thank you for the credentials.

It is not necessary to add the script to each view, but it is fine, the browser is smart enough to not load the script again.

The masonry grids are created automatically after page load because they have the class "masonry-grid". We want to let the child masonry grids calculate their heights first, then we can create the parent masonry grid.

I fixed the issue by:
- Changing the class on the parent grid to 'parent-masonry-grid', to make sure it will not be created automatically.
- Adding a custom Javascript code to the view(parent) to create the masonry grid. I made the functions wait for half a second to make sure the children grids are created.

jQuery(function($){
  setTimeout(function() {
    $('.parent-masonry-grid').masonry()
  }, 500);
});

I hope this helps. Let me know if you have any questions.

[Jaime]

Hi again Jamal!
Thanks a lot for your answer.
Very appreciated.
🙂

We almost have solved the problem, but still there is a little issue.
As you can see in my screenshot attached, with your code we have solved the problem with the blank spaces, but we still have a problem because the View starts a new Masonry for each "Anecdotas".
Is it possible to make a unique Masonry for all the "Anecdotas", avoiding this blank spaces on the right side of the screen?

New threads created by Jamal and linked to this one are listed below:

https://toolset.com/forums/topic/masonry-from-posts-on-a-nested-view/

[Jamal]

Awesome 🙂 I thought you wanted each nested view to be masonry grid.

I do not think it is possible to create a masonry view with the posts of the nested view, because each nested view is wrapped in its own <div> tag. Masonry will work only with the results of a loop, not a loop of loops.

However, for support rules, we are able to handle only one issue at the time. This helps us to bring you a better service and also helps other users to find all the information here exposed. For that reason, I have created another ticket and I'll be posting there my suggestion to get this resolved.

[Jaime]

My issue is resolved now. Thank you!