Afficher les articles sur deux colonnes

assodefis · avril 2020

Bonjour,

Je souhaite modifier catégorie.php afin de faire afficher mes articles sur deux colonnes.
J'ai donc commencé à écrire dans mon container ceci
https://paste.frogeye.fr/?4104f9454c85451b#D8qj6t71ZWE74HhxrLGTJnJxFQn7z3F8xs3TmvsezWQ6

Les deux derniers articles s'affichent bien! Le dernier en haut à gauche, l'avant dernier en haut à droite.
Le problème arrive lors du retour à la ligne des articles précédent... qui vont se caler différemment selon les longueurs de chapô des articles.
Ce que j'aimerais, c'est que les articles s'affichent 2 par 2 dans des div qui se superposent, chaque div comprenant 2 articles maximum (un pour la dernière div si le nombre d'article est impaire).

J'ai pensé à deux solution

imbriquer deux boucles while comme ceci
https://paste.frogeye.fr/?93b93c0ab5605094#AyU2zE5j11Y7fXsUwseJo8TWmCAxZjcHKQSgHi53mKkG

mais ça ne m'affiche que les deux derniers articles seulement, c'est comme si la deuxième boucle mettait fin à la première aussi.

mettre deux colonnes dans une unique boucle while mais il faudrait pour ça pouvoir incrémenter le i de la boucle entre les deux colonnes, sinon, si le rendu est parfait, les deux colonnes affichent le même article... Je ne sais pas comment faire ça.
L'idée pourrait ressembler au code contenu dans le lien qui suit mais évidement, la ligne
<?php $plxShow->plxMotor->plxRecord_arts->loop($i++); ?>

affiche la liste d'article parfaitement mais le répète indéfiniment....

https://paste.frogeye.fr/?44c82c7491368778#DTVr4m9WmEAgxeiPcD6Ea8cEa7nj5KTidPrgYtFT2C9S

Merci énormément par avance pour votre aide.

assodefis · avril 2020

J'arrive presque à avoir ce que je souhaite en mettant la boucle while dans une boucle for et non dans une autre boucle while...
Je vous copie mon code ci après.
J'aimerais aussi pouvoir mettre une condition "if" pour l'affichage du premier article (pleine largeur) qu'à l'affichage de la première page. Une idée?
Enfin, je dois avouer qu'il y a un comportement inattendu je ne comprends pas. La page 1 s'affiche bien avec 5 articles (comme voulu). Par contre, la deuxième page aussi (avec la condition "if", ça ne devrait en afficher que 4) or, elle ne devrait en afficher que 3 (car je n'ai que 8 articles en tout). La deuxième page me ré affiche une deuxième fois les deux plus anciens articles....

Un coup de main pour la condition "if"?
Une idée quant à l'affichage des deux plus anciens articles une seconde fois?

assodefis · avril 2020

<?php include(dirname(__FILE__).'/header.php'); ?>

<main class="main" role="main">

    <div class="container">

        <div class="grid">

            <div class="col sml-hide med-hide lrg-1 lrg-show">&nbsp;</div>

            <div class="col sml-11 med-12 lrg-10">

                <ul class="repertory menu breadcrumb">
                    <li><a href="<?php $plxShow->racine() ?>"><?php $plxShow->lang('HOME'); ?></a></li>
                    <li><?php $plxShow->catName(); ?></li>
                </ul>

                <p><?php $plxShow->catDescription('#cat_description'); ?></p>

                <?php $i=0; while($i<1 AND $plxShow->plxMotor->plxRecord_arts->loop()): ?>

                    <article class="article" id="post-<?php echo $plxShow->artId(); ?>">

                    <header>
                        <span class="art-date">
                            <time datetime="<?php $plxShow->artDate('#num_year(4)-#num_month-#num_day'); ?>">
                                <?php $plxShow->artDate('#num_day #month #num_year(4)'); ?>
                            </time>
                        </span>
                        <h2>
                            <?php $plxShow->artTitle('link'); ?>
                        </h2>
                        <div>
                            <small>
                                <span class="written-by">
                                    <?php $plxShow->lang('WRITTEN_BY'); ?> <?php $plxShow->artAuthor() ?>
                                </span>
                                <span class="art-nb-com">
                                    <?php $plxShow->artNbCom(); ?>
                                </span>
                            </small>
                        </div>
                        <div>
                            <small>
                                <!--<span class="classified-in">
                                    <?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat() ?>
                                </span>
                                <span class="tags">-->
                                    <?php $plxShow->lang('TAGS') ?> : <?php $plxShow->artTags() ?>
                                </span>
                            </small>
                        </div>
                    </header>

                    <?php $plxShow->artThumbnail(); ?>
                    <?php $plxShow->artChapo(); ?>

                </article>
                <?php $i++; ?>
                <?php endwhile; ?>

            </div>

            <div class="col sml-hide med-hide lrg-1 lrg-show">&nbsp;</div>

        </div>

    </div>
    <div class="container">

        <div class="grid">

            <div class="container">

                <?php for ($k=0; $k <= 2; $k++) {
                ?>

                <div class="grid">
                    <div class="col sml-hide med-hide lrg-1 lrg-show">&nbsp;</div>

                        <?php $l=0; while($l<2 AND $plxShow->plxMotor->plxRecord_arts->loop()): ?>

                        <div class="col sml-11 med-6 lrg-5">

                            <article class="article" id="post-<?php echo $plxShow->artId(); ?>">

                                <header>
                                    <span class="art-date">
                                        <time datetime="<?php $plxShow->artDate('#num_year(4)-#num_month-#num_day'); ?>">
                                            <?php $plxShow->artDate('#num_day #month #num_year(4)'); ?>
                                        </time>
                                    </span>
                                    <h2>
                                        <?php $plxShow->artTitle('link'); ?>
                                    </h2>
                                    <div>
                                        <small>
                                            <span class="written-by">
                                                <?php $plxShow->lang('WRITTEN_BY'); ?> <?php $plxShow->artAuthor() ?>
                                            </span>
                                            <span class="art-nb-com">
                                                <?php $plxShow->artNbCom(); ?>
                                            </span>
                                        </small>
                                    </div>
                                    <div>
                                        <small>
                                            <!--<span class="classified-in">
                                                <?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat() ?>
                                            </span>-->
                                            <span class="tags">
                                                <?php $plxShow->lang('TAGS') ?> : <?php $plxShow->artTags() ?>
                                            </span>
                                        </small>
                                    </div>
                                </header>

                                <div class="thumb-cat">
                                    <?php $plxShow->artThumbnail(); ?>
                                </div>

                                <?php $plxShow->artChapo(); ?>

                            </article>

                        </div>
                        <?php $l++; ?>
                        <?php endwhile; ?>
                        <div class="col sml-hide med-hide lrg-1 lrg-show">&nbsp;</div>

                </div>
<?php } ?>
            </div>

        </div>

        <nav class="pagination text-center">
            <?php $plxShow->pagination(); ?>
        </nav>

        <span>
            <?php $plxShow->artFeed('rss',$plxShow->catId()); ?>
        </span>

    </div>

</main>

<?php include(dirname(__FILE__).'/footer.php'); ?>

Kube17 · avril 2020

En effet je ne vois pas trop ce qui provoque la duplication des articles....
Je pense par contre qu'il est plus simple de faire qu'une seule ligne avec tous les articles dans ta grid.
Comme le maximum c'est 12 et que chaque colonne fait 6, en mettant plus de 2 colonnes les suivantes vont aller se mettre en dessous. ça simplifierait le PHP vu qu'il n'y a pas besoin de trier les articles pairs et impairs.

assodefis · avril 2020

C'est ce que j'ai commencé par faire mais ça ne s'affiche bien que si tous les couples Image d'accroche/Chapô sont de même taille. Si ils sont de tailles différentes, ON SE retrouve avec des choses étranges...
https://framapic.org/sgmtauEe6IC8/nNghLW4m1kFX.png

assodefis · mai 2020

J'ai trouvé une petite astuce, j'ai rajouté une condition qui affiche sur 2 colonnes sauf pour la dernière page

<?php $cat='001'; $last_page=ceil($plxMotor->nbArticles('(?:[0-9]|home|,)*(?:'.$cat.')(?:[0-9]|home|,)*', '[0-9]{3}', '', 'before')/8);
        if (!($urlPage == $plxShow->catUrl($plxShow->catId()).'/page'.$last_page)) { ?>

affichage sur deux colonnes

<?php } else { ?>

affichage en pleine largeur.

<?php } ?>

J'aurais bien aimé remplacer le 8 (nombre d'articles à afficher par page que j'ai choisi) par quelque chose comme $plxMotor->bypage mais je ne trouve pas.

Sur la première page, j'affiche donc les deux articles les plus récents en pleine largeur puis tous les articles s'affichent sur deux colonnes sauf sur la dernière page ou les plus anciens articles s'affichent de nouveau en pleine largeur.

C'est un peu du bricolage, c'est vrai mais ça fonctionne.

Seul petit hic, la première page est aussi la dernière avant la publication du 9° article donc tout est en pleine largeur avant la publication du 9° article.

Vous en pensez-quoi? @Kube17 @bazooka07

assodefis · mai 2020

Ah ben si, j'ai trouvé

$cat='001';
$last_page=ceil($plxMotor->nbArticles('(?:[0-9]|home|,)*(?:'.$cat.')(?:[0-9]|home|,)*', '[0-9]{3}', '', 'before')/$plxMotor->aCats[$cat]['bypage']);

Comment puis-je récupérer $cat automatiquemenbt?
$plxShow->catId() retourne 1 et non 001 ...

bazooka07 · mai 2020

Comme cela :

$cat = ($plxShow->plxMotor->mode == 'categorie') ? $plxShow->plxMotor->cible : '\d{3}';
$last_page=ceil($plxMotor->nbArticles('(?:home,|\d{3},)*' . $cat . '(?:,\d{3}|,home)*', \d{3}', '', 'before') / $plxMotor->aCats[$cat]['bypage']);
}

assodefis · mai 2020

Super, merci beaucoup, je ne comprends pas tout là maintenant mais je vais regarder demain.
En tout cas, ça fonctionne sauf qu'il manquait un ' avant le \d{3}' dans la deuxième ligne et c'est donc, avec la correction :

$cat = ($plxShow->plxMotor->mode == 'categorie') ? $plxShow->plxMotor->cible : '\d{3}';
$last_page=ceil($plxMotor->nbArticles('(?:home,|\d{3},)*' . $cat . '(?:,\d{3}|,home)*', '\d{3}', '', 'before') / $plxMotor->aCats[$cat]['bypage']);

assodefis · mai 2020

Est-ce que tu veux bien expliquer ce que tu as écrit?

$cat = ($plxShow->plxMotor->mode == 'categorie') ? $plxShow->plxMotor->cible : '\d{3}';

bazooka07 · mai 2020

Lorsque qu'on demande une page HTML, PluXml analyse l'url de la page demandée pour savoir dans quel contexte il doit répondre et note son résultat dans mode.
Comme cela, il sait si on lui demande une catégorie particulière, un article, un tag, une archive ou la page d'accueil.
Et il note le numéro de la pièce demandée dans cible. Sauf pour la page d'accueil qui n'a pas de numéro.
Le numéro d'une catégorie est stocké sur 3 chiffres avec des 0 devant si besoin. Par exemple '002'
Si on n'est pas en mode catégorie, on prend un "joker" pour prendre en compte toutes les catégories : "\d{3}". C'est une expression régulière qui indique qu'on va rechercher des séries de 3 chiffres dans la liste des catégories séparées par des virgules dans le nom des fichiers d'articles.

assodefis · mai 2020

Super, j'ai compris.

Je confirme, ça fonctionne super bien quand la condition est respectée, quand la ligne de code est placée dans une catégorie.

Cependant, si je comprends bien, dans un article, ça récupère toutes les catégories et non la catégorie à laquelle cette article est rattaché. Du coup, je comprends mieux pourquoi dans un article

$plxMotor->nbArticles('(?:home,|\d{3},)*' . $cat . '(?:,\d{3}|,home)*', '\d{3}', '', 'before')

me donne le nombre d'articles total (de toutes les catégories) et pas le nombre d'article de la catégorie à laquelle cet article appartient.

\d{3} est défini quelque part dans PluXml pour expliquer qu'il ne faut prendre que les 3 chiffres dans le nom correspondant à la catégorie et pas à l'utilisateur? Tu sais où?

bazooka07 · mai 2020

https://wiki.pluxml.org/developper/developpement/
https://pluxopolis.net/comprendre-le-nom-des-fichiers-xml-des-articles.html

assodefis · mai 2020

Merci, j'ai lu ça mais je ne trouve pas où il est écrit que \d{3} est pour la catégorie uniquement.
L'utilisateur aussi est sur 3 chiffres, non?

Je ne comprends pas comment "\d{3}" peut être une expression régulière qui indique qu'on va rechercher des séries de 3 chiffres dans la liste des catégories séparées par des virgules dans le nom des fichiers d'articles.

Comment il sait qu'il ne faut regarder que les trois chiffres des catégories et pas aussi d'utilisateurs?

sken · mai 2020

pour ma pars, j'ai 2 colonnes sans trop toucher au fichier .show

<

div class="colbase c31 artbase">
<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
<article class="article" id="post-<?php *echo *plxShow->artId(); ?>">

Modifié le <time datetime="<?php $plxShow->artUpdateDate('#num_year(4)-#num_month-#num_day'); ?>">
<?php $plxShow->artUpdateDate('#num_day #month #num_year(4)'); ?>
</*time>

<?php $plxShow->artChapo(); ?>

</*article>
<?php endwhile; ?>

bazooka07 · mai 2020

@assodefis ,
"\d{3} n'est qu'une partie de l'expression régulière qui va filtrer les noms de fichiers articles.
Dans $plxMotor->nbArticles(), on va la compléter en ajoutant le préfixe \d{4} qui correspond à l'identifiant de l'article, suivi tout de suite par la liste des catégories recherchées, séparé par le caractère '.'.

assodefis · mai 2020

@sken comme je ne sais pas ce que sont tes classes .colbase .c31 ni .artbase, je ne vois pas bien comment tu fais. Avec du display flex ce serait plus simple à mon avis mais comme PluXml se base pour l'instant sur PluCSS (qui n'utilise pas flex) et pas encore sur Knacss, j'essaye d'afficher les articles par couple dans des div de 2 articles qui se succèdent.

Afficher les articles sur deux colonnes

Réponses