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.

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
    [(#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) 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

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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