Reply To: rpp block overlapping

#4808

Ernest Marcinko
Keymaster

Hi!

Thank you for reporting this. The stackoverflow link was actually very useful. I've once experienced this issue, but I thought it was just some one time rendering problem.

It looks like that the problem is indeed the too early loading of the isotope, when the images are not loaded yet – and the block height calculation is incorrect. I think the best solution is to force a layout change when the images are loaded. That way the isotope loads with the page, and re-renders the correct spacing when the images are ready, without causing a lag.

You will have to do 2 things in order to fix this until I incorporate a bugfix:

1. Open up the plugin file plugins/related-posts-pro/js/nomin/type.wrapper.js and go to lines 89 – 107, where you should see this:

create_isotope: function() {
 return isotope = new rpp_isotope( this.o.node, {
      // options
      itemSelector: this.o.elements,
      layoutMode: this.o.isotopeLayout,
      filter: this.o.filterFns[this.o.initiallyShow],
      sortBy: this.o.defSortValue,
      sortAscending: (this.o.defSortOrder=="desc"?false:true),
      getSortData: {
        rpp_title: this.o.titleSelector,
        rpp_relevance: this.o.relevanceSelector + ' parseInt',
        category: '[data-category]',
        weight: function( itemElem ) {
          var weight = $( itemElem ).find('.weight').text();
          return parseFloat( weight.replace( /[\(\)]/g, ”) );
        }
      }
 });
},

replace that function with this code:

create_isotope: function() {
 var iso = new rpp_isotope( this.o.node, {
      // options
      itemSelector: this.o.elements,
      layoutMode: this.o.isotopeLayout,
      filter: this.o.filterFns[this.o.initiallyShow],
      sortBy: this.o.defSortValue,
      sortAscending: (this.o.defSortOrder=="desc"?false:true),
      getSortData: {
        rpp_title: this.o.titleSelector,
        rpp_relevance: this.o.relevanceSelector + ' parseInt',
        category: '[data-category]',
        weight: function( itemElem ) {
          var weight = $( itemElem ).find('.weight').text();
          return parseFloat( weight.replace( /[\(\)]/g, ”) );
        }
      }
 });
 $(window).load(function() {
   iso.layout();
 });
 return iso;
},

2. Change the javascript source to non-minified – because the change is applied only there. Go to the Compatibility Settings submenu and change the Javascript source option to Non minified: https://i.imgur.com/fsXFjNr.png

After clearing your cache and refreshing the page a few times the issue should be solved.

Best,
Ernest Marcinko

If you like my products, don't forget to rate them on codecanyon :)