Aligner des vignettes de taille inconnu, ou les affres du critère {alterner}

Bonjour à tous !

J'ai un petit problème de code, j'en viens à vous car je suis sur qu'il y a une solution. Je suis certain pourtant que la solution se trouve dans ce critère {alterner}...

J'explique : je souhaite afficher des vignettes de présentation d'article sur plusieurs lignes, comme on peut trouver sur spip-contrib en page d'accueil).

Les contraintes :
- il y a trois vignettes par ligne sur un nombre de lignes inconnu (dépend du nombre d'articles publié).
- la hauteur de chaque vignette est inconnue (dépend de la longueur de #TITRE),

Le problème : si je laisse les blocs s'aligner seuls du fait de 'float: left;' aucune ligne ne se fait au delà de la première. Eh oui, chaque vignette se place là où elle peut, et c'est un joyeux bazar.

La solution que je vois : faire de chaque ligne un bloc qui contiendra trois blocs de vignettes. Très bien. Sauf que ne connaissant pas le nombre de lignes, il faut qu'ils soient créés dynamiquement au fur et à mesure que les articles s'affichent.

Le code suivant utilise le critère {alterner} sur un compteur de boucle, de façon à ouvrir et fermer un bloc div tous les trois articles.
            <BOUCLE_les_vignettes(ARTICLES){id_rubrique}{doublons}>
  [(#COMPTEUR_BOUCLE|alterner{'<div id="une_ligne">','',''})]
  <div class="une_vignette">
    [<h2>(#TITRE)</h2>]
    [<div class="descriptif-article">(#DESCRIPTIF)</div>] </div>
  [(#COMPTEUR_BOUCLE|alterner{'','','</div>'})]
</BOUCLE_les_vignettes>

Ça marche en fait plutôt bien, sauf que si je n'ai pas trois vignettes sur la dernière ligne créée, alors le bloc <div> de cette ligne ne se ferme pas.

Donc, inacceptable... avez-vous une idée lumineuse ? :slight_smile:

Jonathan

bonjour,
essayer de terminer ta boucle avec le total boucle pour le nombre de div pair ou impair sur la dernière ligne,

Jonathan a écrit :

Bonjour à tous !

J’ai un petit problème de code, j’en viens à vous car je suis sur qu’il y a une solution. Je suis certain pourtant que la solution se trouve dans ce critère {alterner}…

J’explique : je souhaite afficher des vignettes de présentation d’article sur plusieurs lignes, comme on peut trouver sur spip-contrib en page d’accueil).

Les contraintes :

  • il y a trois vignettes par ligne sur un nombre de lignes inconnu (dépend du nombre d’articles publié).
  • la hauteur de chaque vignette est inconnue (dépend de la longueur de #TITRE),

Le problème : si je laisse les blocs s’aligner seuls du fait de ‹ float: left; › aucune ligne ne se fait au delà de la première. Eh oui, chaque vignette se place là où elle peut, et c’est un joyeux bazar.

La solution que je vois : faire de chaque ligne un bloc qui contiendra trois blocs de vignettes. Très bien. Sauf que ne connaissant pas le nombre de lignes, il faut qu’ils soient créés dynamiquement au fur et à mesure que les articles s’affichent.

Le code suivant utilise le critère {alterner} sur un compteur de boucle, de façon à ouvrir et fermer un bloc div tous les trois articles.
<BOUCLE_les_vignettes(ARTICLES){id_rubrique}{doublons}>
[(#COMPTEUR_BOUCLE|alterner{‹ 

 ›,‹  ›,‹  ›})]

[

(#TITRE)

] [
(#DESCRIPTIF)
]
[(#COMPTEUR_BOUCLE|alterner{'','','
'})]

[(#TOTAL_BOUCLE|alterner{‹  ›,‹ 

 ›, ‹  ›})]

Jonathan a écrit :

Bonjour à tous !

J'ai un petit problème de code, j'en viens à vous car je suis sur qu'il y a une solution. Je suis certain pourtant que la solution se trouve dans ce critère {alterner}...

J'explique : je souhaite afficher des vignettes de présentation d'article sur plusieurs lignes, comme on peut trouver sur spip-contrib en page d'accueil).

Les contraintes :
- il y a trois vignettes par ligne sur un nombre de lignes inconnu (dépend du nombre d'articles publié).
- la hauteur de chaque vignette est inconnue (dépend de la longueur de #TITRE),

Le problème : si je laisse les blocs s'aligner seuls du fait de 'float: left;' aucune ligne ne se fait au delà de la première. Eh oui, chaque vignette se place là où elle peut, et c'est un joyeux bazar.

La solution que je vois : faire de chaque ligne un bloc qui contiendra trois blocs de vignettes. Très bien. Sauf que ne connaissant pas le nombre de lignes, il faut qu'ils soient créés dynamiquement au fur et à mesure que les articles s'affichent.

Le code suivant utilise le critère {alterner} sur un compteur de boucle, de façon à ouvrir et fermer un bloc div tous les trois articles.
                        <BOUCLE_les_vignettes(ARTICLES){id_rubrique}{doublons}> [(#COMPTEUR_BOUCLE|alterner{'<div id="une_ligne">','',''})]
    <div class="une_vignette">
        [<h2>(#TITRE)</h2>]
        [<div class="descriptif-article">(#DESCRIPTIF)</div>] </div>
    [(#COMPTEUR_BOUCLE|alterner{'','','</div>'})]
</BOUCLE_les_vignettes>

Ça marche en fait plutôt bien, sauf que si je n'ai pas trois vignettes sur la dernière ligne créée, alors le bloc <div> de cette ligne ne se ferme pas.

Donc, inacceptable... avez-vous une idée lumineuse ? :slight_smile:

Jonathan

Un truc du genre avec un tableau

    <div>
    <table width="500">
        <BOUCLE_les_vignettes(ARTICLES){id_rubrique}{doublons}>
            [(#COMPTEUR_BOUCLE|alterner{'<tr>','',''})]
            <td>
affichage
            </td>
            [(#COMPTEUR_BOUCLE|alterner{'','','</tr>'})]
                           </BOUCLE_les_vignettes>
            [(#TOTAL_BOUCLE|alterner{'<td></td><td></td></tr>','<td></td></tr>',''})]
    </table>
    </div>

bobof a écrit :

bonjour,
essayer de terminer ta boucle avec le total boucle pour le nombre de div pair ou impair sur la dernière ligne,

[(#TOTAL_BOUCLE|alterner{'','<div></div>', '</div>'})]

Super ça marche impec ! Par contre j'ai pas parfaitement saisi comment.

Notamment (1), je croyais que le critère alterner ne pouvait fonctionner que récursivement... je pige pas bien comment le compilateur peut alterner du code s'il ne le lit qu'une seule fois.

Mais surtout (2), pourquoi insérer un bloc de div vide ? Un rapport peut-être avec une norme HTML ?