Skip Navigation

[Resolved] Conflict with Views 1.11.1 and Masonry Script

This support ticket is created 8 years, 3 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 8:00 – 17:00 8:00 – 17:00 8:00 – 17:00 8:00 – 17:00 8:00 – 17:00 -
- - - - - - -

Supporter timezone: America/Sao_Paulo (GMT-03:00)

Tagged: 

This topic contains 7 replies, has 2 voices.

Last updated by Adriano 8 years, 3 months ago.

Assisted by: Adriano.

Author
Posts
#352425

This is a follow-up to this thread:

https://toolset.com/forums/topic/bugsconflicts-between-masonry-and-views-1-11-1/

I had marked this resolved, but I am still experiencing difficulties.

The solution provided will strip out any code that sits above the <!-- wpv-loop-start --> and below the <!-- wpv-loop-end -->. So to get around that, I changed my Views code from this:

[wpv-post-body view_template="Newsletter Signup Form"]
[wpv-layout-start]
	[wpv-items-found]
	<hr>
	<h1 class="caps blue center">Newsletter Archive</h1>
	<hr>
	<div class="row masonry-row">
	<!-- wpv-loop-start -->
		<wpv-loop>
          <div class="col-sm-6 col-md-4 post-block-wrapper">
            <div class="post-block">
              <div class="inner-padding">
                <h3 class="caps blue center no-margin-top">[types field="original-broadcast-date"][/types]</h3>
               [types field="in-this-issue"][/types]
                <div class="center">
                  <a href="[types field='newsletter-link' output='raw'][/types]" class="btn btn-default caps oswald btn-download" target="_blank">View&nbsp;<span class="fa fa-chevron-right"></span></a>
                </div>
              </div>
            </div>
            <hr class="visible-xs">
          </div>
		</wpv-loop>
	<!-- wpv-loop-end -->
	</div>
	<hr class="pagination-divider">
	[wpv-pagination]<div class="center caps oswald">Page&nbsp;[wpv-pager-current-page style="drop_down"]&nbsp;<small>of</small>&nbsp;[wpv-pager-num-page]</div>[/wpv-pagination]
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

to this:

[wpv-post-body view_template="Newsletter Signup Form"]
[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
        <hr>
	<h1 class="caps blue center">Newsletter Archive</h1>
	<hr>
	<div class="row masonry-row">
		<wpv-loop>
          <div class="col-sm-6 col-md-4 post-block-wrapper">
            <div class="post-block">
              <div class="inner-padding">
                <h3 class="caps blue center no-margin-top">[types field="original-broadcast-date"][/types]</h3>
               [types field="in-this-issue"][/types]
                <div class="center">
                  <a href="[types field='newsletter-link' output='raw'][/types]" class="btn btn-default caps oswald btn-download" target="_blank">View&nbsp;<span class="fa fa-chevron-right"></span></a>
                </div>
              </div>
            </div>
            <hr class="visible-xs">
          </div>
		</wpv-loop>
        </div>
	<hr class="pagination-divider">
	[wpv-pagination]<div class="center caps oswald">Page&nbsp;[wpv-pager-current-page style="drop_down"]&nbsp;<small>of</small>&nbsp;[wpv-pager-num-page]</div>[/wpv-pagination]
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

However, pagination no longer works in this configuration. Is there a way to solve that?

#353009

Hello Kasia,

Thanks for opening a new one. I'll talk with our Views development team and will update you soon.

#353167

Ok, I've found the problem. It's in the js-wpv-layout-responsive class, you can remove it by adding the code below in the JS section of your View:

$( document ).ready(function() {
  $( ".js-wpv-view-layout" ).removeClass( ".js-wpv-layout-responsive" )
});
#353182

We've fixed it in a definitive way, if you are interested in receiving that fix please give me credentials and I'll apply the hotfix.

#353283

Hi Adriano,

The jQuery fix provided works, however there is an error in your syntax. The actual code should be:

$( document ).ready(function() {
  $( ".js-wpv-view-layout" ).removeClass( "js-wpv-layout-responsive" )
});

Is the definitive fix going to be included in the next plugin update? The reason I'm asking is that I have this configuration on several different websites and would prefer not to have to provide credentials for all of them. Otherwise, perhaps you can just provide me with instructions for how to apply the hotfix myself.

#353651

Hello Kasia,

This will be released in the next Views version. But I won't let you wait for that, it's just one single JS file and I can share it with you: http://pastebin.com/gmHCpp07

File name wpv-pagination-embedded.js

Just replace the file in wp-views/embedded/res/js/

Please let me know if you are satisfied with my reply and any other questions you may have.

Regards,

Adriano Ferreira

#354168

This solution worked perfectly. Thanks so much Adriano, and thanks for fixing the conflict in the next release!

#354174

You are welcome.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.