[Resolved] Infinite scroll with Masonry and reloadItems (different sizes)

[Author]

Posts

[Simon]

Hello,

I have a view with infinite scroll and a responsive Masonry grid ( hidden link ) where the items are of different sizes.

When I load more items/posts I need to rearrange the layout with a fallback method that uses Masonrys function reloadItems ( hidden link ).

However reloadItems seems to trigger the infinite scroll which keeps loading more and more results without the user scrolling.

It also seems that infinite scroll is triggered just by scrolling down a little bit even though the end of the page is not visible (maybe 40% left of the page).

Best regards,
Simon

[Beda]

Thank you for contacting us here in the Support Forum

Is the issue you mention happening on your HomePage?

I can not reproduce that issue there.

If I scroll the page, I reach the bottom before the infinite scroll os triggered.

If I do nto scroll, the Infinite Scroll is not triggered.

Could you elaborate on where end how I can see that issue on your site?

Thank you for your patience.

[Simon]

Hello Beda and thanks for looking into this.

It's on the homepage. The infinite scroll is triggered just by scrolling down one "scroll wheel cog" (see attached image) then it keeps loading more and more without user interaction.

Best regards,
Simon

[Beda]

Thanks for the Details

You are right, I did scroll to fast the first time and therefore it seemed as the correct behavior, as by reaching the page's bottom the items where loaded.

Of you scroll just ONE scroll cog and wait, the issue is visible.
Sorry for not having seen that from beginning.

Now, I understand (not sure if you made tests in regard) this only happens with the Masonry Code, right?

It would be great to know if that happens on your end as well with a "default" View using endless scroll.

Anyway, I will most certainly need a sites snapshot if possible.
We usually recommend the free Plugin "Duplicator" for this porpoise.

If you already know how Duplicator works
(http://wordpress.org/plugins/duplicator/),
please skip the following steps and just send me the installer file and the zipped package you downloaded.

★ Duplicator Instructions
hidden link
Send me both files (you probably want to use DropBox, Google Drive, or similar services, as the snapshot file will be quite big)

❌ IMPORTANT ❌
Remember to create or keep an admin account for me before creating the snapshot, or I won't be able to login. You may delete the new admin account once the snapshot has been built.

I will enable your next answer as private so you can provide me the information securely.

Please could you provide me the additional Infos?

Thank you for your patience.

[Beda]

I see.

I am deploying this locally now, I might need to consult this with the DEV Team as well.

Please apologize any delay in case.

Thank you for your patience.

[Beda]

OK, I deployed this locally.

I have a few doubts, apologize if this questions are obvious to you, but I am not that familiar with the Masonry Gutter.

1. Your View in question (Instagram Photos) is, if inserted directly to the page, working fine, but not styled with the masonry gutter.

Might I ask why you do not style the output directly in the View / Content Template assigned to that View?

This is how it should be done.

See, it is not intended to populate other terms (3rd Party code/application etc) with a view, but to display data directly.

Therefore, output should be styled directly in the View in question.

2. The View does wrap a default HTML around the Loop.
This is since Views 1.11.1.

It is explained in depth here (why, how to workaround etc):
https://toolset.com/forums/topic/views-result-array-as-shortcode-parameter/page/2/#post-344768

This default HTML makes it impossible to use Views Output as Data for another party.

If you are populating a 3rd Party Code with output of Views, so as I can see you do in the content template "Page home", this most likely won't work.

I see in that content template, you "populate" the Masonry ShortCode HTML with the View.
Is that correct?

So that will be the issue in this case.

Unfortunately that Filter also does not solve the issue here as you need the paginated View.

I will need to consult with the 2nd Tier what to do int his case.

Please expect my informations here in the forum.

Could you quickly clear my doubts as well? 🙂

Thank you for your patience.

[Simon]

Thank you very much Beda for the extensive report! Now it to works! =)

We moved the Masonry tags from the view (Instagram Photos) to the content template (Page home) when we got the "top photo" (only one photo) duplicated in the view loop (Instagram Photos) on page 2, 3, 4... (don't know why). When we placed the view for "top photo" with the Masonry tags in the content template (Page home) we knew it only would run one time, but we lost the infinite scroll.

After your answer we moved the above tags back to the view (Instagram Photos) and set a conditional category query, which solved the issue (see attached image).

The solution is as you write: "Therefore, output should be styled directly in the View in question."

Thank you very much Beda!