Ajouter une image dans un article

Ajouter une image dans un article
Supposons que vous vouliez mettre une image dans un article déjà créé précédemment mais pas encore
validé à la publication.
Deux possibilités s’offrent à vous :
 Intégrer l’image en taille normale dans la page de l’article.
 Intégrer une miniature cliquable de l’image à afficher dans la page de l’article.
La taille et le poids des images.
 Pour une image non habillée par du texte, c’est à dire sans texte ni à droite, ni à gauche de
l’image, une image de taille 560 x 420 pixels sera tout à fait suffisante pour remplir le corps de l’article en
pleine page. Une taille de 640 x 480 pixels est un maximum. Au-delà de cette taille, il y a risque de faire
"éclater" la page avec des ascenseurs horizontaux du plus mauvais effet.
 Pour une image "habillée" par du texte, une taille de 320 x 240 pixels est suffisante.
La mise des images à la dimension voulue doit être faite avec un programme adapté à cet usage, avant le
téléchargement.
 Pour des miniatures, une largeur de 180 pixels est largement suffisante.
 Pour des logos, une taille de 60 x 60 pixels est suffisante.
Les images doivent être comprimées de façon à ce que leur poids soit le plus faible possible sans être trop
détériorées (une compression de 40 à 50 % est un bon compromis).
Les images au format .jpeg conservent leur qualité jusqu’à un certain niveau de compression.
Les images au format .gif et .png permettent les transparences.
La mise des images à la dimension voulue et leur compression doivent être faites avec un programme adapté
à cet usage, avant leur téléchargement. (Exemple : avec Format Factory)
I.
INTÉGRER L’ IMAGE EN TAILLE NORMALE DANS UN PARAGRAPHE DE L’ARTICLE
Étape 1 : Mettre l’article en mode modification.
Pour cela cliquer sur le bouton "Modifier cet article".
Étape 2 : A partir de l’interface « Ajouter une image ou un document », sélectionner l’image à insérer en
cliquant sur "Parcourir..."
Vous ouvrez alors une fenêtre avec les répertoires de votre ordinateur.
Chercher avec le déroulant, le répertoire où se trouve l’image à insérer.
Choisissez l’image à insérer.
Exemple : cantine.jpg
Cliquer sur « Ouvrir ».
Étape 3 : clic sur le bouton "Télécharger" pour transférer une copie de l’image vers le serveur distant.
L’image téléchargée s’affiche en miniature.
Le code de l’image s’affiche.
Saisir obligatoirement un titre pour cette image
Exemple : cantine
Il est possible de saisir pour cette image une description
Confirmer la saisie en cliquant sur le bouton "Enregistrer".
Étape 4 : choisir le mode d’habillage image/texte.
Avec le mode "left", l’image se place à gauche du texte, et le
texte "habille" la droite de l’image.
Avec le mode "center", il n’y a aucun texte de part et d’autre
de l’image.
Avec le mode "right", l’image se place à droite du texte, et le
texte "habille" la gauche de l’image.
Étape 5 : placer dans le texte le code de l’image selon
l’habillage souhaité.
Pour cela :
 ou bien saisir à la main le code de l’image
L’image s’affichera dans la page à l’endroit où vous
placez le code (ne pas oublier les crochets "<" et ">" au
début et à la fin du code image, et le séparateur « pipe » |
obtenu par [AltGr] et la touche [6] en haut du clavier.
 ou faire un copier-coller du code.
Attention : remplacer les lettres "img" par "doc",
sinon ce sera la miniature de l’image qui s’affichera et
non pas l’image de taille normale.
Cette image est en mode "right."
cantine
Cette image est en mode "left."
cantine
Cette image est en mode "center."
cantine
Étape 6 : Sauvegarder l’article en cliquant sur le bouton Enregistrer en bas à droite du corps de l’article,
sinon, vous auriez fait tout cela pour rien !
<doc182|center>
Remarques :
Pour mettre les images les unes à la suite des autres, mettre left. Pour mettre les images les unes en dessous des autres,
appuyer deux fois sur la touche Entrée du clavier après chaque image insérée.
II.
AFFICHER UNE IMAGE À PARTIR DE SA MINIATURE
Reprendre les mêmes étapes que précédemment mais ne pas mettre de nom pour l’image et ne pas
remplacer img par doc.
La miniature de l’image sera intégrée à la page de l’article mais elle n’aura pas de nom.
Un clic sur la miniature de l’image ouvrira l’image en taille normale dans la même fenêtre
III.
AFFICHER UNE IMAGE EN SURIMPRESSION DU CONTENU (Effet Thickbox)
L’inconvénient de la méthode précédente, c’est que la page de l’article disparaît lorsqu’on affiche l’image
dans sa taille originale et que, pour faire réapparaître cette page, il faut cliquer sur la flèche retour du
navigateur.
Sur le site est installé un plugin appelé Thickbox qui permet d’afficher une image (gif, jpg, png) avec un
effet de présentation séduisant en superposition à une image cliquée et/ou un lien cliqué, c’est à dire en
restant sur la même page.
Avec l’effet Thickbox, lorsqu’on clique sur une image au format miniature, celle-ci s’affiche au format
original, en surimpression sur la même page, tandis que la dite page devient grisée. Lorsqu’on quitte
l’image, la page réapparaît normalement.
Plus généralement, le Plugin Thickbox permet d’afficher :

Une image unique à partir d’un clic sur un lien ou sur une image en miniature

Des images en galeries sous forme de diaporama à partir d’un clic sur une image miniature

Une page dans un Iframe c’est à dire dans une nouvelle fenêtre.

Une animation ou une vidéo dans un Iframe
Prérequis
Ajouter l’image originale et sa miniature dans l’article (voir paragraphe I ci-dessus) mais ne tapez pas les
codes de ces images dans la zone de texte de l’article.
Afficher une image à partir d’un clic sur sa miniature avec l’effet Thickbox
 Principe
Placer dans la zone de saisie du texte de l’article le code
<a href ="URL de l'image dans thickbox (grande image)" title="texte de
l’infobulle" class="thickbox">
<img src="URL de sa miniature
(petite image)">
</a>
 Exemple
Supposons que la grande image s’appelle « cantine », que la miniature s’appelle « cantinep » et qu’elles
soient toutes les deux au format « jpg ».
Dans SPIP, les images sont rangées dans un dossier IMG et dans des sous dossiers portant les noms des
différents formats (jpg, gif, png)
Donc l’URL de la grande image sera « IMG/jpg/cantine.jpg », le nom de l’infobulle sera « Cantine » et
l’URL de la miniature sera « IMG/jpg/cantinep.jpg »
Le code à insérer dans la zone de saisie du texte de l’article sera donc :
<a href ="IMG/jpg/cantine.jpg " title="cantine" class="thickbox">
<img src="IMG/jpg/cantinep.jpg">
</a>
Côté publique cela donnera :
 Pour la miniature
En survolant la miniature, le nom de l’image s’affiche dans une infobulle ainsi qu’une main montrant qu’il
faut cliquer sur l’image. Un clic sur la miniature affiche l’image en surimpression du contenu de la page
avec l’effet Thickbox.
Le nom de l’image est inscrit en bas à gauche.
En cliquant sur la croix à droite, vous fermer l’image et vous retrouvez le contenu initial de la page.
Remarque : la miniature se met à gauche. Si vous voulez la mettre au centre rajouter les deux balises
<center> et</center>aux deux extrémités du code précédent ce qui donnera
<center><a href ="IMG/jpg/cantine.jpg" title="cantine" class="thickbox">
<img src="IMG/jpg/cantinep.jpg">
</a></center>
Afficher une image à partir d’un clic sur un lien avec l’effet Thickbox
 Principe
Placer dans la zone de saisie du texte de l’article le code
<a href ="URL de l'image dans thickbox (grande image)" title="texte de l’infobulle"
class="thickbox">
<br/> Texte du lien
</a>
 Exemple
Supposons que la grande image s’appelle « cantine », qu’elle soit au format « jpg » et stockée dans le sousdossier « jpg » du dossier « IMG » sur le site.
Si vous désirez mettre un lien sous la miniature comme par exemple « Cliquer sur le lien pour afficher la
photo de la cantine », mettre dans la zone de saisie du texte de l’article, le code suivant :
<a href ="IMG/jpg/cantine.jpg" title="cantine" class="thickbox">
<br/> Cliquer sur ce lien pour afficher la photo de la cantine
</a>
Côté publique cela donnera :
Ajouter un lot d’images à un article.
 Mettre vos images dans un dossier puis compresser ce dossier au format zip.
 Utilisez le cadre « Joindre un document » l’article pour rechercher sur votre disque dur le dossier zippé.
 Cliquez sur « Ouvrir ».
 La fenêtre suivante s’affiche.
Cocher la case « décompressé »
Validez ce choix.
 Procéder ensuite pour ces images comme dans les tutoriels précédents selon que vous voulez intégrer ces
images ou leur miniatures dans un article ou créer un portfolio ou un album (voir tutoriels suivants).
Créer un album photo (Portfolio)
Télécharger les images
comme précédemment.
Pour chaque image cliquer sur la petite
flèche pour dérouler le sous-menu.
Cliquer sur « Déposer cette image dans le portfolio ».
Côté espace privé on obtient ceci par exemple :
Côté publique on obtient ceci :
L’album photo s’affiche sous la forme d’un portfolio de
miniatures placé en dessous du texte de l’article.
Un clic sur une miniature ouvre la photo en taille
normale dans la fenêtre de la page.
Créer un album photo intégré au texte de l’article
Créer les miniatures de chacune des photos de l’album.
Dans l’article, insérer un tableau avec autant de cellules que de photos contenues dans l’album (voir leçon
sur « Insérer un tableau »)
Télécharger chacune des photos et chacune des miniatures : voir paragraphe I et II plus haut.
 Principe
Placer dans chaque cellule du tableau de l’article le code suivant
<center><a href="url absolue de la grande image" target=_blank">
<img src="url absolue de la miniature">
</a></center>
Un clic sur la miniature ouvrira une nouvelle fenêtre avec l’image en taille réelle.
 Exemple
Supposons que la grande image s’appelle « cantine », que la miniature s’appelle « cantinep » et qu’elles
soient toutes les deux au format « jpg ».
Rappel : dans SPIP, les images sont rangées dans un dossier IMG et dans des sous dossiers portant les noms
des différents formats (jpg, gif, png)
Donc l’URL absolue de la grande image sera «http://albert-ball.etab.ac-lille.fr/IMG/jpg/cantine.jpg», et
l’URL absolue de la miniature sera «http://albert-ball.etab.ac-lille.fr/IMG/jpg/cantinep.jpg ».
Dans chacune des cellules écrire alors le code suivant :
<center><a href="http://albert-ball.etab.ac-lille.fr/IMG/jpg/cdi-2.jpg" target=_blank">
<img src="http://albert-ball.etab.ac-lille.fr/IMG/jpg/cdip.jpg">
</a></center>
Un clic sur la miniature ouvrira une nouvelle fenêtre avec l’image en taille réelle.
Remarques :
Dans un album, il est possible de classer les images téléchargées par numéro (chiffre + point + espace dans
le champ "titre" de la "boîte document") et ainsi de hiérarchiser la présentation de ces dernières dans l’album
où elles se trouvent (le numéro permet de hiérarchiser mais n’apparaît pas en affichage public).
Ajouter un logo à un article ou à une rubrique
Lorsque vous accédez à un article vous pouvez lui ajouter un logo de même pur une rubrique (si vous êtes
administrateur restreint)
Ce logo doit être une image de 60 x 60 pixels maximum.
L’insertion du logo se fait exactement de la même façon que pour une image (voir paragraphe 1 étape 1 à 3).