Simplifier l’usage des LOGOs

Les LOGO constituent une spécificité dans SPIP ; au départ, il s’agit juste d’une facilité pour associer un pictogramme visuel à chaque article, de façon à le retrouver plus vite visuellement.

Et comme un site illustré est plus agréable qu’une suite de pages uniquement textuelles, les squelettes de SPIP font systématiquement référence au LOGO associé a chaque objet dans son squelette.

Mais si l’affectation unitaire d’un LOGO à chaque article peut devenir rapidement fastidieuse, il y a quelques astuces à utiliser...

Article publié le 9 avril 2015, et actualisé en septembre 2021

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Vous avez certainement vu paraitre la boite d’ajout d’un document (qui peut être une image), et celle d’ajout d’un LOGO dans l’espace privé, du moins si vous avez configuré votre site pour les accepter (et précisé la fonction de gestion graphique : Configurer SPIP 2 : 3. Fonctions avancées).

 Logo et/ou document joint

Mais un logo n’est pas (actuellement !) traité comme un simple document joint ; d’abord les objets éditoriaux natifs de SPIP bénéficient d’un traitement particulier pour les insérer (cf.ci-dessus).
Ensuite, vous ne retrouverez pas les logos dans la médiathèque de documents, ce qui empêche de les réutiliser comme d’autres documents joints, y compris les images de portfolio : ceux-ci -des fichiers images uniquement- sont directement enregistrés dans la racine du dossier ./IMG/ avec un nom-système composé du radical d’objet concerné, suivi du numéro index de l’objet [1]....

Enfin, à l’usage vous n’aurez pas besoin de boucles supplémentaires pour les afficher : des balises calculées sont disponibles dans la boucle de chaque objet éditorial pour afficher directement le/les LOGO associés.

 Préformer un LOGO par filtres

Ensuite ces balises fournissent donc un fichier image, relevant de traitements spécifiques par rapport aux champs textuels :
- d’abord le pré-formatage de l’image : directement défini par un attribut de classe :
vous pourrez donc facilement modifier la classe CSS .spip_logospour rajouter une taille uniforme, un entourage, etc..
- et l’alignement relatif de l’image par rapport au texte : pas besoin de passer par des classes explicites, il vous suffira d’adjoindre un attribut [2] de la balise #LOGO_xxx{alignement}
- ensuite les filtres de traitement [3] vous penserez néanmoins à toujours insérer la balise de LOGO et son/ses filtres dans une expression parenthésée, et entre crochets :
[  (#LOGO_..{align.} | filtre_image..)  ]

Pour que vos rédacteurs et autres illustrateurs n’aient pas de questions sur le choix et surtout la recomposition des illustrations choisies [4] vous veillerez dans vos squelettes, à redimensionner systématiquement les logos , et d’ailleurs aussi les images [5]...
Exemple : [(#LOGO_MOT{left}|image_reduire{0,20})]

 Plusieurs logos alternatifs

Nous avons donc vu que le logo associé à un objet était automatiquement affiché -s’il existait- pour correspondre à la balise #LOGO_objet, pour chaque objet standard, ARTICLE, RUBRIQUE, AUTEUR... mais pas le DOCUMENT !
En plus vous bénéficiez -parfois- de plusieurs possibilités/occurrences de LOGO par objet éditorial.
- Un LOGO par défaut
Si votre article n’a pas de LOGO... la balise #LOGO ne génèrera rien, pas même un tag HTML <img ......> avec un gros gris, car il ne trouve pas d’image : SPIP reste propre !
Mais vous pouvez très bien rajouter un logo par défaut dans vos squelettes, en utilisant le test conditionnel sur la balise :
[(#LOGO|sinon{'<img src="./IMG/siteon.jpg'">'}|....inserer_attribut{..})]
- Un autre LOGO au SURVOL
D’abord un second logo, automatiquement activé (si configuré) au survol du logo à la souris ; cet effet visuel est disponible depuis longtemps en standard sur Article et Auteur, avec une balise dédiée (à condition qu’un second logo ait été défini pour chaque objet !).
- LOGO d’ ARTICLE par RUBRIQUE
Ensuite, vous pouvez utiliser une balise d’extension pour aller chercher un logo par défaut : cette possibilité n’est disponible QUE pour les articles, qui sont toujours rattachés à une rubrique : en cas d’absence du logo pour l’article, la balise #LOGO_ARTICLE_RUBRIQUE ira chercher directement le logo de la rubrique associée (mais la recherche est limitée à un seul niveau).

SPN logos articles rubriqueUn exemple, tiré du plan de ce site, montre les logos affectés à chaque rubrique ou article :on voit que l’article CMS (le dernier) n’a pas de logo associé : pourtant, son affichage vous montrera un logo (celui de la rubrique-secteur le contenant).

Ainsi les derniers articles des secteur Vous ACCUEILLIR et sous-rubrique Itinéraires de lecture ne montrent aucun logo : voyons comment on pourrait faire pour en afficher un ?

Pour afficher les lignes du plan avec les logos (de façon à vite contrôler leur présence sur un site à réviser !), le squelette d’origine a été modifié comme ci-dessous :

  1. <B_articles_racine>  <ul>
  2.    <BOUCLE_articles_racine(ARTICLES) {id_rubrique}>   <li>
  3.             <a href="#URL_ARTICLE"  
  4.                      [title="(#INTRODUCTION|supprimer_tags|attribut_html)"] >
  5.             [(#TITRE|supprimer_numero|textebrut)]</a>
  6.             [  (#LOGO_ARTICLE_NORMAL|image_reduire{0,15})]
  7.             [ - (#LOGO_ARTICLE_SURVOL|image_reduire{0,12})]    
  8.             [<small> &nbsp; - modifi&eacute; en (#DATE_MODIF|affdate_mois_annee)</small>].
  9.         </li> </BOUCLE_articles_racine>
  10.    </ul>  </B_articles_racine>

Télécharger

Imaginez de rajouter en troisième ligne de logo....
[ /(#LOGO_ARTICLE_RUBRIQUE||image_reduire{0,12})]  
vous feriez apparaitre le logo de la rubrique en remplacement du logo article absent..

Du coup, j’ai modifié ma boucle pour écrire

  1.                 [  (#LOGO_ARTICLE_NORMAL|image_reduire{0,15}|sinon{
  2.                   [ /(#LOGO_ARTICLE_RUBRIQUE|image_reduire{0,12})] })]
  3.                  [ - (#LOGO_ARTICLE_SURVOL|image_reduire{0,12})]    

Télécharger

Et voilà le résultat [6] :

(avec -en petit- le #LOGO_ARTICLE_RUBRIQUE ajouté ci-dessus)

Mais, si vous observez bien ?page=arbo, vous verrez que seuls les secteurs disposent d’un logo, les sous-rubriques ne faisant que reprendre celui du secteur.
Hélas, il n’existe pas de balise #LOGO_ARTICLE_SECTEUR ni de #LOGO_ARTICLE_RUBRIQUES qui remonteraient jusqu’à trouver un LOGO dans une rubrique de l’arborescence...

 D’autres traitements

Ensuite, vous pouvez dans vos squelettes appliquer divers traitements sur les images-logos d’origine, comme par exemple d’en extraire juste une partie....
C’est ce que vous proposeront les divers filtres :

  • image_recadre
  • image_reduire
  • image_passe_partout

Enfin, vous voudrez sans doute appeler un logo au sein d’un article, exactement comme une image de document joint : rien de standard n’existe à ce niveau dans SPIP, mais....
Un modèle (et peut-être une galerie de modèles, à ajouter à Squelettes de la "dist") permettra de fournir cette facilité à vos rédacteurs : rajoutez des noisettes dans ./squelettes/modeles/ sur le modèle de ./prive/modeles/img.html [7].


Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

[1Depuis SPIP4.0 cet emplacement est modifié en ./IMG/logo et d’autres modifications de comportement sont à noter : voir https://git.spip.net/spip/medias/co... et sq..

[2Au choix, left, right, center, top ou bottom : SPIP génèrera l’appel de syntaxe de la classe correspondante, à vous de la définir dans vos CSS.

[3Alors attention, jusqu’en SPIP 2.1 les filtres appliqués à une balise de LOGO devaient être précédés d’un double-pipe ||, mais la syntaxe est désormais uniformisée et il suffit d’un simple pipe | ; les exemples de cette page sont corrigés !

[4La question des droits sur les images doit aussi être examinée..

[5Un dimensionnement explicite des images en HTML serait intéressant pour une mise en page plus stable à l’affichage !

[6Dans ce contexte, l’affichage d’un #LOGO_ARTICLE_RUBRIQUE n’apporterait aucune information sémantique, ni d’illustration ; ce serait même moins explicite pour l’administrateur qui veut bien illustrer ses publications : je ne laisse pas en-ligne cette version complétée !

[7Quand j’aurai testé les syntaxes, peut-être que je penserai à rajouter l’exemple ici.


Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.

Article publié le 9 avril 2015, et actualisé en septembre 2021 .

Répondre à cet article