Accueil   >   Aide à la rédaction

Insérer des images dans un article

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

  1. Elles peuvent faire parti d’un diaporama composé de nombreuses photos. Pour cela, suffit d’associer plusieurs images à l’article en cliquant sur le bouton "Ajouter un document" visible en bas de chaque article. Les images apparaissent alors sous le titre "Quelques photos" (voir en bas de cette article.
  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 disparait du diaporama 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

Sous la colonne de gauche de chaque page d’édition, les images associées à la page éditée s’affichent, suivi de 3 petits codes. L’utilisation d’un de ces codes dans votre article permet d’insérer l’image du document.

En fonction du code choisi, l’image sera 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. Sur la page publique, l’image est automatiquement réduite à la moitié de la largeur de la page générer une mise en page agréable à lire.

Par contre, une image centrée ne laissera passer aucun texte sur ses coté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 à 772px de large pour qu’elle ne puisse pas déborder de la largeur de la page.

Liens

Il est possible de créer un lien sur une image en ajoutant :

|lien=adresse_de_mon_lien

dans le petit code généré. l’image ci-dessous pointe sur une rubrique de votre site.

C’est pas à un vieux singe ...
... qu’on apprend à s’imposer dans un article d’aide à la publication.
http://cdn.hitfix.com/photos/5623354/Dawn_Of_The_Planet_Of_The_Apes_review_article_story_large.jpg

Le titre et le descriptif de l’image

Lorsqu’une image possède un titre ou un descriptif, les codes visibles sous l’image sont au nombre de 6 :

  • Les codes commençant par "doc" permettent d’insérer l’image associée ainsi que sa légende.
  • Les codes commençant par "emb" permettent d’insérer l’image seule.

Dans l’exemple ci-contre, l’image est associée à sa légende :

Quelques photos :

> Voir les autres articles de la catégorie "Aide"

Quelques exemples de raccourcis

, par Laurent Lefebvre

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

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

Aide

, par Laurent Lefebvre

Vous trouverez ci-dessous quelques informations utiles à l’administration de votre site : Mise en forme : – Quelques exemples de raccourcis – Insérer des images dans un article – Pourquoi les (…)

Comment ordonner les éléments ?

, par Laurent Lefebvre

Par date Certains éléments (par exemple les articles) sont classés par date de publication du plus récent au plus ancien. Lorsqu’un article est publié, la date du jour est automatiquement (…)

Lire aussi dans Aide à la rédaction :

Comment créer un formulaire ?

, par Laurent Lefebvre

Des formulaires peuvent être utilisés pour récolter des informations ou faire des sondages. Les administrateurs peuvent créer des formulaires et gérer les formulaires existants (consultation et (…)

A la Une du site :

Découvrir des associations accompagnées par Maillage

, par Audrey Le Coutour

Depuis 2000, Maillage accompagne et soutient des projets d’économie sociale et solidaire sur le territoire des Hauts-de-France.

Un accompagnement personnalisé, ouvert à tout·e porteur·se de projet, centré sur la personne, global et inscrit dans la durée afin de permettre à chacun·e de déployer ses idées et aspirations. Au fil des années, l’équipe de Maillage a pu voir se créer et se développer un grand nombre d’associations, autour de thématiques très variées.

Voici quelques exemples d’associations qui nous ont fait confiance...