Le document explique comment insérer des images dans un article sous SPIP, y compris la création de vignettes carrées et l'ajout d'images au sein du texte. Il précise le processus de redimensionnement des images pour garantir un affichage correct et éviter de déformer le contenu. Des instructions sont fournies pour télécharger des images et modifier leurs paramètres d'affichage.

1. Portfolio et image dans l’article sous SPIP
Nous
allons
voir
comment
insérer
des
images
dans
le
por@olio
et
leur
donner
une
vigneAe
au
format
carré
pour
uniformiser
le
rendu
et
voir
comment
insérer
des
images
dans
le
texte,
les
redimensionner
pour
que
cela
apparaisse
correctement.
Voyelle
-­‐
6
place
de
l'église
à
St
Jean
Sur
Vilaine
-­‐
contact@voyelle.fr
1

2. Dans
la
parGe
administraGve
de
l’arGcle,
sans
passer
par
le
mode
modificaGon
où
vous
pouvez
changer
le
texte,
vous
trouvez
en
bas
du
contenu
le
por@olio.
À
parGr
de
ceAe
espace
vous
pouvez
ajouter,
supprimer,
renseigner
vos
images
qui
seront
incluses
dans
la
parGe
publique
au
diaporama
d’images
en
bas
de
l’arGcle.
Voyelle
-­‐
6
place
de
l'église
à
St
Jean
Sur
Vilaine
-­‐
2
contact@voyelle.fr

3. Pour
ajouter
une
vigneAe,
vous
dépliez
le
cadre
de
la
photographie
en
survolant
la
flèche
grise
à
côté
du
nom
de
l’image,
puis
vous
cliquez
sur
«
parcourir
»
pour
aller
chercher
la
vigneAe
du
document
que
vous
aurez
préalablement
préparé
avec
pixlr.com/editor
par
exemple.
Pour
l’exemple,
la
vigneAe
est
un
carré
de
600px
par
600px.
Le
rendu
sur
le
site
public
donne
bien
des
vigneAes
carrés
et
lorsque
vous
cliquez
sur
les
vigneAes
s’affiche
l’image
dans
les
dimensions
d’origine.
Voyelle
-­‐
6
place
de
l'église
à
St
Jean
Sur
Vilaine
-­‐
3
contact@voyelle.fr

4. Pour
ajouter
une
image
dans
le
contenu
textuel
d’un
arGcle,
vous
devez
aller
dans
le
mode
«
Modifier
cet
arGcle
».
Vous
devez
ensuite
cliquez
à
l’emplacement
où
devra
se
situer
votre
image
puis
vous
cliquez
sur
le
bouton
image
dans
la
barre
d’ouGl
:
S’ouvre
alors
une
fenêtre.
Vous
allez
ensuite
dans
«
explorer
le
serveur
»
pour
soit
chercher
une
image
déjà
chargée,
soit
télécharger
une
nouvelle
image.
Pour
cet
exemple,
nous
allons
télécharger
une
nouvelle
image.
Voyelle
-­‐
6
place
de
l'église
à
St
Jean
Sur
Vilaine
-­‐
4
contact@voyelle.fr

5. Vous
allez
chercher
votre
image
avec
«
Parcourir
»
puis
vous
télécharger.
Une
fois
téléchargée,
vous
cliquez
sur
«
UGliser
le
fichier
:
nomDeLImage.jpg
».
Une
nouvelle
fenêtre
apparaît
qui
vous
permet
de
modifier
certains
paramètres
de
l’image.
Vous
pouvez
ainsi
ajouter
un
texte
de
remplacement
(accessibilité).
Il
est
normalement
obligatoire.
Vous
pouvez
aussi
changer
la
taille
de
l’image
en
gardant
ou
non
les
proporGons
avec
le
cadenas.
La
largeur
maximum
est
596px.
Voyelle
-­‐
6
place
de
l'église
à
St
Jean
Sur
Vilaine
-­‐
5
contact@voyelle.fr

6. Si
vous
insérez
une
image
qui
dépasse
596px
de
large,
l’image
dépassant
la
largeur
de
la
colonne,
nous
avons
insérer
un
redimensionnement
de
la
largeur.
Cela
évite
de
briser
la
page.
Cependant
ceAe
redimension
ne
reprenant
que
la
largeur,
votre
image
sera
déformée.
Il
est
donc
préférable
de
meAre
par
défaut
un
largeur
maximum
de
596px.
Voyelle
-­‐
6
place
de
l'église
à
St
Jean
Sur
Vilaine
-­‐
6
contact@voyelle.fr