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 »
- ...
Discussions par date d’activité
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
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) :
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 !
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 ficherconfig/mes_options.php
contenant ce qui suit :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
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
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
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…
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 :
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 :
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 :
Répondre à ce message
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
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
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 :
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.
Suivre les commentaires : |