web-dev-qa-db-fra.com

Comment faire travailler ensemble Isotope et Wordpress?

J'essaie de faire mon thème Wordpress en utilisant le plugin Isotope. http://isotope.metafizzy.co/

Jusqu'ici, j'ai un tel résultat après avoir suggéré que: enter image description here

Je crois que la maçonnerie isotopique ne devrait pas ressembler à ceci. Je suis vraiment perplexe quant à ce que je fais mal. Ci-dessous mon 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%;
 }

Et un code PhP qui fonctionne dans la boucle.

<?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-->

modèle "contenu":

<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>

Je suppose que le problème concerne la méthode imagesLoaded. Le type d'isotope fonctionne, comme le suggère la capture d'écran, mais il ne fonctionne pas correctement - il y a beaucoup d'espace libre entre les images.

S'il vous plaît aider à résoudre le problème

theme-developmentjavascriptmasonry
1
user3695711

Le Isotopela documentation surImagesLoaded suggère deux méthodes pour cela. J'utilise généralement le second, ce qui signifie:initialisation d'Isotope et le déclencheur layout après le chargement des images. D'après mon expérience, cela fonctionne mieux, même si j'ai des faits pour le prouver. En dehors de cela, je l'ai couru de cette façon avec succès sur un tas de sites.

Le fichier javascript ressemble à ceci:

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

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

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

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