spip et javascript masonery

Général
#1

Bonjour, j’ai implanté le javascript masonery qui permet de réorganiser les images d’un div pour ne pas comporter de blanc et adapter les tailles des éléments pour un ensemble organisé, brerf, j’imagine que vous connaissez mieux que moi).
J’ai un soucis car au chargement, ce script superpose les images tant que la fenêtre n’est pas modifiée.

je me débrouille en css et en html (c’est moi qui est codé mon site), amis suis un peu perdu au delà.
Est-ce que quelqu’un aurait une idée de comment solutionner cela?

www.boncaillou.org

Dites moi si vous avez besoin d’élément supplémentaires.

Merci d’avance à la communauté.

#2

Oui, d’une URL valide ;-).

Il y a quelque chose dans ta console ?

#3

Il ne manquerait pas l’initialisation quelque part :
https://masonry.desandro.com/#initialize-with-vanilla-javascript

#4

oups; erreur de frappe, j’ai mis un L en trop !
(et moi qui disais que le code était propre, ça promet!)
www.boncaillou.org

#5

j’ai mis ceci

<div class="row g-5" data-masonry='{"percentPosition": true }'>

je pense avoir utiliser le pas à pas trouvé sur le site spip
j’essaie de suivre la methode du lien direct du developpeur.
merci!

et je m’étais trompé dans l’url précédente!
www.boncaillou.org

#6

Essaie déjà avec l’initialisation JS, pour voir le fonctionnement :
https://masonry.desandro.com/#initialize-with-vanilla-javascript
et ensuite, si cela fonctionne, investigue avec la méthode data-masonry.

#7

Tu ne sembles pas utiliser le plugin SPIP Masonry, si ?
Je ne vois pas le script imagesloaded.pkgd.min.js qui permet d’attendre que les images soient chargées avant de lancer la réorganisation des blocs, ça vient peut-être de là (sans les images, les blocs sont bien alignés).

Teste sans les images en essayant d’avoir des blocs de taille différentes pour voir.

#8

Bonjour Jean-Marie, non je n’ai pas installé le plug in spip non. PEnses tu que ce soit nécessaire?

Effectivement, tu à l’air d’avoir cerné le problème de l’attente du chargement des images avant d’appliquer masonery, ça fait sens. Comment mettre en œuvre ce script (je ne connais pas le javascipt alors, ça ne m’est pas évident d’improviser!) ?

#9

je tente ça dès que j’ai le temps (j’ai repris le boulot, et peu de temps sur mon site…) Merci!

#10

la doc précise qu’il faut indiquer également le sélecteur (le conteneur de chaque image) explicitement https://masonry.desandro.com/options.html#itemselector.

Le problème doit tourner effectivement autour d’une question d’initialisation du script qui ne se fait pas au bon moment et sur les bons éléments.

1 « J'aime »
#11

Bonjour Jean-Marie,
ESt-ce que la bonnne marche à suivre est de télécharger le fichier javascipt " imagesloaded.pkgd.min.js"
le téléverser vers mon dossier js sur mon ftp, et l’inclure comme tel

<script src="../js/masonry.pkgd.min.js"></script>    
<script src="../js/magesloaded.pkgd.min.js"></script>

et c’est tout?

ou dois installer le plug in masonery spécail spip, et donc YAMl, et Saisies ?

désolé de mon manque de connaissances.
mon code html actuel est le suivant:

<INCLURE{fond=entete}>

    <!-- javascript optionnel -->

    <script src="../js/masonry.pkgd.min.js"></script>

    <!-- ############## contenu ############## -->
    <div class="contenu">

        <div class="container overflow-hidden">
            <div class="row g-5" data-masonry='{"percentPosition": true }'>

                <BOUCLE_recents(ARTICLES){id_rubrique=11}{!par date}> 

                <div class="col-lg-4">
                    <div class="bloc_contenu">
                       
						<div class="image">
							<BOUCLE_images(DOCUMENTS){id_article=#ID_ARTICLE}{mode=document}{titre=couv}> 
								<a  href="#URL_ARTICLE">
                                <img src="#FICHIER" alt="#TITRE">    
                                </a>
							</BOUCLE_images> 	
						</div>

                        <div class="titre">
                            <a  href="#URL_ARTICLE"><h2>#TITRE</h2><h3> | #SOUSTITRE</h3></a><br />
                        </div>
        </div>
                </div>

                </BOUCLE_recents>

            </div>
        </div>

    </div>


<INCLURE{fond=pied}>

et actuellement, ça donne ça:
Capture d’écran 2022-09-03 à 16.07.01

#12

le script s’applique bien au bons éléments, mais sans doute avant que les images soient chargées. Ne maitrisant pas du tout le javascript je suis un peu perdu.

#13

que faire de ce script vanilla? l’inclure dans un code dans mon html ?

désolé, autant je comprend le html, css et spip, mais pas le javascript!

#14

C’était le sens de mon message oui :slight_smile:
Le plugin est prévu pour.

#15

alors je l’ai installé, mais ça ne fonctionne pas , j’ai testé en définissant les « containers » et « items » de manières différentes (mes divs sont multiples et peut être me suis-je trompé?) mais rien n’y fait… : (

est-ce que qu’avec le code html au dessus, vous pouvez me dire comment configurer le plugin?
Capture d’écran 2022-09-03 à 23.15.30

#16

ma conf (partielle) du plugins masonry
Capture-20220904000602-601x502

J’ai créé une composition particulière sur les articles « article-equipementpublic.html »
donc pour un article de cette composition j’affiche en mode masonry les images du portefolio
j’ai donc inclus dans ce squelette

<INCLURE{fond=inclure/facade,id_article,id_rubrique=#NULL,ajax,env} />

ce squelettes/inclure/facade.html affiche les images du portefolio de l’article sous forme masonry

.....
[(#REM) Portfolio : album d'images ]
<B_documents_portfolio>
	<div class="bloc clearfix documents_portfolio" id="documents_portfolio">
		<h2><:medias:info_portfolio:></h2>
		<div class="facade">
			<BOUCLE_documents_portfolio(DOCUMENTS) {objet?}{id_objet?} {mode=document}{extension IN png,jpg,gif} {par rang_lien, num titre, date}{doublons}{vu=non}>[
			<div class="agglos">
				<a href="(#URL_DOCUMENT)" type="#MIME_TYPE" onclick="location.href='[(#URL_ARTICLE
		  |url_absolue
			|parametre_url{id_document,#ID_DOCUMENT}
			|ancre_url{documents_portfolio}
			)]';return false;"[ class="(#EXPOSER)"][ title="(#TITRE|attribut_html|couper{80})"]>[(#FICHIER
				|image_reduire{200,0}
				|inserer_attribut{class,spip_logo}
				|inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]</a><div>#FORMULAIRE_NOTATION</div></div>
			]</BOUCLE_documents_portfolio>
		</div>
	</div><!--#documents_portfolio-->
</B_documents_portfolio>
....

et voilà

#17

En regardant rapidement, je dirais Container : row et Items : col-lg-4

Mais je serais toi, je ferais sans ces classes pour éviter un conflit avec ton framework CSS bootstrap ou autre, tu peux simplifier le code avec uniquement les classes container et bloc_contenu.

#18

j’imagine que mon bootstrap pose soucis avec le plugin oui. Sinon, , avant de mettre le plugin spip, masonery fonctionnait comme je l’avais installé initialement, mais avec un probleme de script masonery qui se lancait avant que toutes les images soient chargées.
Je pense repartir de cette base, comment implanter le script imagesloaded.pkgd.min.js concretement?

ESt-ce que la bonnne marche à suivre est de télécharger le fichier javascipt " imagesloaded.pkgd.min.js"
le téléverser vers mon dossier js sur mon ftp, et l’inclure comme tel

<script src="../js/masonry.pkgd.min.js"></script>    
<script src="../js/magesloaded.pkgd.min.js"></script>

???

#19

merci, je me demande si mon probleme avec le plugin ne vient pas de mon framework bootstrap, et des largeurs proportionnelles des blocs… En tout cas, pas moyen de faire fonctionner le plugin avec e sconnaissances : (

#20

Comme je te le disais dans mon message, fais au plus simple : garde uniquement les div .container et .bloc_contenu et supprime ceux qui ont une classe bootstrap sans quoi, ça ne peut pas marcher.

<div class="container">
    <BOUCLE_recents(ARTICLES){id_rubrique=11}{!par date}> 
        <div class="bloc_contenu">
            ...
        </div>
    </BOUCLE_recents>
</div>

et dans la config du plugin, container : .container et items : .bloc_contenu + largeur : 200 et une marge de 5 par ex.