Laboratoire des TICE
Des idées plein l’entête

Logo de l’article

vendredi 7 octobre 2011

SPIP vous permet d’installer un logo correspondant à l’article. De cette façon, dans l’interface de navigation du site public, il sera possible d’afficher un bouton graphique menant à l’article.

Pour un article, il est possible :
- de ne pas utiliser de logo ;
- d’installer un logo graphique simple ;
- d’utiliser un logo animé gérant le « survol » (logo « 2 positions » : le logo change lorsque que la souris le survole).

- Formats d’images

Lorsque vous créez vos images (avec votre logiciel habituel), vous devez les créer à l’un des formats suivants :
- GIF (le fichier GIF peut être un « GIF animé ») ;
- JPEG ;
- PNG (déconseillé, de nombreux butineurs ne permettant pas de les afficher correctement).

Afin d’éviter les erreurs graves de manipulation, SPIP rejette les fichiers-image d’une taille supérieure à 256 ko. Conseil : puisque ces « boutons » sont des éléments de l’interface graphique, veillez à ce que leur poids (nombre de kilo-octets) ne soit pas trop élevé (en général, moins de 10 ko) si vous voulez que la navigation sur votre site reste fluide.

Veillez particulièrement à ce que le nom de vos fichiers ait une terminaison indiquant leur format : .gif, .jpg ou .png. Le nom du fichier n’a aucune importance, à condition de ne pas oublier cette terminaison.

Si vous créez un bouton gérant le « survol », créez deux fichiers graphiques différents (un pour le bouton « normal », et un autre fichier s’affichant lorsque le bouton est survolé par la souris) : il convient alors que ces deux fichiers aient exactement la même taille (en pixels).

- Logo simple (pas de survol)

GIF -

Pour ajouter un bouton, une interface est disponible dans la colonne de gauche de l’article, sous la mention « LOGO DE L’ARTICLE ».

Selon la version de votre navigateur, cliquez sur le bouton « Browse », « Sélectionner », « File », « Fichier »... ce qui déclenche l’ouverture d’une interface permettant de sélectionner, sur votre disque dur, le fichier graphique correspondant à votre bouton.

Une fois ce fichier sélectionné, cliquez sur le bouton « Télécharger ». Votre logo s’affiche alors. Il est suivi d’un bouton « Supprimer le logo », qui vous permet, simplement, de supprimer ce logo.

Si vous ne comptez pas obtenir un logo gérant le survol, aucune autre opération n’est nécessaire.

- Remplacer le logo

GIF -

Il peut arriver que vous vouliez remplacer le logo par un autre fichier. Cela se fait en deux étapes :
- commencez par « Supprimer le logo » : l’interface précédente, dotée du bouton « Télécharger », apparaît à nouveau ;
- téléchargez le nouveau fichier, selon la procédure déjà décrite.

Du fait du fonctionnement des butineurs, l’image qui s’affiche alors est erronée, puisqu’il s’agit encore de la version précédente (l’image est « en cache » de votre navigateur). Cliquez sur cette image (avec le bouton droit de votre souris, ou en maintenant la touche « ctrl » sur Macintosh) afin de faire apparaître un menu déroulant local : sélectionnez l’option « Recharger cette image » (ou, en anglais, « Reload image »). La nouvelle version de votre logo devrait alors s’afficher.

- Logo pour le survol

GIF -

Après l’installation du premier fichier (logo simple), l’interface affiche non seulement le logo que vous avez installé sur le serveur, mais ajoute une seconde interface, sous le titre « LOGO POUR LE SURVOL ». C’est par cette interface que vous pouvez indiquer le second fichier nécessaire à la gestion du survol.

Si, lorsque vous avez installé les deux fichiers, vous supprimez le premier (le bouton « simple »), l’interface du second logo ne s’affiche plus. En effet, en l’absence du premier logo, il n’y a plus de raison de gérer un quelconque « survol » !

Aucune intervention dans le « texte » de votre article n’est nécessaire. Lors de l’affichage sur le site public, la gestion des logos des rubriques est entièrement automatique. Le code HTML sera généré en fonction de la taille du logo, et la fonction de survol en JavaScript sera également créée automatiquement.

Portfolio