Docs

[pixelboss1]

Greetings from Pixel Boss stock photography!

We are a stock photography site using WooCommerce. We currently use product pages to display our images.

We are having some trouble getting our product galleries to display thumbnails in masonry format. When a vertical image appears in the thumbnail gallery, tends to consume the entire row, leaving vast amounts of empty space.

I have included a screen shot to help illustrate this issue. Any help would be most appreciated. Many thanks!

[pixelboss1]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! As of this time as I was checking your site, it appears that it is down.

Please ask assistance from your hosting provider.

Thank you.

[pixelboss1]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. It seems up on my end. However it seems you are using some really long image that’s creating the inconsistency – http://prntscr.com/cxy211

Note that the masonry library working as expected and let’s try similar ratio for the images. They are not required to be the same ratio but don’t use something too different like the long image.

Thanks!

[pixelboss1]

This reply has been marked as private.

[Rad]

Hi there,

It’s never a feature or product layout (masonry). But you can implement it through this code. Please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery(document).ready(function($) {

    var $container = $('.archive.tax-product_cat .products');

    $container.before('<span id="x-isotope-loading"><span>');

    $(window).load(function() {
      $container.isotope({
        itemSelector   : '.archive.tax-product_cat .products > li',
        resizable      : true,
        filter         : '*',
        containerStyle : {
          overflow : 'hidden',
          position : 'relative'
        }
      });
      $('#x-isotope-loading').stop(true,true).fadeOut(300);
      $('#x-iso-container > .hentry').each(function(i) {
        $(this).delay(i * 150).animate({'opacity' : 1}, 500);
      });

      $(window).trigger('resize');
      
    });

    $(window).smartresize(function() {
      $container.isotope({  });
    });

  });

Then this CSS too,

.archive.tax-product_cat li.product {
    margin: 0 2% 4.5% 0;
}
.archive.tax-product_cat ul.products {
    width: 105.5%;
    margin-right: -4.5%;
}

Hope this helps.

[pixelboss1]

This reply has been marked as private.

[Lely]

Hi There,

Upon checking, the code you have copied is incomplete. This will result to error. See attached screenshot and compared it to the previous suggestion. If you scroll down, there’s still some code below this part:

 position : 'relative'
        }
      });  

[pixelboss1]

Gentlemen, I have to tell you, that worked out perfectly! You guys are so great! Thanks for all your help. Keep up the good work!

Cheers,

Lewis

[Friech]

Hi Lewis,

We’re delighted to assist you with this and thank you for the kinds words.

Cheers!

[Author]

Posts