Insérer des images dans le texte

SPIP vous offre la possibilité d’illustrer vos articles avec des images. Cela s’effectue en plusieurs étapes : vous devez envoyer le fichier de votre image vers le site, puis insérer l’image à l’intérieur du texte.
Les documents ou images insérés dans votre article sans intégration ne seront visibles que par les adhérents à jours. Si vous souhaitez que vos documents et images soient visibles par tout le monde, il vous faut les intégrer dans le texte (Cf Étape 3 ci-dessous).

Préparation : Formats d’images

Lorsque vous créez vos images (avec votre logiciel habituel), vous devez les créer à l’un des formats suivants :
 GIF (extension .gif),
 JPEG (extension .jpg),
 PNG (extension .png).

Veillez particulièrement à ce que le nom de vos fichiers ait une terminaison indiquant leur format : .gif, .jpg ou .png. Si vous installez un fichier dont le nom ne contient pas cette extension, le système ne saura pas utiliser l’image.

Étape 1 : Installation des images sur le serveur

Avant de pouvoir insérer vos images à l’intérieur du texte, il faut bien entendu installer ces images sur le serveur. Cela se fait, dans SPIP, par l’interface graphique.

Lorsque vous « modifiez » un article ou une brève, la colonne de gauche vous propose une interface intitulée : « Ajouter une image ». Cela se présente sous la forme d’un champ suivi d’un bouton nommé, suivant les navigateurs, « parcourir », « Browse », « Sélectionner », « File », « Fichier »...

Lorsque vous cliquez sur ce bouton, une interface s’ouvre, vous permettant de visiter votre disque dur et d’indiquer quel fichier graphique vous voulez sélectionner.

Cela fait, cliquez sur le bouton intitulé « Téléverser ».

Si l’opération a réussi, votre image apparaît dans la colonne de gauche, complétée de plusieurs indications...

Étape 2 : Les informations liées à votre image

Une fois votre image envoyée au serveur, une case apparaît sur la gauche de l’écran. Il y a là toutes les informations nécessaires qui la concernent. (Une partie de ces informations apparaît masquée, cliquer sur le bouton modifier en bas à droite de la case pour « ouvrir » la boîte d’information.)

ATTENTION : Il faut parfois effectuer la manipulation deux fois pour l’interface s’ouvre correctement.
Affichage sous forme de vignette. Une prévisualisation de votre image apparaît. Si l’image est de grande taille (plus de 200 pixels de large), c’est une version de taille réduite qui est affichée.

 Raccourcis SPIP. Voir ci-après : SPIP vous rappelle les 3 « raccourcis » qui vous permettent d’insérer cette image à l’intérieur de votre texte. Notez que chaque image est « numérotée » ainsi : « IMG1 », « IMG2 »... Ces « raccourcis » sont utilisés dans la troisième étape.

 Taille de l’image. Juste au-dessus de l’image, la largeur et la hauteur de votre image (en pixels - ou « points ») sont rappelées.

 Titre et description de l’image. Vous pouvez, si vous le désirez, indiquer un nom et une description pour chaque image. Par exemple une explication, ou une mention du copyright du photographe...

 Supprimer cette image. Comme son nom l’indique, le bouton « Supprimer cette image » permet d’effacer ce fichier, si vous avez fait une erreur de manipulation, ou si vous décidez finalement de ne pas utiliser l’image dans ce texte. Il est conseillé d’effacer les images inutilisées, afin d’éviter d’encombrer votre serveur avec des fichiers inutiles.

Vous pouvez recommencer l’opération avec autant d’images que vous le désirez (un article peut contenir autant d’images que nécessaire).

Étape 3 : Insérer une image à l’intérieur du texte

A ce stade, les fichiers graphiques sont bien présents sur le serveur, mais il reste à indiquer à quel endroit de votre texte vous voulez les insérer. Pour cela, inutile de faire du HTML, SPIP vous propose un « raccourci » permettant d’insérer votre image simplement.

- Images sans commentaire

Pour chaque image, voyez la mention des 3 raccourcis :

Recopiez l’un de ces raccourcis (le nombre correspond au numéro de l’image, il change donc pour chaque fichier), et recopiez-le à l’intérieur de la case « Texte », là vous désirez le situer dans votre article. « left » aligne l’image à gauche, « right » à droite, et « center » place votre image au centre du texte.

Lors de l’affichage à l’écran, SPIP remplacera ces raccourcis par le code HTML correspondant, en calculant automatiquement la taille des images.

Si vous souhaitez une inclusion d’image plus fluide et mieux adaptée à votre texte nous vous conseillons d’effectuer une inclusion directe de l’image. Pour cela il vous suffit de cliquer sur déposer dans le portfolio dans le cadre de votre image puis d’utiliser le code de la section inclusion directe.

- Images avec titre et description

Si vous avez indiqué un titre et/ou une description, les mentions sont remplacées par :

Elles s’utilisent de la même façon que ci-dessus ; cependant, lorsque vous insérez un « raccourci » de ce type, SPIP insère dans votre texte non seulement l’image, mais le titre et la description que vous lui avez donnée. Votre image apparaît ainsi avec, éventuellement, une explication et des mentions de copyright, le nom de l’artiste, etc.

Insérer des documents dans le texte

Il est important de préparer à l’avance vos documents sur votre ordinateur avant de les publier. Voici quelques points à vérifier :
· Le poids du document : ne dépassez pas en général le 1 Mo (méga octet) ;
généralement votre document devrait peser 300 à 500 Ko au maximum.
· Le format du document : utilisez des formats reconnus par tous (pdf, txt, zip…), évitez les
formats propriétaires ou potentiellement dangereux (doc, exe, ..). Pour les images, choisir les
formats web : jpg (photos) et png ou gif (logos, illustrations).
· La taille du document : pour les images, la résolution doit être de 72 dpi en mode RVB
(Rouge Vert Bleu) et nous vous suggérons de ne dépasser une largeur de 1500px par image.

Afin d’insérer des documents dans le texte, le protocole est exactement le même que celui pour les photos, y compris les raccourcis.
La seule petite différence est que lorsque vous télécharger un document et que vous l’insérer dans le texte, il y apparaitra avec un visuel par défaut.
Pour pouvez cependant modifier ce visuel.
Il vous suffit de cliquer sur modifier en bas à droite de la case de votre document dans la colonne de gauche et la page avec les détails du document apparaitre.
En bas de cette page pour pouvez rajouter un visuel pour document afin de le rendre plus attractif.

Insérer du son et de la vidéo

Pour intégrer une vidéo externe, il suffit de recopier l’adresse de la vidéo dans votre article
entouré des crochets habituels. Si vous rencontrez des problèmes pour l’intégration de son ou de vidéos, il s’agit peut-être d’un problème de plugins, nous vous invitons donc à rentrer en contact avec nous afin de régler le problème.

<iframe width="560" height="315" src="https://www.youtube.com/embed/FXmhXoEgM48?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Donnera :