Comment ajouter des images dans les articles ?

, par Bruno

La méthode classique

- Il faut aller dans l’espace privé.
- Vous allez dans l’édition de votre article pour le modifier.
- A gauche, vous avez une boite "Ajouter une image ou un document".
- Cliquez sur "Browse" pour parcourir le disque de votre ordinateur. Sélectionnez votre image.
- Cliquez sur "Télécharger".
- Votre image apparait dans la partie gauche.
- Cliquez sur "modifier" pour ajouter un titre ou du texte à votre image.
- Là, si vous ne faites rien, l’image sera automatiquement ajoutée au portfolio, en bas de l’article.
- Mais vous pouvez aussi insérer l’image à un endroit précis du texte. Pour cela, il faut insérer une petite balise qui a la forme
<doc1|left> :

    • Avec le mot-clé "doc", l’image est affichée sous forme de vignette, avec son titre. Si le visiteur clique sur la vignette, l’image est affichée pleine taille. Exemple : <doc34|center>
    • Avec le mot-clé "img", l’image est affichée directement à sa taille réelle, et le titre est également affiché. Exemple : <img34|right>
    • Avec le mot-clé "emb", l’image est affichée directement à sa taille réelle, sans titre. Exemple : <emb34|center>
    • Le numéro correspond au numéro de l’image.
    • left, right ou center : pour l’alignement gauche, droite ou centré.

Autre fonctionnalités : Exemple : <img34|center|noshadow=true|border=0> affiche l’image sans ombré et sans bordure, c’est-à-dire l’image brute sans aucun artifice.

La méthode facile et rapide si il y a beaucoup d’images à insérer

- Sur le site, dans l’espace publique, allez sur l’article dans lequel vous voulez ajouter des images.
- Avec votre souris, survolez le texte de l’article. Vous devriez voir une petite icône en forme de crayon bleu, s’afficher en haut à droite du texte. Cliquez dessus.
- Le texte devient modifiable dans une fenêtre d’édition.
- ouvrez une fenêtre (explorateur) montrant vos images.
- Avec votre souris, faites un clic-maintenu sur votre image et glissez/déposer la dans la fenêtre d’édition. L’image est chargée sur le site.
- Cliquez sur le "OK" vert en bas du texte.
- Recalculer la page, l’image est affichée dans le portfolio en bas de l’article.

Pour voir un article avec portfolio : Jean-Pierre

Quelle taille pour vos images

Pas besoin de mettre des photos de grande taille. C’est même déconseillé car cela ralentit considérablement le site.

En général, on met des images de 640 pixels de large.
Si on veut de la précision pour une photo JPG, on peut aller jusqu’à 1280 pixels de large.
Pour les images techniques, style plan de détails en format PNG, on prend des images de 2240px. Et c’est SPIP qui refera le redimensionnement.

- Pour les schémas (inkscape, sketchup), utiliser le format PNG.
- Pour les photos, le format JPG avec un taux de compression de 85.

Cadrage des images

C’est bien d’avoir un peu d’espace blanc autour des images, mais pas trop non plus. Pas plus de 10% de la taille de l’image.
Par exemple, pour une image de 1800px de large, l’espace blanc à gauche et à droite ne doit pas dépasser 180px.

Au besoin, recadrer l’image avec un logiciel type GIMP : outils de sélection rectangulaire - Image - Découper la sélection
Puis redimensionner à 2240px : Image - Echelle et taille de l’image.
Si la largeur est déjà inférieure à 2240px, c’est que l’image non-recadrée n’était pas assez large.

< doc > < img > ou < emb >

- Pour des plans de détail, on préfère les balise < doc > qui permettent d’afficher une vignette. Quand on clique sur la vignette, on accède à l’image en pleine largeur.
- Pour des photos sans besoin de détail, on affiche en pleine largeur avec < img >.
- Si on veut une pleine largeur avec un titre sous l’image, on prend le format < emb >
- Si on a plusieurs photos les unes à la suite des autres, il est préférable de les afficher en vignette avec un < doc >. Alignement left.