Aide

Insérer des images dans un article

Il existe 2 façons d’utiliser des images :

  1. Elles peuvent être insérées sous forme de logo d’article. Ces images ont alors pour fonction de représenter l’article sur les pages listant plusieurs contenus (rubrique, recherche, etc.). Elles-sont réduites et redimensionnées automatiquement en fonction de la mise en page.
  2. Elles peuvent servir à habiller le texte d’un article. Lorsque l’on insère une image associée à un article dans le texte de ce dernier. L’image disparaît du diaporama de bas de page pour apparaître à l’emplacement souhaité dans le texte.

L’article ci-dessous décrit comment insérer et mettre en forme ces images à l’intérieur du texte d’un article.

Alignement

Sur la colonne de gauche de chaque page d’édition, les images associées à la page éditée s’affichent, suivi de petits codes (par exemple :

| left | center | right). L’utilisation d’un de ces codes dans votre article permet d’insérer l’image du document.

Cliquer sur left, center ou right permettra respectivement d’insérer une image alignée à gauche, centrée, ou alignée à droite.

Lorsque du texte est positionné sous une image alignée à gauche ou à droite, il vient s’insérer sur le côté de celui-ci. L’image est automatiquement réduite à la moitié de la largeur de la page pour générer une mise en page agréable à lire.

Par contre, une image centrée ne laissera passer aucun texte sur ses côtés. Elle ne sera réduite que dans la mesure où ses dimensions seront supérieures à la largeur de la page. En effet, Une image trop grande est automatiquement redimensionnée pour qu’elle ne puisse pas déborder de la largeur de la page.

Le titre et le descriptif de l’image

Il est possible d’associer des informations à votre image. Pour cela, cliquez sur le bouton modifier en dessous de celle-ci. Une fenêtre apparaîtra vous permettant de renseigner :

  • le titre de l’image,
  • la description de l’image,
  • les crédits de l’image,
  • l’alternative textuelle (une description de l’image pour les personnes malvoyantes),
  • la vignette (ou visuel) sur laquelle il faudra cliquer pour voir l’image. (Cela peut par exemple être un détail de l’image sur lequel il faudra cliquer pour voir l’image entière).
    Affiche du film
    "Ceux qui tiennent la laisse" le 20 janvier 2027 dans les salles

    Dans l’exemple ci-contre, l’image est associée à sa légende composée de son titre et de son descriptif et ses crédits.

Une fois que votre image contiendra un de ces éléments, la légende s’affichera automatiquement en dessous de l’image. Si vous avez besoin d’utiliser l’image sans sa légende, il faudra alors ajouter "legende=non" à votre balise "doc" pour insérer l’image seule.

Dans l’exemple ci-dessous, la légende de la même image a disparu.

Redimensionnement

Il est possible de diminuer la taille des images en indiquant soit une largeur, soit une hauteur.

  • Le code "largeur" ajouté ainsi : <doc26|largeur=200> permettra d’afficher une image limitée 200px de large.
  • Le code hauteur ajouté ainsi : <doc26|largeur=200> permettra d’afficher une image limitée 200px de haut.

Pour mieux mettre en page vos articles

Quelques exemples de raccourcis de mise en forme de texte

Comme vous le savez déjà, il est possible de mettre le texte en gras (CTRL + B) ou en italique (CTRL + I) en jouant avec les accolades et les crochets.

Cet article liste d’autres possibilités offertes par Spip.

Généralités

Intertitre

Les 4 niveaux d’intertitres présents dans cet article peuvent être facilement utilisés dans un article Spip. L’intertitre de niveau 1 est accessible via le raccourci clavier CTRL + H.

Les intertitres de niveau 2, 3 et 4 sont générés en ajoutant deux, trois ou quatre "*" (étoiles) après les accolades ouvrantes.

Paragraphes et retours à la ligne

SÉLECTIONNER EN FONCTION DU SITE :

  • Un retour à la ligne dans l’espace de rédaction aura pour effet de passer à la ligne sans changer de paragraphe.
  • Un retour à la ligne dans l’espace de rédaction n’influera pas sur la mise en page de votre article [1]. Le texte passé à la ligne dans votre espace d’administration apparaîtra à la suite du texte au-dessus. Ce fonctionnement permet de copier-coller le contenu d’un PDF et de l’insérer dans un article sans avoir besoin de supprimer chaque retour à la ligne.
  • Lorsque l’on passe 2 lignes ou plus, un nouveau paragraphe est généré. Celui-ci sera espacé du paragraphe précédent par le même espace quel que soit le nombre de lignes passées -* Lorsque l’on passe 2 lignes ou plus, un nouveau paragraphe est généré. Celui-ci sera espacé du paragraphe précédent par le même espace quel que soit le nombre de lignes passées (inutile, donc, de passer plusieurs lignes en pensant pouvoir créer un espace vide)..
  • Pour forcer un retour à la ligne dans le même paragraphe, il faudra entrer un "_" (underscore) en début de ligne, suivit d’un espace.
  • Pour insérer un espace insécable (ou espace dur), on insérera un " " (tild) entre les mots concernés. Cela est utile pour s’assurer, par exemple, que l’élément de ponctuation " :" ne sera pas séparé du mot qui le précède.

Caractères spéciaux

  • Les claviers occidentaux ne sont pas adaptés au français contemporain. C’est pourquoi la barre typographique visible au-dessus du texte contient un certain nombre de boutons permettant d’insérer les caractères récurrents tel que le "É" (visible dans le second intertitre ci-dessous).
  • Pour faire apparaitre ces caractères, il suffit de survoler avec la souris l’icône suivante :
  • Les boutons suivant peuvent être très utiles pour changer la casse des caractères :

Mise en forme basique :

Énumération :

Avec puce :

Pour générer une liste à puce, il suffit de commencer une phrase par "- " :
Lorsque l’on commence un paragraphe par un tiré, il apparaît une petite pastille comme ceci :

– Qu’est-ce que cela peut faire que je lutte pour la mauvaise cause puisque je suis de bonne foi ?
– Et qu’est-ce que ça peut faire que je sois de mauvaise foi puisque c’est pour la bonne cause. (Jacques Prévert)

Liste hiérarchisée :

On peut modifier la hiérarchie dans la liste en ajoutant des « * » ( astérisques ) :

  • Ton cheval est :
    • alezan ;
    • bai ;
    • noir ;
  • mais mon lapin est :
    • blanc ;
      • angora ;
      • ou à poil ras.
Liste Numérotée :

Pour créer des listes numérotées , on utilise « -# »

  1. Langues régionales en Espagne :
    1. Catalan
    2. Basque
    3. Galicien
    4. Occitan
  2. Langues régionales en Autriche :
    1. Croate
    2. Hongrois
    3. Slovène
On peut aussi imbriquer différentes sortes de listes :
Une liste à puce dans une liste numérotée :
  1. English
    • United Kingdom
    • United States
  2. Español
    • España
    • Latinoamérica
Une liste à numérotée dans une liste à puce :
  • Polski
  • Português
    1. Portugal
    2. Brasil

Liens :

Liens basiques :

Il est possible de créer différents liens hypertextes amenant à l’extérieur du site :

  • Pour créer un lien simple, utilisez les raccourcis clavier CTRL + L. Un champ apparaîtra dans lequel il sera possibles d’insérer l’adresse de celui-ci. Le lien prendra automatiquement le nom de l’adresse que vous venez d’insérer. Ex : https://www.lesechos.fr
  • Si vous voulez nommer votre lien, il faudra sélectionner du texte avant d’appuyer sur CTRL + L : exemple : L’économie traitée avec un certain parti pris.
Liens vers des pages de votre site :

D’autres liens peuvent mener vers des articles ou des rubriques de votre site. Voici 2 possibilités pour faire un lien vers l’article 1 :

  • En indiquant le chiffre 12, on crée un lien qu’il conviendra de nommer
  • Un lien sans nom affichera automatiquement le titre de l’article. Ex : article 1

La même logique est adaptable aux liens vers d’autres éléments :

Liens vers une définition d’un dictionnaire

Certains liens peuvent pointer vers un dictionnaire (Wikipédia par défaut). On utilisera pour cela les crochets suivit d’un point d’interrogation :
À la recherche du temps perdu est l’œuvre majeure de Marcel Proust

Il est possible de séparer le texte comme ceci en tapant 4 tirés en suivant :


Mise en forme avancée :

Pour les subtilités suivantes, nous vous invitons à aller voir du côté de la partie privée du site afin de comprendre le fonctionnement des raccourcis typographiques, et de les associer à leur affichage.

Notes de bas de page

Il est possible de placer facilement une note [2] de bas de page.

Ces notes de bas de pages existent sous plusieurs formats :

  • sous forme d’astérisques [3],
  • sans références (non numérotées) ; attention, de telles notes ne présentent plus de lien entre la note et l’appel de notes [4],
  • donner un nom (en toutes lettres) à une note ; cet usage est très répandu pour les références bibliographiques [5] ;
  • rappeler une note déjà existante [6] en indiquant le numéro de cette note entre les symboles « < » et « > » et en laissant vide le reste de la note.

Tableaux

Il est possible de faire des tableaux en séparant le contenu de chaque colonne par un "|" (pipe) :

Nom Prénom Age
Marso Ben 23 ans
Capitaine non connu
Philant Philippe 46 ans
Cadoc Bébé 4 mois

(Noter que les termes de la première ligne du tableau sont mis entre double accolades pour signifier qu’il s’agit des titres de la colonne. Cela ne sera pas nécessaire pour les tableaux dont la première ligne n’est pas un titre).

Mise en forme de caractères :

  • Certaines expressions peuvent être mises en évidence en utilisant les couleurs du site. Pour cela, on utilisera les "[" ( crochets ) et les "*" (étoiles).

Styles de paragraphes :

Mise en exergue d’un paragraphe :
Il est possible de mettre en exergue une information, de cette manière grâce en mettant l’information entre crochets et parenthèses.
Alignements
Il est possible de ferrer les paragraphes à droite en utilisant les "[" (crochets) et les "/" (slaches).
Il est possible de centrer les paragraphes en utilisant les "[" (crochets) et les "|" (pipe).
Cadre pour copier-coller du texte :

Si vous voulez permettre à vos lecteurs de facilement copier-coller du contenu, rien de mieux que de l’insérer dans ce type de cadre.

Citations :

Les raccourcis CTRL + Q permettent d’insérer une citation

Code informatique :

Le codeur de service sera satisfait de constater qu’une mise en forme permettant de styliser du code informatique est disponible de 2 manières :

  • En insérant un morceau de code au sein d’une phrase.
  • En insérant une ligne complète de code :
    <marquee behavior="scroll" direction="left">
        Bienvenue sur mon site !!!
    </marquee>
    
Poésie et imbrication de styles :

Le poète n’est pas oublié : ses vers pourront être stylisé ainsi :

Chantre
Et l’unique cordeau des trompettes marines


Apollinaire
d’Alcools (2011)

Dans l’exemple ci-dessus, la mise en forme "ferrer à droite" est utilisée sur l’auteur et la source de la citation.

Cet exemple démontre qu’il est possible d’imbriquer les style les uns dans les autres.

Notes

[1] Sauf dans certains contextes particuliers détaillés plus bas, tels que la mise en forme des listes à puce, de citation ou de poésie.

[2] Voici un complément d’information.

[3] <*> En plaçant simplement un astérisque entre les symboles « < » et « > ».

[4] <> En n’indiquant rien entre les symboles « < » et « > ».

[5] François Rabelais est également connu sous le pseudonyme d’Alcofribas Nasier

S'abonner à notre infolettre

Pour s'abonner à l'infolettre, laisser votre nom et votre E-mail ci-dessous :