How to make Isotope and Wordpress work together?

Question

How to make Isotope and Wordpress work together?

user3695711

2016年10月24日 02:18

I am trying to make my Wordpress theme using Isotope plugin. http://isotope.metafizzy.co/

So far, I have such a result after doing that was suggested:

I believe that Isotope Masonry should not look like this. I am really puzzled as to what I am doing wrong. Below is my code:

functions.php

 function profolio_scripts () {
    wp_enqueue_style( 'profolio-style', get_stylesheet_uri() );
    wp_enqueue_script("isotope", get_template_directory_uri () . "/js/isotope.pkgd.min.js",array("jquery"));
    wp_enqueue_script("imagesLoaded",get_template_directory_uri () . "/js/imagesloaded.pkgd.min.js",array("jquery","isotope"));
    wp_enqueue_script("custom", get_template_directory_uri () . "/js/custom.js", array("jquery","imagesLoaded","isotope"));   
};
add_action("wp_enqueue_scripts", "profolio_scripts");

Javascript:

 jQuery(function($){
  var container=$("#isotope-container").imagesLoaded(function(){
      container.isotope({
        itemSelector: '.item',
        masonry:{
            columnWidth:160
        }
      })
   });
 });

CSS:

 .item {
    width:160px;
    margin: 1px;
 }
 #isotope-container {
    margin:0 auto;
    max-width:100%;
 }

And PhP code that works in the loop.

?php
  get_header();
?
div id="isotope-container" 
    ?php
     if(have_posts()) :
      while (have_posts()) : the_post();
        get_template_part("content");
      endwhile;
     endif;
    ?
/div !--isotope-container--

"content" template:

div class="item"
  ?php
   if ( has_post_thumbnail() ) {
     $perm = get_permalink();
     $width = randomImageSize (200, 400);
     $height = randomImageSize (200, 400);
     $image = get_the_post_thumbnail($post_id, array($width,$height));
   }
  ?
    a href="?php echo ($perm);?"?php echo ($image);?/a
    div class="imageDesc"This beautiful image /div
/div

My guess is that the problem has to do with imagesLoaded method. The Isotope sort of works as the screenshot suggests, however, it does not work properly - there is a lot of free space between images.

Please help resolve the issue

Topic masonry theme-development Wordpress javascript

Category Web

Nicolai Grossherr · Accepted Answer · 2015年1月7日 16:18

The Isotope documentation about ImagesLoaded suggest two methods for this. I generally use the second one, which means: initializing Isotope and trigger layout after the images have been loaded. In my experience this works better, not that I have facts to proof it. Aside from that, I have it running this way successfully on a bunch of sites.

The javascript file looks like this:

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

    var $container = $('#your-id');

    $container.isotope({
        layoutMode: 'masonry',
        itemSelector : '.your-class',
        masonry: {
            columnWidth: 200,
        }
    });

    $container.imagesLoaded( function() {
        $container.isotope('layout');
    });
});

How to make Isotope and Wordpress work together?

About