JQuery Masonry

Ce plugin est un portage pour Spip du plugin jQuery Masonry de David DeSandro : http://masonry.desandro.com/

Principe

Ce plugin réorganise les blocs de votre page page d’après une grille (de manière verticale et horizontale) pour réduire au maximum les espaces vides entre les éléments qui apparaissent lorsqu’on applique la propriété float sur des blocs de hauteurs différentes.

Installation

Comme tous les autres plugins, cf. http://www.spip.net/fr_article3396.html

Le plugin nécessite le plugin Saisies et YAML (+ Bonux pour Spip 2.1).

Configuration

La page de configuration du plugin permet de choisir le nombre d’éléments à traiter dans le site, puis pour chaque élément de saisir :

  • la classe ou l’id du container sur lequel appliquer le script
  • la classe des « briques » à agencer
  • la largeur des colonnes
  • la marge autour des « briques »
  • ...

Discussion

12 discussions

  • Bonjour,

    Le plugin fonctionne bien sous spip 3.2.11
    Cependant j’ai un souci au niveau de la hauteur du container qui n’englobe pas tous les div. Le texte des calques de la dernière ligne n’apparait pas complètement lorsqu’il est un peu long.
    http://histoiredamours.com/?L-ours-...

    Avec l’inspection ont voit que le fichier est surchargé avec une classe masonry. Mais je suppose que ça se passe plutôt dans le fichier javascript car il n’y a aucun fichier css...

    quelqu’un saurait comment régler le problème svp car les fichiers js sont du chinois pour moi... ^^ ?

    Répondre à ce message

  • 4

    Bonjour,

    Testé avec SPIP 3.2 en local, le temps des tests en ligne maintenant... Et l’apparition d’un message d’erreur php :
    « Warning : A non-numeric value encountered in /home/clients/113ea59e0620f451cd12cf2f9d6796c6/web/plugins/auto/jquery_masonry/jquerymasonry_pipelines.php on line 12 »

    jquerymasonry_pipelines.php ligne 12 (c’est malheureusement une langue très exotique pour moi) :

    $largeur = $conf_jquerymasonry["largeur".$i] + 2*$conf_jquerymasonry["marge".$i] + 10;

    Auriez-vous des pistes ?

    • Salut merci pour le signalement, on va corriger ça, mais la première chose à faire de ton côté est de désactivers les warnings PHP sur ton site en prod ;)

    • Oh merci !

      1. pour la rapidité
      2. pour le conseil... kézako ? 0_o’
    • Pour désactiver l’affichage des warnings ça dépend de ton hébergeur, mais tu doit pouvoir le faire en ajoutant php_flag display_errors off à ton fichier .htaccess ou sinon en créant un ficher config/mes_options.php contenant ce qui suit :

      <?php
      
      ini_set('display_errors', 0);

      cf https://forum.spip.net/fr_271048.html

    • Fait avec mes_options.php
      Merci encore pour tes conseils et explications =)

    Répondre à ce message

  • Bonjour !
    j’ai essayé d’installer le plugin sous SPIP 3.2.x en éditant paquet.xml (pas encore passée à 3.2.3 et encore sous 3.2.1 pour l’instant), et ça semble fonctionner correctement (et en prenant toutes les précautions d’usage : 1- je suis toute débutante en SPIP, 2- en masonry, js et tout le tralala aussi...), rien n’a explosé.
    Cependant, je remarque que la galerie (je l’utilise pour l’instant sur un portfolio) ne se redimensionne pas automatiquement en jouant sur la taille de la fenêtre, il faut réactualiser la page (malgré le paramètre « animation » > oui). Est-ce que vous auriez des pistes pour éviter à une pauvre âme d’errer trop longtemps sur les mers déchainées du responsive ? ^_^

    Répondre à ce message

  • 1

    Bonjour !
    Nouvelle question, ce pluging serra-til compatible pour spip 3.2 ?
    Actuellement, impossible de l’installer, dans l’administration de spip 3.2, quand je recherche le pluging, il ne le trouve pas.. et si je tente manuellement par ftp, il ne me l’affiche pas non plus.

    Des solutions à proposer ?
    Merci !

    • Même réponse que pour le passage à SPIP 3.2 : à tester en modifiant le paquet.xml pour étendre les bornes,

    Répondre à ce message

  • 3

    Bonjour,

    Une mise a jour du plugins pour spip 3.1 est-il envisagé ?

    Je l’utilise sur plusieurs sites, mais impossible pour le moment de migrer mes sites vers spip 3.1 a cause de ce plugins.

    Merci à vous

    • Bonjour Gaston,

      J’ai une solution - qui n’est peut-être pas des plus recommandables - mais qui a fonctionné pour moi : dans le fichier /pulgins/auto/jquery_masonry/paquet.xml, modifiez la ligne compatibilite=« [2.1.0 ;3.0.*] » par compatibilite=« [2.1.0 ;3.1.*] ».

      Le plugin devrait alors être réactivable.

      Bonne chance !

    • Ben : si lorsque tu as ainsi activé le plugin tu n’a pas vue de bug, c’est qu’il est compatible SPIP 3.1.

      Dans ce cas, peut tu me confirmer qu’il n’y a pas de bug et je marquerai le plugin comme compatible 3.1

    • Merci ben de la combine, j’ai pas encore testé,

      Pour le moment il est toujours en 3.0
      Des bugs sont-ils constatés ?

    Répondre à ce message

  • 3

    Bonjour, Me revoilà,

    Et j’ai toujours le même souci, avec Masonry et un site en rresponsive design.
    Je veux que le Masonry prenne toute la largeur de ma page, je l’appelle d’une class « mur » :

    .mur
    float:left ;width:100% ;display:inline ; height:auto ;position:relative ; padding:0 ;

    Ensuite je veux six colonnes, en laissant la hauteur libre.
    Dans formulaire dans l’espace privé je met « 0 » a marge et multii colonne.

    je divise donc 100 par 6 = 16,66667.

    Et met ma classe « brique » pour les vignettes comme tel :

    .brique
    position:relative ;float:left ; display:block ; width:16.6667% ;padding:0 ; height:auto ;margin:0 ;

    .brique img
    position:relative ;float:left ; display:block ; width:100% ;padding:0 ; height:auto ;margin:0 ;

    Et là je comprend pas, j’ai 5 colonnes, à cause des marges, j’ai beau analyser le code je comprend pas d’où elles sortent, bien que dans spip.css j’ai, et Masonry n’a pas de fichier css, ou je l’ai pas trouvé…. :

    .spip_logos float : center ; margin : 0 ; padding : 0 ; border : none ;

    Si je réduis mon pourcentage pour avoir six colonnes, quand je rétréci ma fenetre, cela passe a un moment a 5 collonnes, j’en deduis que les marges sont en pixels....

    Et ensuite il m’arrive régulièrement d’avoir le bug des images qui sont toute superposées…
    ce bug n’apparait pas si je choisi une largeur fixe en pixels.

    C’est étrange car sur un autre page, j’utilise des documents sans masonry, avec le meme code et j’ai bien mes six colonnes, pas de marges, et quand je réduis ma fenêtre cela reste en six colonnes…

    La page en question : http://latelier.web4me.fr/spip.php?article8&var_mode=recalcul

    Si quelqu’un comprend mon problème… je fournis une capture d’écran du bug

    • Alors en cherchan Masonry + image en responsive, je suis tombé là dessus : [http://osvaldas.info/responsive-jqu...->http://desandro.github.io/masonry/demos/fluid.html]

      J’ai pas tester la seconde solution, mais la première regle mon soucis de garder 6 colonnes qui prennent bien toute la largeur.

      Par contre comme je passe pas par le css, je sais pas comment je vais faire pour passer en 2 colonnes pour smartphone...

      Par contre j’ai toujours le bug qui apparait... il disparait si l’on bouge un peu la fenetre, personne n’a ce bug ça fait longtemps que je cherche...?

    • Je continue mon enquête…

      en tapant dans google, « Masonry bug picture », je suis tomber là fessus, qui est exactement mon problème :

      https://github.com/desandro/masonry...

      Donc, si je résume, les images se superposent, parce que quand la largeur est en pourcentage et la hauteur en auto, masonry organise les images avant même de savoir la hauteur, en gros il se charge plus /trop vite.

      Mes capacités a comprendre tout ça sont réduite, mais j’en déduis, qu’il faut soit ralentir le time out, que je comprend par ralentir Masonry, pour attendre que les images se chargent…

      this.resizeTimeout = setTimeout( delayed, 100 );

      Et mettre 200 ms au lieu de 100 ms, J’ai cherché dans le fichier
      jquerymasonry/v0.4.2/javascript/jquery.masonry.js, ligne 41 :

      if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
            resizeTimeout = setTimeout(function() {
              jQuery.event.handle.apply( context, args );
            }, execAsap === "execAsap"? 0 : 100 );
          }
        };

      C’est ce qui se ressemble le plus, en modifiant 100 par 500 cela change rien…
      J’avais vu aussi qu’il faudrait charger masonry après le chargement des images, en bas du code, mais là je crois pas que c’est possible avec un pluging spip…

      Si quelqu’un a une idée, je suis preneur car je sent que je vais jamais réussir avec mes moyens…

    • Bon alors, concernant le bug,

      Si j’ai bien compris, il fallait rajouter une fonction image.loaded pour régler le problème, n’y connaissant rien , j’ai testé plusieurs chose et je suis tombé sur ce code :

      <script>
      $(function(){
      
          var $container = $('#mur');
          $container.imagesLoaded( function() {
              $container.masonry();
          });
          
          
      });
      
      </script>

      Je le place dans le head de ma page concernée et, il semblerait que le bug disparait, mes images dans un premier temps « bug », puis se placent correctement ( je l’ai vu sur un ordi ayant un faible connexion…)

      J’ai pas assez de recul pour savoir si c’est vraiment bon.

      Et rappel :

      Donc pour bien avoir six colonnes avec une largeur en % et hieght en auto, il faut placer en bas juste avant le body, (par contre pour smartphone je vais être embêter si je veux repasser en 1 colonne….) ceci :

      <script>
      $('#mur').masonry({
        itemSelector: '.brique',
        // set columnWidth a fraction of the container width
        columnWidth: function( containerWidth ) {
          return containerWidth / 6;
        }
      });
      </script> 

    Répondre à ce message

  • 3

    Bonjour,
    Et un grand merci pour se pluging qui permet de faire des sites en responsive assez rapidement.
    Cependant j’ai un petit bug avec se pluging, il marche nickel sur écran ordi, mais sur smartphone quand j’arrive pour la première fois sur ma rubrique, tout mes logos articles sont superposés, il faut que j’actualise ma page pour que ça remarche...

    Et a vrai dire je sais pas si c’est un bug du pluging ou mon css qui pose problème

    Bref si quelqu’un à un problème similaire...

    J’utilise spip3

    • Salut, est-ce que le bug est aussi observable sur le site de démo du script original ?

      http://masonry.desandro.com/

      ++

    • Salut b_b,
      alors non, j’ai pas l’impression que il y a ce bug, je précise que sur écran je suis en plusieurs colonnes et sur smartphone je suis a 100% de width height:auto, donc une seul colonne. Une fois la page actualisé le bug disparait. J’avais plaçé un png transparent par dessus pour protéger un minimum les images je vais voir si c’est ça ...

    • Bonjour,

      Après tout ce temps j’ai pas réussis à résoudre ce bug ...

      Je l’utilise avec des logo_articles, comme ma hauteur est en auto, j’ai l’impréssion que masonry ne prend pas en compte le logo.

      Un liens en question :
      http://sitederecherches.web4me.fr/spip.php?rubrique1
      si vous avez des smartphone (j’en ai pas je test sur un ipod ou sur des smartphone à des amis) merci de me dire si le bug apparait et si chez vous non pourquoi ?

    Répondre à ce message

  • 2

    bonjour,

    est est-ce que quelq’un pourrait expliquer comment paramétrer ce plug in avec un exemple facile :
    le formulaire plugin - le code html et le css correspondant ?
    (en gros qu’est ce qui appelle quoi ?)

    merci d’avance.

    • Salut, je tente de prendre le relais sur le support des contribs d’Yffic. Par contre je ne vais pas t’être d’une grande aide sur ce plugin que je ne connais pas encore.

      Pour faire simple, le plugin s’occupe d’intégrer le script jQuery Masonry et de propsoer une interface de configuration pour spécifier les variables d’appel du script. Du coup, la doc du script sur le site de l’auteur devrait t’être utile pour commencer :

      http://masonry.desandro.com/docs/intro.html

      Si d’autres personnes qui utilisent le plugin peuvent apporter plus d’infos qu’elles n’hésitent pas.

    • c’est bon, j’ai trouvé en bidouillant comment ça marchait……

      enfin je crois.
      merci.

    Répondre à ce message

  • bonjour existe ’il un « pas à pas » pour configurer le plugin et le html correspondant . Je n’arrive pas à appliquer cette réorganisation à ma pge web....

    est-ce de mauvais identification div ? class ?
    je rame un peu………

    Répondre à ce message

  • 3

    Je viens de charger mon site du localhost au serveur pour tester. J’avais fait la mise à jour de spip par dessus l’ancienne avec spip_loader.

    Là le plugin ’itérateurs" ne marche plus avec l’ancienne version masonryet là le nouveau masonry m’indique à la page / ?exec=configurer_jquerymasonry :
    Fatal error : Call to undefined function : yaml_decode_file() in /homez.52/.../.../plugins/saisies/inc/saisies_lister.php on line 288

    plugin saisie : 1.23.1 & bonux : 2.3.0
    Le dossier fonds est supprimé aussi. Désolé mais c’est un peu le flou maintenant !!!

    • On va y arriver... Installe YAML qui est parfois nécessaire pour certaines saisies

    • Ca marche après installation de YAML !!!
      Petite erreur de code cependant à la première config (voir image ci-jointe) mais après c’est disparu !!
      En tout cas, magnifique... Merci pour la solution !
      Il faudrait peut-être indiquer dans l’article de télécharger YAML avec BONUX et SAISIES, au cas ou quelqu’un rencontre le même problème.
      Merci Yffic !!!!

    • OK, je vais rajouter le necessite de YAML

      Pour le warning, ca vient peut être de ta version php. En effet array_intersect_key n’existe qu’à partir de la version 5.1 : http://php.net/manual/fr/function.array-intersect-key.php

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom