Il est fréquent, pour rythmer la navigation sur son site, de vouloir utiliser des logos différents (notamment de tailles différentes) pour un même article en fonction de l’endroit où il apparaît. Par exemple, utiliser un « gros » logo sur la page d’accueil du site qui permette de bien mettre en valeur l’article principal du moment, et un « petit » logo pour la navigation générale du site.
Jusqu’à récemment, les utilisateurs avaient créé des méthodes personnelles basées sur l’utilisation différenciée du logo « normal » et du logo « pour survol ». Dans notre exemple, le logo « normal » utilisé comme « petit logo », appelé par la balise #LOGO_ARTICLE_NORMAL, et sur le sommaire, le logo « pour survol » appelé par la balise #LOGO_ARTICLE_SURVOL pour afficher la « grande » version du logo. Cette méthode complique souvent le code des squelettes, et interdit l’utilisation habituelle des logos « avec survol » que SPIP fournit automatiquement. Elle est de plus d’une souplesse très limitée.
Depuis la version [SPIP 1.4], il est possible de joindre des documents aux articles (et, accessoirement, aux rubriques). Nous allons expliquer ci-dessous comment utiliser ces documents joints pour créer plusieurs logos pour un même article.
Principe général
Nous continuerons à utiliser les deux logos de l’article pour afficher les logos « normaux » (ceux qui apparaissent dans les liens de navigation les plus fréquents, par exemple sur les pages des rubriques), ce qui permet de conserver la simplicité de gestion des logos avec SPIP et la gestion automatique du survol (on revient à l’utilisation évidente de la balise #LOGO_ARTICLE, ou de #LOGO_ARTICLE_RUBRIQUE).
Nous déciderons de joindre aux articles un document (généralement une image aux formats GIF, JPEG ou PNG) auquel nous donnerons systématiquement le même nom. Il nous suffira d’afficher ce document (en l’appelant par son nom) à la place du logo « normal » lorsque nous le désirerons.
Cette méthode permet ainsi de créer autant de logos différents que nécessaire pour un même article (pas seulement un grand logo et un petit logo, mais pourquoi pas une image pixelisée avec un travail typographique élaboré pour afficher le titre, etc.).
Nous verrons de plus que, grâce aux boucles de SPIP, on pourra très facilement dans les squelettes déterminer si un tel « grand » logo (document portant le nom choisi par nous) est présent, et agir en conséquence (afficher à la place le logo « normal », du texte spécifique, ou carrément un autre élément graphique).
Miracle de la technologie moderne, des formats propriétaires et de l’accès par haut-débit, de telles versions spécifiques des logos, étant des documents joints, pourront être d’un autre format que des images. On pourra ainsi afficher, en tant que « grands » logos, des animations Flash ou Shockwave, des animations vidéo...
Mise en place des documents et choix des noms
Nous décidons (arbitrairement, mais faites selon vos besoins) que les documents joints utilisés en tant que « gros » logo seront tous intitulés « spip_logo » ; ce document « spip_logo » sera affiché sur la page du sommaire de notre site à la place du logo normal.
Nous utiliserons d’autres noms dans la suite de cet exemple pour créer des effets plus fins, décidons immédiatement qu’ils auront tous des noms commençant par « spip_... ». (Cela nous permettra, dans l’affichage habituel des documents joints à un article d’exclure tous les documents dont le nom commence par « spip_... ». De cette façon, l’utilisation de documents en tant que logos alternatifs n’interfèrera pas avec l’affichage, par exemple, d’un portfolio.)
Sur un article publié en ligne (de façon à pouvoir bidouiller nos squelettes en les testant), nous installons simplement :
- un logo normalement (colonne de gauche) ; nous pouvons si nous le voulons installer une version de l’image « pour survol » pour la gestion automatique du changement d’image lors du survol avec la souris ;
- Le logo « normal »
- Le logo est installé classiquement. A priori, il s’agit d’une image de taille modeste.
- en bas de la page de l’article, nous installons un « document joint » (par le pavé « JOINDRE UN DOCUMENT ») ; pour faire simple, installons une image (JPEG, GIF, PNG) ; une fois ce document installé (« uploadé »), nous lui donnons pour titre « spip_logo ». Voilà, c’est la seule manip nécessaire... SPIP affiche ce document en bas de la page de l’article dans l’espace privé, en donnant son titre (« spip_logo ») et en indiquant ses dimensions en pixels.
- Le document « spip_logo »
- Le seul impératif est de donner à ce document le titre « spip_logo ». Il est inutile d’installer une vignette de prévisualisation.
Dans le cas d’un document multimédia (Flash, Shockwave...), il faut indiquer à la main ses dimensions en pixels.
Nous décidons de l’usage de ce document intitulé « spip_logo » : il sera affiché sur la page d’accueil du site à la place du logo normal du dernier article publié. De cette façon, la page de Une du site peut afficher une « grande » image pour mettre en valeur l’article en vedette.
Afficher « spip_logo » en Une du site
Commençons par insérer une boucle toute simple pour afficher le dernier article publié sur le site et son logo « normal ». (Dans tous les exemples qui suivent, le code HTML est réduit à son strict minimum ; à vous d’enrober cela avec la mise-en-pages graphique qui vous convient.)
Cette boucle très simple affiche le premier article ({0,1}) parmi tous les ARTICLES, sélectionnés par date de publication ({par date}) du plus récent au plus ancien ({inverse}). On affiche donc bien le dernier article publié sur le site. À l’intérieur de la boucle, on affiche le logo de l’article suivi du titre de l’article.
Nous avons dit que nous voulions afficher, à la place du logo normal, le document joint à cet article dont le titre est « spip_logo ». Le code devient :
La BOUCLE_logo_article_vedette sélectionne parmi les documents joints à cet article ({id_article}) celui dont le titre est « spip_logo » ({titre=spip_logo}). À l’intérieur de la boucle, on demande l’affichage de ce document joint (#EMBED_DOCUMENT).
L’usage de #EMBED_DOCUMENT (encore peu répandu parmi les sites utilisant SPIP) dans les squelettes permet d’insérer, via le système de boucles, directement le document à l’intérieur de la page. SPIP es charge de créer le code correspondant à des images ou à des fichiers multimédia.
Inconvénient : si l’article n’a pas de document joint intitulé « spip_logo », le code suivant n’affiche que le titre. On va donc effectuer une nouvelle modification, qui permet d’afficher le logo « normal » de l’article s’il n’existe pas de document joint pour cet usage. Notez bien : une fois cette méthode comprise, il n’y aura plus d’autres subtilités pour réaliser tous les effets suivants...
Nous avons tout simplement ajouté l’appel au logo « normal »
(#LOGO_ARTICLE) en texte alternatif (ce qui se trouve avant <//B...> d’une boucle s’affichant si la boucle ne fournit pas de résultat - ici, s’il n’y a pas de document joint à l’article portant le titre « spip_logo »).
Nous avons obtenu le résultat désiré :
s’il existe un document joint associé à l’article auquel nous avons donné le titre « spip_logo », il est directement affiché ;
sinon, c’est le logo « normal » qui est affiché.
Exclure ces documents spécifiques de l’affichage normal des documents joints
Dans le squelette des articles, on affiche les documents joints grâce à la BOUCLE_documents_joints, dont les critères essentiels sont :
On appelle les DOCUMENTS liés à cet article ({id_article}), qui sont bien des documents joints et non des images ({mode=document}) et qu’on n’a pas déjà affichés à l’intérieur du texte de l’article en utilisant le raccourci <EMBxx> ({doublons}).
Modifions ce code pour interdire l’affichage, dans cette boucle (qui est une sorte de « portfolio »), des documents dont le nom commence par « spip_... » (on ne veut pas afficher ici le « gros » logo utilisé en page de Une du site) :
Le critère {titre!==^spip\_} est une expression régulière, dont la syntaxe est très codifiée. On sélectionne les documents dont le titre n’est pas formé ainsi (le !== signifie « qui ne correspond pas à l’expression régulière ») : les premiers caractères (le symbole ^ indique le début de la chaîne de caractères) sont « spip » suivi de « _ » (dans la syntaxe des expressions régulières, « _ » indique le caractère « _ », de la même façon que « \. » indique le caractère « . »).
Ce critère sélectionne donc les documents joints dont le titre ne commence pas par « spip_ ».
L’exposé du principe général est terminé, vous avez largement de quoi vous amuser avec ça sur votre propre site. Les exemples suivants n’en sont que des variations.
Afficher toujours un gros logo en haut de page
Je décide, toujours de manière arbitraire, qu’il doit toujours y avoir une grosse image en haut de page de mes articles. Il s’agit d’un choix graphique de ma part : pour assurer l’unité graphique de mon site, j’affiche en haut de page une version de grand format liée à l’article (une variation du principe du « grand » logo) et, à défaut, une image stockée ailleurs sur mon site.
Toujours le même principe : je joins à mon article un document dont je fixe le titre à « spip_haut ». (Pour éviter que ce document ne s’affiche dans le « portfolio » de la BOUCLE_documents_joints précédente, je fais commencer son titre par « spip_... ».)
Dans mon squelette des articles, j’affiche simplement en haut de page ce document :
Comme dans l’exemple précédent, j’affiche le document, lié à l’article de cette page, et dont le titre est « spip_haut ». Fastoche.
Comme dans le premier exemple, je pourrais décider d’afficher le logo de l’article si ce document n’existe pas :
Mais ça n’est pas le résultat désiré. Je veux, pour des impératifs graphiques, toujours afficher une grande image aux dimensions prédéterminées.
Je vais donc (toujours un choix arbitraire de ma part) créer des images de substitution, utilisées « par défaut », au cas où un article n’aurait pas d’image en propre. Ces images répondent à mes impératifs graphiques (par exemple, elles ont toutes les mêmes dimensions que les documents que j’utilise d’habitude en « spip_haut »).
Sur mon site, je créée une rubrique pour accueillir « en vrac » ces documents de substitution. J’active les documents associés aux rubriques. (Je peux aussi créer un article qui accueillerait tous ces documents, et ainsi ne pas activer les documents joints aux rubriques. Le code serait à peine différent.) Admettons que cette rubrique porte le numéro 18 (c’est SPIP qui va fixer automatiquement le numéro de la rubrique lors de sa création). J’installe tous mes documents de substitution à l’intérieur de cette rubrique numéro 18. (Il est inutile de leur donner un titre.)
Pour appeler, au hasard, un document installé dans cette rubrique, il me suffit d’invoquer les critères suivants :
(Notez bien : le critère {par hasard} ne signifie pas que l’image sera à différente à chaque visite de la page, mais qu’elle sera sélectionnée au hasard à chaque recalcul de la page.)
On prendra soin, dans la navigation du site, d’interdire l’affichage de la rubrique 18, qui n’a pas besoin d’être présentée aux visiteurs. Le critère {id_rubrique!=18} fera l’affaire.
Pour terminer la mise en plage du dispositif, il nous suffit d’insérer cette boucle affichant un document de substitution pris au hasard dans la rubrique 18 en tant que texte alternatif à notre BOUCLE_doc_haut (à la place du #LOGO_ARTICLE) :
Afficher un titre graphique
Toujours sur le même principe, nous allons afficher une version graphique du titre de l’article. Il s’agit d’une image réalisée avec un logiciel de dessin, où apparaît, avec une typographie particulièrement soignée (effets de relief, de dégradés de couleurs, avec des polices de caractère exotiques...) le titre de l’article.
Décrétons qu’il s’agira d’un document joint associé à l’article, que nous titrerons « spip_titre ».
Pour appeler ce document, à l’endroit où doit être affiché le #TITRE de l’article, installons la boucle désormais connue :
Notez à nouveau que cette méthode permet non seulement d’utiliser une image pour afficher le titre, mais aussi une animation Flash, un film... Dans ces cas, il vous faudra indiquer à la main pour votre document joint quelles sont ses dimensions en pixels.
Complétons le dispositif : s’il n’existe pas de document joint portant le titre « spip_titre », il faut afficher en tant que texte HTML classique les informations nécessaires :
* * *
Signalons un dernier avantage à cette méthode...
Elle permet de faire par la suite encore évoluer radicalement l’interface graphique de votre site. Sans avoir à supprimer un par un tous les documents intitulés « spip_haut », « spip_titre »..., il vous suffit de créer de nouveaux squelettes qui ne les appellent tout simplement pas.
Par exemple, si les documents « spip_haut » étaient précédemment tous conçus pour une largeur de 450 pixels, et que la nouvelle interface graphique requiert des images d’une largeur de 600 pixels, vous n’aurez pas besoin de modifier un par un tous vos fichiers « spip_haut ». Il vous suffit, dans les squelettes, de ne plus faire appel aux documents intitulés « spip_haut », mais d’utiliser un nouveau nom (par exemple « spip_large ») et d’installer au fur et à mesure vos nouvelles versions de documents en les titrant « spip_large ». Pendant la transition, il n’y aura pas d’incohérences graphiques.
Les plus jetés d’entre vous peuvent même imaginer toutes sortes de tests sur le type de document ({extension=...}) ou sur leur taille ({largeur=...}, {hauteur=...}) (aucun PHP nécessaire) pour réaliser des interfaces selon ces tests (par exemple, une certaine interface graphique si « spip_haut » fait 450 pixels de largeur, et une autre s’il fait 600 pixels de largeur...).
