Utiliser le filtre « unique » pour présenter une grande liste d’articles

Présenter une grande liste d’articles en affichant la première lettre de leur titre sous forme d’onglets, à l’aide d’une boucle très simple utilisant le filtre « unique ».

On dispose d’un ensemble important d’articles (qu’on va supposer appartenir à une même rubrique pour simplifier),
et on veut en afficher la liste en présentant dans un onglet la première lettre de leur titre comme ceci :

Evidemment chacun adaptera la présentation à son gout en modifiant les styles CSS, y compris en simulant de véritables onglets
(voir par exemple la contrib Menu « portes coulissantes »).

Le but de cette contrib n’est pas de parler de styles mais de boucles.

Le code

1)- Les styles

On construit une liste en affichage « inline » puis les styles des onglets dans des balises <a>, le style « a:hover » étant le même que celui du « a » de la page courante.
Voici le shéma (voir le document joint pour un choix plus précis) :

        #onglets {
                ...
        }
        #onglets li {
                display: inline;
                list-style: none;
                margin: 0;
        }
        a.onglets_off {
                text-decoration: none;
                color: #FFFFCC;
                background-color: #005731;
                padding: 4px 6px 4px 6px;
                border: 1px solid white;
        }
        a.onglets_off:hover, a.onglets_on {
                text-decoration: none;
                color: #005731;
                background-color: #FFFFCC;
                padding: 4px 6px 5px 6px;
                border: 1px solid white;
        }

2)- Les boucles

a)- La boucle qui affiche les onglets :

<BOUCLE_onglets(ARTICLES){id_rubrique}{par titre}{titre==^[A-ZÀÉÈ]}>

Le dernier critère peut être ajusté (voire supprimé), le but étant de ne retenir que les articles dont le titre commence pas une majuscule
(sinon l’article ne sera pas listé).

Pour chaque article, mais une seule fois pour chaque lettre différente :

- Récupérer la première lettre du titre dans une variable à l’aide de #SET et d’une expression régulière :

#SET{initiale,#TITRE|match{\w{1}}}

À ce propos, le filtre « match » ne semble pas prendre de classe du genre [A-Z], sans doute à cause des crochets.

- Replacer à l’aide de #GET 3 fois cette lettre dans le lien de l’onglet ; c’est là qu’on utilise le filtre « unique ».
Il faut choisir un des #GET (ici le texte cliquable du lien) et placer les autres dans ses parties alternatives comme ceci (sinon ça ne marche pas) :

[<a [class="(#ENV{lettre,A}|=={#GET{initiale}}|?{'onglets_on','onglets_off'})"] href="spip.php?rubrique#ID_RUBRIQUE&lettre=#GET{initiale}"> (#GET{initiale}|unique) </a>]

b)- La boucle qui affiche les articles (boucle classique avec pagination) :

<BOUCLE_tous_articles(ARTICLES){id_rubrique}{par titre}{titre==^#ENV{lettre,A}}{pagination}>

La valeur par défaut de #ENV active l’onglet de la lettre A s’il n’y a pas de paramètre dans l’URL.

3)- Page de code complète à télécharger :

Charger la page onglets.html dans votre dossier squelettes après avoir indiqué à la ligne 3 un numéro de rubrique (où il y a des articles à lister).

Appeler ensuite mon_site_spip/spip.php?page=onglets pour tester le code.

Dernière modification de cette page le 28 mars 2007

Discussion

5 discussions

  • Intégré à une rubrique, le code marche. Mes articles sont triés par lettres. L’affichage de ma rubrique me montre les articles commençant par A. Dès que je clique sur un autre des onglets, ça me met une erreur 404. Aurais-je loupé une étape ?
    Je suis en SPIP 1.9.2e.

    Merci d’avance pour une éventuelle réponse.

    Et merci pour cette contrib’ très simple d’utilisation !

    Répondre à ce message

  • ivandps

    Bonjour
    Les articles à présenter ont pour titre, le titre d’un mot clé.
    Dans le champ titre de l’article, j’ai donc <motxxxx|titre>.
    Par conséquent le filtre titre par titretitre==^[A-ZÀÉÈ]ne marche pas. As-tu une idée pour contourner ce problème ?
    Merci IDP

    Répondre à ce message

  • Bon, ce filtre est intéressant par contre je n’arrive pas à afficher des articles > 100. C’est bien domageable car j’ai plus de 300 articles sur mon spip et je me coupe d’une grande partie non visibles.
    Y a-t-il un remède ?

    Répondre à ce message

  • 2
    Reyatem

    Je trouve cette contribution très sympathique, je voulais faire un petit glossaire, mais je voulais qu’il soit appelé par un mot-clé clé sur un squelette rubrique et qu’il utilise les brèves plutôt que les articles. Je me suis permis de bidouiller ce que vous aviez fait, mais comme je n’y connais pas grand-chose chose, je me permets de vous le soumettre pour d’éventuelles corrections, si cela présente un intérêt ?
    Il faut créer un mot-clef clef « onglets », que l’on affecte à la rubrique concernée.
    Voilà, ça marche. Il faut avoir au moins une brève dans la rubrique.
    Voilou, merci encore.
    Le squelette (fait sur la rubrique de la dist)
    _
    _


    #CACHE7200
    [(#REM) PrŽciser un numero de rubrique ]
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd’>

    [] [(#REM) Lien vers le flux RSS de la rubrique ] [(#REM) Styles pour l'affichages des onglets ]
    [(#REM) Entete de la page + titre du site ] [(#REM) Fil d'Ariane ]
    <:accueil_site:> > [(#TITRE|couper{80})][ > (#TITRE|couper{80})]
    [(#REM) Contenu principal : contenu de la rubrique ]
    [(#LOGO_RUBRIQUE||image_reduire{200,200})]

    #TITRE

    [

    <:dernier_ajout:> : (#DATE|affdate_jourcourt).

    ]
    [
    (#TEXTE)
    ]

    [(#TITRE|supprimer_numero)]

    #DESCRIPTIF

    [(#REM) Les onglets ]
    [(#REM) Les BREVES ] #ANCRE_PAGINATION
    [(#LOGO_BREVES||image_reduire{120})]
    [(#TITRE)]
    [(#INTRODUCTION|justifier)]  - Voir la fiche -

    #PAGINATION

    (Au total : #GRAND_TOTAL [(#ID_RUBRIQUE|=={99}|?{brochures,BREVES})])

    Il n'y a pas de brochure dont le titre commence par #ENV{lettre}. /B_tous_BREVES> [(#REM) Articles de la rubrique ]
    #ANCRE_PAGINATION
    • #TITRE

      [(#DATE|affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)]
    [

    (#PAGINATION)

    ]
    [(#REM) Si aucun article, affiche un plan de la rubrique ]
    /B_articles>[(#REM) supprimer pour toujours avoir le miniplan] [(#REM) Documents joints a la rubrique ]

    <:titre_documents_joints:>

    [(#REM) Breves du secteur ]
    #ANCRE_PAGINATION [

    (#PAGINATION)

    ]
    • [(#DATE|affdate_court) – ]#TITRE
    [(#REM) Sites de la rubrique ]
    [(#REM) Proposer un site ] #FORMULAIRE_SITE
    [

    <:info_notes:>

    (#NOTES)
    ]
    [(#REM) Menu de navigation laterale ]
    [(#REM) Menu de navigation par rubriques ] [(#REM) Menu de navigation mots-cles ]
    [(#REM) Pied de page ]
    • Le problème est que tu as des titres qui commencent par des minuscules et tes onglets sont dupliqués (a,A etc..).
      Pour résoudre ce problème, essaye les modifications suivantes :

      -  Dans ton fichier mes_fontions.php (si tu n’en n’as pas, tu en crée un dans ton dossier squelette ; en haut de ta page tu place : <?php et en bas de ta page,
      ?>), tu ajoute la fonction :

      /*
       *   +----------------------------------+
       *    Nom du filtre : upper                                              
       *   +-------------------------------------+
       *    Fonctions :
       *    Transforme une chaîne de caractères en majuscules
       *   +-------------------------------------+ 
      */
      
      function upper ($chaine) {
              return strtoupper($chaine);
      }
      
      // FIN du filtre upper

      -  Dans ton squelette tu remplace dans la partie cliquable du lien :

      (#GET{initiale}|unique)

      par

      (#GET{initiale}|upper|unique)

      et dans la même boucle BOUCLE_onglets, tu supprime le critère titre==^[A-AÉÈÀ].

      Ainsi tu n’auras que des majuscules dans tes onglets, l’onglet « A » contenant les titres qui commencent par a ou A.

      En effet ça semble marcher car les critères tels que titre==A n’ont pas l’air de tenir compte de la casse
      (je n’ai pas eu le temps de vérifier ni de bien comprendre cet aspect).

    • Reyatem

      Merci, vous êtes très sympa d’avoir été voir. Depuis j’essaie de faire un mini dico sur des articles, avec des images et un petit exercice. Mon problème est la gestion des accents et des images car je voudrais pouvoir imprimer en pdf ( pour l’instant ça ne fonctionne pas sur les articles du mini dico ). Les articles dont les titres ont des accents ne s’affichent pas par exemple échelle...
      Si vous avez quelques minutes et des idées, je suis preneur.
      Merci en tous les cas.
      Reyatem

    Répondre à ce message

  • 1

    Coucou, voici la solution que j’ai utilisé pour produire le même effet et gérer les titres avec une première lettre en minuscule, mais par contre sans gestion des accents...

    <a href="[(#SELF|parametre_url{lettres,''}|parametre_url{debut_arti,''})]">
            tous
    </a>
    <BOUCLE_alphabet(ARTICLES){id_rubrique}{par titre}>[
            (#SET{titre,[(#EVAL{strtoupper("[(#TITRE|couper{1}|unique)]")})]})][
            (#SET{titre_min,[(#EVAL{strtolower("[(#GET{titre})]")})]})][ -
            <a href="[(#SELF|parametre_url{lettres,''}|parametre_url{debut_arti,''})]
                    &lettres=&#91;(#GET{titre})#GET{titre_min}&#93;"
            >
                    [(#GET{titre})]
            </a>
    ]</BOUCLE_alphabet>

    Ici j’enregistre dans titre la première lettre de l’article passée en majuscule, puis dans titre_min la première lettre en minuscule.
    Cette première boucle construit la liste alphabétique. Avec les [ ] bien placés pour ne pas avoir toutes les occurences de la boucle.
    On notera : lettres=&#91;#GET{titre}#GET{titre_min}&#93; qui produit un lien du genre lettres=[Aa] en utilisant les entités HTML car spip n’aime pas trop les [ ] en plein milieu des filtres.
    Ainsi que l’emploie de #EVAL pour utiliser les fonctions strtolower et strtoupper de PHP.

    <B_arti>
            #ANCRE_PAGINATION
    <BOUCLE_arti(ARTICLES){id_rubrique}{par titre}{titre==^#ENV{lettres}}{pagination}>
            <p>#TITRE<br/>#INTRODUCTION
    </BOUCLE_arti>
            #PAGINATION
    </B_arti>

    Et cette deuxième boucle produit la liste des articles filtrée.
    Une recherche sur titre==^[Aa] renvoie les articles dont le titre commence par A ou a.

    • (#SET{titre,[(#EVAL{strtoupper("[(#TITRE|couper{1})]")}|unique)]})][

      On a beau se relire cent mille fois...

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom