Plus besoin d’associer laborieusement des logos aux articles quand ils sont générés de façon automatique ! Voici un modèle à suivre.
J’ai tout de suite adoré le système de « logos » dans SPIP, qui permet d’associer un visuel à chaque objet éditorial, individuellement (par exemple avec #LOGO_ARTICLE) ou de façon automatisée en héritant du logo de la rubrique parente (avec #LOGO_ARTICLE_RUBRIQUE). Cela permet de disposer d’un visuel identifiant pour chaque cas et équilibre agréablement les mises en pages.
Mais... très souvent, quand il n’est pas identique à celui de sa rubrique parente, le logo d’un article ne fait que répéter l’un des documents visuels associé à cet article, en plus petit, voire recadré, et cela commençait à m’ennuyer de fabriquer ces centaines de vignettes à la main. C’est particulièrement pénible lors d’une refonte de site, quand il s’agit d’assortir tous les logos à la nouvelle charte graphique...
On peut s’épargner cette dernière étape en automatisant la génération des logos, notamment grâce aux traitements automatisés des images introduits en SPIP 1.9. Je vais encore plus loin en complétant le fonctionnement natif de SPIP pour générer un logo de façon automatique, à partir des images associées à l’article, sans plus nécessiter d’intervention.
Programmation de logos d’article automatiques
C’est un vieux truc que j’utilise depuis longtemps et que j’ai partagé la première fois dans les squelettes « Chez nous », sous la forme du modèle logo_article.html que nous allons reconstruire et améliorer ici.
Pour commencer, plaçons-nous dans une boucle article. Je choisi d’utiliser la première image associée dans le temps, car c’est souvent la plus identifiante :
<BOUCLE_doc(DOCUMENTS) {id_article} {extension IN jpg,gif,png} {par date} {0,1}>Si aucune image n’est associée à l’article, allons chercher le logo de sa rubrique parente, comme d’habitude. La balise #LOGO_ARTICLE_DOCUMENT ne convient pas ici, et il faut boucler à nouveau :
<BOUCLE_doc(DOCUMENTS) {id_article} {extension IN jpg,gif,png} {par date} {0,1}>#SET{logo_document,#LOGO_DOCUMENT}</BOUCLE_doc>
<BOUCLE_rub(RUBRIQUES) {id_rubrique}>#SET{logo_rubrique,#LOGO_RUBRIQUE}</BOUCLE_rub>
<//B_doc>Au passage, n’affichons pas les logos dans ces boucles, mais stockons-les avec #SET, pour pouvoir les manipuler ensuite de façon à n’afficher que l’un d’eux :
[(#GET{logo_document}
|sinon{[(#GET{logo_rubrique})]}
)]Complètons en affichant un visuel par défaut, nommé thumb spip_logo.png, en cas d’absence d’image à tous les niveaux, et en affichant prioritairement le logo d’article s’il existe :
[(#LOGO_ARTICLE||sinon{
[(#GET{logo_document}|sinon{
[(#GET{logo_rubrique}|sinon{
[(#LOGO_SITE_SPIP||sinon{[<img src="(#CHEMIN{img/thumb spip_logo.png})" alt="" />]})]
})]
})]
})]Tous ces visuels pouvant être de tailles très diverses, terminons par un peu de mise en forme. Pour ce faire, j’apprécie particulièrement l’indispensable filtre image_passe_partout, que je rogne ensuite de quelques pixels pour éviter les éventuelles scories sur les bords. Enfin, n’oublions pas de réaffecter le sélecteur CSS dédié aux logos dans SPIP, et dont les documents ne sont bien évidemment pas dotés :
}
|image_passe_partout{52,52}
|image_recadre{50,50,center}
|inserer_attribut{class,thumb spip_logo}
)]Voici donc le code complet, tel que je l’utilise couramment en modèle, et que je vous invite à améliorer et adapter à vos besoins :
<BOUCLE_doc(DOCUMENTS){id_article}{extension IN jpg,gif,png}{par date}{0,1}>#SET{logo_document,#LOGO_DOCUMENT}</BOUCLE_doc>
<BOUCLE_rub(RUBRIQUES){id_rubrique}>#SET{logo_rubrique,#LOGO_RUBRIQUE}</BOUCLE_rub>
<BOUCLE_article(ARTICLES){id_article}>#SET{logo_rubrique,#LOGO_RUBRIQUE}</BOUCLE_article><//B_rub><//B_doc>
[(#LOGO_ARTICLE||sinon{
[(#GET{logo_document}|sinon{
[(#GET{logo_rubrique}|sinon{
[(#LOGO_SITE_SPIP||image_nb|image_alpha{90}|sinon{[<img src="(#CHEMIN{img/thumb spip_logo.png})" alt="" />]})]
})]
})]
}|image_passe_partout{52,52}|image_recadre{50,50,center}|inserer_attribut{class,thumb spip_logo})]
Dans les squelettes : #MODELE{logo_article}
Pour que cela soit facile à utiliser dans les squelettes, employons un modèle SPIP. Si vous utilisez ma trousse, vous disposez déjà d’un modèle prêt à l’emploi, sinon créez un fichier intitulé logo_article.html dans le sous-répertoire /modeles de votre dossier /squelettes (s’il n’existe pas créez-le) pour y copier le code ci-dessus une bonne fois pour toutes.
Dans les squelettes, écrivez simplement #MODELE{logo_article}, sans argument, dans vos boucles articles. Ça fonctionne aussi dans les boucles rubriques, essayez ! Continuez d’utiliser les balises de SPIP quand c’est nécessaire et ajustez le modèle au cas par cas, par exemple :
[(#MODELE{logo_article}|image_sepia|image_reduire{32})]
Désactivez donc les logos !
Les erreurs de saisie sont si fréquentes dans SPIP entre les logos, les documents et les images, dont l’interfaçage et surtout les concepts sont si peu évidents pour le commun des utilisateurs et utilisatrices, que la suppression d’une de ces possibilités est un soulagement.
Il n’est en effet plus nécessaire d’affecter des logos aux articles avec cette approche, puisque ceux-ci sont fabriqués de façon automatique. On peut donc désactiver cette fonctionnalité en temps normal, après avoir affecté des logos aux rubriques.
Cependant, il arrive parfois que le logo généré par cette méthode ne soit pas satisfaisant. Dans ce cas, heureusement rare, il suffit d’affecter un logo à l’article pour reprendre la main. La saisie de logo ne sert donc plus qu’à effectuer de rares surcharges. À défaut de pouvoir la réserver aux seuls admins, il faudra la réactiver ponctuellement pour ce faire.
Peut mieux faire...
Le code présenté ici est assez coûteux en performance car chaque logo possible est calculé est stocké même s’il n’est finalement pas utilisé, ce qui mériterait quelque optimisation. Mieux vaudrait éviter le modèle, car n’étant pas mis en cache, les modèles sont recalculés à chaque appel... mais la syntaxe d’appel d’un inclure serait ici trop pénible, jugez-en : [(#INCLURE{fond=logo_article}{id_article})]...
C’est toujours bon à prendre, en attendant que le système des logos soit amélioré dans SPIP lui-même. Mieux vaudrait pourtant programmer une balise qui, paraît-il, tient en 5 lignes de PHP... Cette balise s’écrirait tout simplement #LOGO et calculerait et afficherait automatiquement le logo de l’objet éditorial du contexte, sinon celui de sa rubrique parente, etc. Qui dit mieux ?
Vos commentaires
1. Le 12 juillet 2010 à 23:31, par Cédric
En réponse à : Logos d’article automatiques
Je propose donc le squelette
logo.htmlcontenant :et, dans
mes_fonctions.php:Ce qui permet l’utilisation de ce logo automatique avec la simple balise
#LOGO2. Le 13 juillet 2010 à 02:17, par Loiseau2nuit
En réponse à : Logos d’article automatiques
« Mieux ! »
(oui bon, je sais, c’était facile... ;-) )
3. Le 13 juillet 2010 à 08:23, par Fil
En réponse à : Logos d’article automatiques
En nommant le logo automatique #LOGO, on s’oblige à réécrire les squelettes ; pourquoi ne pas modifier #LOGO_ARTICLE plutôt ?
4. Le 13 juillet 2010 à 09:17, par Romy Têtue
En réponse à : Logos d’article automatiques
Parce qu’elles proposent des affichages différents.
#LOGOdevrait pouvoir s’utiliser partout et toujours afficher quelque chose : le logo du site si c’est hors boucle, le logo d’une rubrique si la balise est utilisée dans une boucle rubrique, d’un article si... d’une brève si... d’un mot si...#LOGO_ARTICLEne renvoie jamais qu’un logo d’article.5. Le 14 juillet 2010 à 20:02, par georges
En réponse à : Logos d’article automatiques
Il y a un truc que je ne « percute pas » : le morceau de code
[(#GET{logo}|oui)]sert à quoi ? (=veut dire quoi ?). De ce que j’ai en tête, ce filtre permet de mettre qqchose dans une partie optionnelle, mais là ?6. Le 16 juillet 2010 à 16:25, par superYMS
En réponse à : Logos d’article automatiques
Merci pour cette contribution, ça confirme la gestion actuelle, plutôt pas simple (pour les traductions d’articles c’est pas ça encore !), des logos par SPIP, qui serait à revoir !
J’aime bien l’astuce de Cédric, à savoir mettre en place une nouvelle balise, cependant je remarque :
si quelqu’un pouvait apporter ces optimisations, je suis preneur !
@+
7. Le 17 juillet 2010 à 10:35, par georges
En réponse à : Logos d’article automatiques
Pardonnez-moi d’insister un peu lourdement au sujet de la présence de
[(#GET{logo}|oui)]dont je n’arrive pas à comprendre à quoi il sert ici ou alors je suis mirot et y’a un truc gros comme un camion qui m’échappe ? A moins que cette écriture ait un sens qui n’est pas celui que je me fais de cette écriture... Un éclairage SVP, ce serait sympa !8. Le 17 juillet 2010 à 12:51, par Jonathan
En réponse à : Logos d’article automatiques
Merci pour cette contribution.
J’aurais une petite question toutefois. Je récupère des article syndiqués mis en page directement. Il n’y a donc aucun document attaché, mais des images dans les articles. Je souhaiterais pouvoir récupérer la première image du corps du texte pour la définir comme logo.
Est-ce que vous auriez une piste ?
Merci !
9. Le 18 juillet 2010 à 15:13, par Cédric
En réponse à : Logos d’article automatiques
[(#GET{logo}|oui)]renvoie un espace si un logo a été trouvé. Ainsi la partie principale de la boucle renvoie quelque chose (un espace), et la partie alternative n’est pas executée. C’est une optimisation pour minimiser le nombre de calcul de#LOGO_xx10. Le 18 juillet 2010 à 19:37, par georges
En réponse à : Logos d’article automatiques
Merci de la réponse... qui me fait voir les chose sous un autre angle que je ne le pensais jusque maintenant. Dans ma tête, une
<BOUCLE>est une forme d’écriture d’une requète qui :soit donne un résultat
soit n’en donne pas (Bon, d’accord, à chaque fois, c’est bien un résultat, mais disons que mysql_fetch_array contient qqchse ou ne contient rien).
D’où, peu importe qu’il y ait un « espace » ou un « toto » de présent dans la partie principale de la boucle : si la requete sql ne produit pas de résultat, pour moi on saute à la partie alernative entre et /B>, peu importe ce qu’il y a dans la partie principale puisque celle-ce est ignorée !
=> C’est faux ou ce n’est pas comme ça que ça marche ?
Du coup, je ne pige toujours pas le
[(#GET{logo}|oui)]11. Le 19 juillet 2010 à 00:12, par georges
En réponse à : Logos d’article automatiques
oupsss , une balise code" qui a sauté : il fallait lire
D’où, peu importe qu’il y ait un « espace » ou un « toto » de présent dans la partie principale de la boucle : si la requete sql ne produit pas de résultat, pour moi on saute à la partie alernative entre
</B_> et<//B_>, peu importe ce qu’il y a dans la partie principale puisque celle-ce est ignorée !C’est pas comme ça que ça se passe ?
12. Le 19 juillet 2010 à 00:28, par Cédric
En réponse à : Logos d’article automatiques
En vérité, si la boucle ne produit aucun affichage, la partie alternative est affichée.
Donc cela peut se produire si la requête ne renvoi aucun résultat, ou si le contenu de la boucle ne produit que du vide (aucun résultat).
« aucun résultat » doit donc se comprendre au sens de l’affichage produit par la boucle, pas au sens du nombre de résultats de la requête SQL. C’est souvent équivalent, mais pas toujours, comme dans le cas ci-dessus, justement.
13. Le 20 juillet 2010 à 08:26, par Valéry
En réponse à : Logos d’article automatiques
Le logo d’article est un des points forts de SPIP en terme de logique d’utilisation et de création de sites, notamment de type « presse ».
Toutefois dans de nombreux cas on regrette que le fameux logo soit traité différemment des images jointes à l’article. Ainsi, il faut un plugin pour pouvoir associer une légende (ou un crédit photo) à celui-ci.
Du coup j’ai parfois utilisé une méthode semblable à celle décrite dans le billet. Elle est toutefois moins évidente en terme d’interface car le contributeur doit comprendre le mode de classement des documents qui lui permet de définir quelle image est le logo de l’article.
De la même manière que les images sont désormais traitées comme les documents, ne serait-il pas intéressant de traiter les logos de la même manière, en notant que le document est un logo s’il est importé via l’interface ad hoc plutôt que par l’interface document ? Il faudrait peut être aussi trouver un moyen de partager un même fichier image entre plusieurs articles en tant que logo : je vois souvent les contributeurs réimporter plusieurs fois la même image à cette fin.
14. Le 24 septembre 2012 à 17:45, par peter bang
En réponse à : Remplir les attributs « alt » et « title » dans SPIP
Bonjour Romy, j’ai souvenir que tu avais un article (devenue introuvable) qui expliquait comment mettre un logo dans une balise image. Est-ce que c’est bon si je mets #CHEMIIN dans le « href » et #TITRE dans le « title » ? Et dans la balise on mettrait juste #LOGO ce serait bien plus simple.
15. Le 11 septembre 2014 à 20:39, par jojo
En réponse à : Logos d’article automatiques
en mettant image_aplatir au départ cela m’a permit de faire disparaitre le phénoméne image noire quand l’image n’est pas en RVB
Répondre à cet article
Suivre les commentaires :
| 