1

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: enter image description here

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

10
  • On what does this run? On posts? If so: Please show us (in an edit) your markup. I guess you are simply missing the needed classes
    – kaiser
    Jan 7, 2015 at 15:50
  • It runs on post thumbnails - please see the edit Jan 7, 2015 at 15:55
  • Yes, it seems like you are missing those classes. Please open up your browsers dev tools (Either F12 or Ctrl + Shift + I) and add in those classes manually to see if this is the problem. If it is, we can go on providing you an answer on how to add classes to thumbnails. Does this work for your? Please report back here and edit your question with your result and maybe a rephrased question and a new title for it.
    – kaiser
    Jan 7, 2015 at 15:58
  • What classes do you mean? In my Firefox debugging tool all classes .item, #isotope-container are in place Jan 7, 2015 at 16:07
  • 2
    Note: This represents a problem also concerning the Masonry library of WordPress core. So please don't close this as not WordPress specific. Jan 7, 2015 at 17:00

1 Answer 1

1

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');
    });
});
4
  • Thanks for suggestions, but I don't have a masonry after doing this - see the updated image in my question Jan 7, 2015 at 16:33
  • Too bad, can't tell why it isn't working on your setup. Like I said, this is generally the way I have it working just fine. @user3695711 Jan 7, 2015 at 16:39
  • Thanks. What about image sizes - now I upload thumbnails as they are without randomizing their size. And also I deleted width style for .item. However, still without success. Please, see the updated image again. Jan 7, 2015 at 16:43
  • Like I said before, can't really tell with the information available. What I can tell you is, in my experience managing widths with classes works better then having totally random or percentage widths - depends on the layout though. Aside from that, you should read the documentation and/or some tutorials that are out there (again, maybe), because generally this is absolutely achievable. Good luck! @user3695711 Jan 7, 2015 at 16:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.