Le Pic
Projet Internet et Citoyenneté

Accueil > LES OUTILS > SPIP, la doc du CMS > Des mises en pages personnalisées >

Fiche n° 7 - Habiller son site avec les modèles PDF

par manu
dernière modification 27 mai 2024

Comment permettre aux rédacteurs d’insérer des petites icônes à l’intérieur du texte afin d’habiller celui-ci ?


Objectif : Utiliser les modèles pour habiller son site

Créer ou utiliser des icônes d’habillage

Si vous n’êtes pas vous-même un artiste, allez voir sur https://www.flaticon.com: vous trouverez une grande série d’icônes libres de droits pouvant être utilisées à votre convenance. Attention aux conditions d’attribution ! Vous devrez citer l’auteur de l’icône !

Nous considérerons ici que vous avez soit créé, soit téléchargé une icône "warning.png" représentant un signe "Attention"

Mettre en place les fichiers et les répertoires

Créez un sous-répertoire appelé img dans votre répertoire squelettes.
Téléversez le fichier et mettez-le dans ce répertoire. Appelez-le warning.png (il est préférable de mettre les noms de fichiers en minuscules).

Créez aussi un sous-répertoire appelé modeles.

Enfin, créez et téléversez dans modeles un fichier appelé warning.html et contenant :

Vous devez donc avoir l’arborescence suivante dans votre répertoire squelette :

Utiliser le modèle dans votre squelette

Le code suivant affichera le signe warning en 60x60 pixels :

[(#MODELE{warning,taille=60})]

Utiliser le modèle dans les articles

Mais le principal intérêt du modèle est qu’il peut être utilisé directement par les rédacteurs du site. Pour cela il suffit qu’ils insèrent dans leur article le texte :

<warning|taille=40>

(où la taille est à la discrétion du rédacteur, bien entendu).
Attention : N’oubliez pas de prévenir les rédacteurs de l’existence de votre modèle, et pensez à faire des modèles simples à utiliser. Par exemple dans le cas présent on a préféré utiliser un paramètre taille unique pour la largeur et la hauteur : il est ainsi plus simple à utiliser, et aussi plus sûr puisqu’on est assuré que le logo sera toujours carré !