[SPIP] Mettre en exergue une partie d’un titre
Astuce pour scinder un titre et styliser son affichage

On est parfois confronté au souhait d’afficher une version raccourcie d’un #TITRE d’article ; typiquement dans un menu de navigation latéral où l’espace est précieux, ou bien si l’on souhaite mettre en exergue une partie seulement du titre (les n premiers mots).

Prenons l’exemple trivial d’un #TITRE un peu long :

La buvette des joyeux pétanqueurs reprend du service à la fin du mois de juin.

Comment faire pour gérer toute la longueur du titre dans une mise en page où la titraille est imposante ?

Il existe le fameux filtre |couper qui s’avère souvent très efficace, quoiqu’il peut opérer une césure malvenue, et que l’on perd une partie de l’information. D’aucun serait tenté de jouer entre les valeurs des champs #TITRE, #SURTITRE (voire #SOUSTITRE) ; par exemple, ces derniers étant une version étendue du premier. Il s’agit, je pense, d’une mauvaise solution qui implique une certaine redondance d’information, sans compter un usage fastidieux.

Et donc l’astuce je vous la donne. En insérant un espace insécable   au bon endroit :

La buvette des joyeux pétanqueurs reprend du service à la fin du mois de juin.

Combiner à cela, un petit filtre maison à mettre dans son fichier mes_fonctions.php

  1. function scinder($texte){
  2.   $txt = explode(" ", $texte);
  3.   if (is_array($txt) AND isset($txt[1]))
  4.     $texte = "<strong>".$txt[0]."</strong><span> ".$txt[1]."</span>";
  5.   return $texte;
  6. }

Télécharger

On obtient un titre dont la première partie est contenue dans un <strong>, et la suite dans un <span>. Dès lors on peut faire ce que l’on veut avec du CSS, sans trop de vérification de conditions ni de variantes de squelette.

  1. h2{}
  2. h2 strong {color: #954141;font-size: 3em}
  3. h2 span {color:#437788;font-size: 1em}

Télécharger

Libre à vous d’inclure le code où vous le souhaitez dans votre squelette, au cas par cas :

[<h2>(#TITRE|scinder)</h2>]

Enfin, si vous souhaitez l’appliquer à toutes les balises #TITRE de manière automatique, vous pouvez définir une règle sur la table des traitements dans mes_options.php :

$GLOBALS['table_des_traitements']['TITRE'][]= 'scinder(%s)';