Trier les éléments d’une boucle avec #ARRAY pour un affichage de type pinterest

Thiébaut

Février 2015

Bonjour... Après de longues recherches sur l’utilisation d’#ARRAY pour filtrer les éléments d’une boucle selon des critères ajoutés dans un tableau, je viens demander de l’aide.

Je souhaite afficher les vignettes de mes articles par date sur deux ou trois colonnes façon pinterest, c’est à dire par ordre chronologique inverse de gauche à droite, avec des boîtes de hauteur différentes, sans qu’il y est des vides disgracieux...

Solutions tentées

La solution avec un float en deux colonnes, avec le fameux column, présente l’inconvénient de remplir d’abord la première colonne, puis la deuxième... etc... ce qui fait que les articles qui se trouvent en tête de la deuxième ou la troisième... ne sont pas les deux avant-derniers postés.
J’ai tenté une ruse avec le filtre [(#COMPTEUR_BOUCLE|alterner{gauche, droite})], permettant d’attribuer à une vignette sur deux, dans l’ordre de la boucle, la classe CSS gauche ou droite. Puis d’attribuer à la classe "gauche" un float:left ; clear: left; et l’inverse à la classe "droite". Cela fonctionne presque... avec encore, de temps en temps, des "vides". Enfin, avec les float, cela se limite à deux colonnes.

Solution envisagée : avec #ARRAY

La logique envisagée :

Stocker les id des articles voulus, par ordre chronologique inverse, dans un tableau avec #ARRAY, en leur ajoutant au passage une référence de colonne de destination (par exemple "gauche" ou "droite")
Récupérer dans une première boucle ceux de la colonne "gauche"
Récupérer dans une seconde boucle ceux de la colonne "droite"

Chaque colonne sera ainsi indépendante l’une de l’autre et il n’y aura pas de problème de "vides" entres les boîtes.

Le problème, c’est que je n’ai jamais utilisé #ARRAY... et surtout que je n’ai pas trouvé comment faire sur le web pour utiliser les éléments du tableau comme critères de tri.

J’ai uniquement la piste du début, sans même savoir si elle est bonne :

<!--Creation du tableau-->
#SET{tableau_articles,#ARRAY}
<!--Remplissage du tableau-->
<BOUCLE_articles(ARTICLES) {id_rubrique} {!par date}>
<!--Premier Push pour stocker les id_article-->
#SET{tableau_articles,#GET{tableau_articles}|push{#ID_ARTICLE}}
<!--Deuxieme Push pour attribuer le critère de colonne-->
#SET{tableau_articles,#GET{tableau_articles}|push{#COMPTEUR_BOUCLE|alterner{gauche, droite}}}
</BOUCLE_articles>

Est-ce la bonne démarche ? Si oui, comment récupérer ensuite dans une première boucle, les articles "gauche" puis dans une deuxième les articles "droite" ?

Merci !

Résolu

Par note Par date Par date chronologique

Maïeul

Février 2015

Salut,

Si je comprend bien, tu ne veux pas de vide, mais par contre des décalages ?

Si oui, l’idée de 2 colonnes indépendantes est bonne. En revanche ta facon n’est pas la bonne. Le mieux est plutot de faire 2 tableaux : un gauche, un droite

<!--Creation du tableau-->
#SET{tableau_gauche,#ARRAY}
#SET{tableau_droite,#ARRAY}
[(#REM)<!--Remplissage du tableau (notes l'astuce du #REM qui évite d'avoir le commentaire dans le html généré)-->]
<BOUCLE_articles(ARTICLES) {id_rubrique} {!par date}>
[(#COMPTEUR_BOUCLE|alterner{
  #SET{tableau_gauche,#GET{tableau_gauche}|push{#ID_ARTICLE},
  #SET{tableau_droite,#GET{tableau_droite}|push{#ID_ARTICLE}
  })]
</BOUCLE_articles>

Ensuite tu récupère via le critère IN

<BOUCLE_gauche(ARTICLES){id_article IN #GET{tableau_gauche}}>
patatit
</BOUCLE_gauche>
<BOUCLE_droite(ARTICLES){id_article IN #GET{tableau_droite}}>
patata
</BOUCLE_droite>

Indiquez l’intérêt que vous portez à cette réponse

0

Thiébaut

Février 2015

Merci Maïeul, c’est exactement ce que je cherche... mais il doit manquer un truc, car cela ne m’affiche rien ? (J’ai ajouté des accolades à la fin des #SET du compteur de boucles... car je crois que c’était un oubli). Bizarre... Pourtant ma boucle ressort bien des articles. Je vais essayer d’inspecter toute cela en détail...
Indiquez l’intérêt que vous portez à cette réponse

0

Maïeul

Février 2015

effectivement oubli de ma part. Est-ce que tu a bien passé le id_rubrique au contexte ? est-ce que tu a vérifié que les #SET de départ ne sont pas dans la partie optionnelle de boucle ? je viens de tester en local et ca marche
Indiquez l’intérêt que vous portez à cette réponse

0

Thiébaut

Février 2015

Et c’est exactement ce que j’étais en train de poster... mais mon message a disparu ! J’aurais dû faire un copié-collé... Effectivement, j’avais commis l’erreur de mettre les #SET de création entre <B_articles> et <BOUCLE_articles>, soit dans la partie conditionnelle... Erreur réparée !

Voici donc le code qui fonctionne :
#SET{tableau_gauche,#ARRAY} #SET{tableau_droite,#ARRAY} <B_articles> #ANCRE_PAGINATION [(#REM)] <BOUCLE_articles(ARTICLES) {id_rubrique}{!par date} {pagination 12}> [(#COMPTEUR_BOUCLE|alterner{ #SET{tableau_gauche,#GET{tableau_gauche}|push{#ID_ARTICLE}}, #SET{tableau_droite,#GET{tableau_droite}|push{#ID_ARTICLE}} })] </BOUCLE_articles>
J’imagine qu’on pourrait faire autant de colonnes que l’on souhaite...
#SET{tableau_gauche,#ARRAY} #SET{tableau_droite,#ARRAY} <B_articles> #ANCRE_PAGINATION [(#REM)] <BOUCLE_articles(ARTICLES) {id_rubrique}{!par date} {pagination 12}> [(#COMPTEUR_BOUCLE|alterner{ #SET{tableau_gauche,#GET{tableau_A}|push{#ID_ARTICLE}}, #SET{tableau_droite,#GET{tableau_B}|push{#ID_ARTICLE}}, #SET{tableau_droite,#GET{tableau_C}|push{#ID_ARTICLE}} })] </BOUCLE_articles>
Alors évidemment, l’inconvénient, question accessibilité, c’est qu’un lecteur d’écran lira colonne par colonne, sans tenir compte du coup de l’ordre affiché par le rendu visuel. Mais côté mise en forme, plus de vides incongrus des boîtes...

En fait, je pensais au début faire un tableau à plusieurs colonnes avec #ARRAY en associant des critères aux ID à l’aide de #PUSH, puis d’utiliser ces critères dans la boucle de récupération. Je ne crois pas que ce soit possible... car partout sur internet je n’ai vu que des {id_article IN #GET{montableau}}, sans aucun critère supplémentaire basé les colonnes des tableaux. Sauf peut-être avec les boucles DATA, mais c’est un autre sujet...

Merci SPIP, Merci Maïeul, et vivement que le CSS nous permette de faire la même chose que le javascript de Pinterest sans toutes ces bidouilles !
Indiquez l’intérêt que vous portez à cette réponse

0

Thiébaut

Février 2015

Et bien non... ça n’est pas résolu... car les deux tableaux me renvoient exactement les mêmes articles, c’est à dire 12 chacun. Le "alterner" n’a pas fonctionné... ou bien j’ai loupé quelque chose ?
Indiquez l’intérêt que vous portez à cette réponse

0

Thiébaut

Février 2015

Décidément, c’est un mystère. Quand je fais ça en guise de test :
<BOUCLE_articles(ARTICLES) {id_rubrique}{!par date} {pagination 12}> [(#COMPTEUR_BOUCLE|alterner{ #SET{tableau_g,#GET{tableau_gauche}|push{#ID_ARTICLE}}, #SET{tableau_d,#GET{tableau_droite}|push{#ID_ARTICLE}}})] [(#COMPTEUR_BOUCLE|alterner{g,d})] </BOUCLE_articles> [(#GET{tableau_gauche}|foreach)] [(#GET{tableau_droite}|foreach)]
Mon deuxième compteur, celui qui met g ou d, fonctionne bien puisqu’il écrit : g d g d g d g d g d g d, ce qui fait six g et six d.

Tandis que les deux foreach me donnent chacun les douze mêmes 12 articles.

Le filtre alterner n’aime pas les Set Get ?
Indiquez l’intérêt que vous portez à cette réponse

0

Thiébaut

Février 2015

Pour continuer les tests...

si je mets
#SET{tableau,#ARRAY} <B_articles> <BOUCLE_articles(ARTICLES) {id_rubrique}{!par date} {pagination 12}> #SET{tableau,#GET{tableau}|push{#COMPTEUR_BOUCLE|alterner{a,b}}} </BOUCLE_articles>
Il me met :

– 0=> a
– 1=> b
– 2=> a
– 3=> b
– 4=> a
– 5=> b
– 6=> a
– 7=> b
– 8=> a
– 9=> b
– 10=> a
– 11=> b

Je sais, ça nous avance pas à grand chose... ;-)
Indiquez l’intérêt que vous portez à cette réponse

0
Maïeul

Février 2015
Oui, je sais pourquoi. Je n’y avais pas pensé sur une écriture à la volée, et je n’ai pas non plus fait de test local approfondi.

La cause du souci avec alterner est lié au fonctionnement du filtre. Celui-ci recoit les élèments à alterner et les interprètes, puis seulement décide lequel il faut afficher. Donc le [(#SET{tableau_g,#GET{tableau_gauche}|push{#ID_ARTICLE}})] est compris avant l’alternance. D’où le fait que les deux tableaux soient remplis.

La solution va consister à interpréter ces #SET{tableau_g,#GET{tableau_gauche}|push{#ID_ARTICLE}} après le test.

Pour ce faire on va tester la parité du #COMPTEUR_BOUCLE à l’aide du filtre |modulo (en gros, |modulo renvoie le reste de la division euclidienne. Si #COMPTEUR_BOUCLE|modulo{2} est égal à zéro, c’est que nous avons affaire à un nombre pair, sinon c’est que nous avons affaire à un nombre impair.

Donc au sein de la première boucle
[(#COMPTEUR_BOUCLE|modulo{2}|=={1}|oui) #SET{tableau_gauche,#GET{tableau_gauche}|push{#ID_ARTICLE}} ] [(#COMPTEUR_BOUCLE|modulo{2}|=={0}|oui) #SET{tableau_droite,#GET{tableau_droite}|push{#ID_ARTICLE}} ]
Indiquez l’intérêt que vous portez à cette réponse

0
Thiébaut

Février 2015
Je ne connaissais pas, mais en effet c’est imparable et correspond tout à fait au cas d’un affichage sur deux colonnes (pair/impair), ce que je souhaite faire.

De mon côté, avant de découvrir cette alternative "modulo", j’ai bidouillé une « soupe à pépé »... qui semble également fonctionner, et pourrait être utilisé pour un tri pour davantage de colonnes.

Il s’agit de cela :
#SET{tableau_gauche,#ARRAY} #SET{tableau_droite,#ARRAY} <B_articles> <BOUCLE_articles(ARTICLES) {id_rubrique}{!par date} {pagination 12}> #SET{tableau_gauche,#GET{tableau_gauche} |push{#COMPTEUR_BOUCLE |alterner{#ID_ARTICLE,seraadroite}}} #SET{tableau_droite,#GET{tableau_droite} |push{#COMPTEUR_BOUCLE |alterner{seraagauche,#ID_ARTICLE}}} </BOUCLE_articles>
Un foreach pour le tableau gauche donne :
– 0=> 189
– 1=> seraadroite
– 2=> 178
– 3=> seraadroite
– 4=> 186
– 5=> seraadroite
– 6=> 185
– 7=> seraadroite
– 8=> 183
– 9=> seraadroite
– 10=> 180
– 11=> seraadroite

Un foreach pour le tableau de droite donne :

– 0=> seraagauche
– 1=> 188
– 2=> seraagauche
– 3=> 187
– 4=> seraagauche
– 5=> 184
– 6=> seraagauche
– 7=> 181
– 8=> seraagauche
– 9=> 179
– 10=> seraagauche
– 11=> 175

Et cette bidouille fonctionne... Comme quoi, SPIP est plein de ressources ! :-)
Indiquez l’intérêt que vous portez à cette réponse

0

Maïeul

Février 2015

sur trois colonnes ou plus il suffit de changer le modulo et l’argument du filtre =={}
Indiquez l’intérêt que vous portez à cette réponse

0

Maïeul

Février 2015

ton système fonctionne mais multiplie les tableaux, donc la memoire utilisée...
Indiquez l’intérêt que vous portez à cette réponse

0

Thiébaut

Février 2015

Autant pour moi... c’est que je suis une bête des maths ! :-)

Il est clair que de tous points de vue, #MODULO est la meilleure solution. Un simple foreach permet de constater que les tableaux sont réduits à l’essentiel, contenant chacun uniquement la moitié des ID_ARTICLE.

Et pour les nuls en maths comme moi, ne prenez pas peur. Un simple test sur un tableur permet de comprendre la logique des valeurs à utiliser en fonction du nombre de colonnes que l’on veut faire. Voici un tableau, avec en ordonnées le nombre de tour de boucle (compteur), en abscisses le nombre de colonnes et à l’intérieur les valeurs correspondant au reste de la division euclidienne... etc

Compteur boucle / Colonnes 3 4 5 6

1 1 1 1 1

2 2 2 2 2

3 0 3 3 3

4 1 0 4 4

5 2 1 0 5

6 0 2 1 0

7 1 3 2 1

8 2 0 3 2

9 0 1 4 3

10 1 2 0 4

J’adopte ! Merci Maïeul ! :-)

Compteur boucle / Colonnes	3	4	5	6
1	1	1	1	1
2	2	2	2	2
3	0	3	3	3
4	1	0	4	4
5	2	1	0	5
6	0	2	1	0
7	1	3	2	1
8	2	0	3	2
9	0	1	4	3
10	1	2	0	4