Accueil : Guide des auteurs du web pédagogique
Accueil >> Rédiger >> Usages de...

article Usages de base dans spip     -    publié le 23/12/2011    mis à jour le 15/03/2013

Les fonctionnalités pour présenter un article

1 2 3 4 5 6 7 8 9 10 11 12 

• Images


Une image doit avoir l’extension png, jpeg ou gif

Lorsque vous téléchargez des images1, vous avez trois utilisations possibles de celles-ci :

- 1. Insérer une image dans l’article

Boîte de téléchargement SPIP

Vous souhaitez insérer une image dans l’article (pour l’illustrer). Celle-ci ne doit pas dépasser 500 px de large :
- vous utiliserez le cadre « Ajouter une image ou un document » de votre interface d’administration :

  1. choisir l’endroit où est localisé le fichier à télécharger en cliquant sur le lien approprié (mon ordinateur, la médiathèque2, le serveur3, internet) ;
  2. choisir le fichier à importer ;
  3. télécharger le fichier.
Fenêtre de modification d'une image

La nouvelle image téléchargée doit nécessairement comporter un titre voire un descriptif.
Pour saisir ces informations, cliquer sur le lien "Modifier" de la boîte document correspondante puis :

  1. compléter les champs "Titre du document" voire "Description" ;
  2. enregistrer.
     
Boîte image avec les balises à insérer


- En dessous du nom du fichier téléchargé, apparaissent des "balises" à copier-coller dans votre article là où vous souhaitez insérer l’image (cf. ci-contre).
Choisissez la balise qui vous convient. Left pour insérer votre document à gauche de votre texte. Center placera votre document au milieu de votre article. Right placera le document à droite de votre article.

Pour insérer cette balise dans le texte, il existe trois possibilités (vous choisirez celle qui vous convient le mieux) :

  • sélectionner la balise avec la souris puis "copier" (Ctrl+C) ; Placer ensuite le curseur de la souris dans votre article et effectuer le "coller" (Ctrl+V) ;
  • glisser déposer la balise avec la souris ;
  • positionner le curseur dans le texte à l’endroit où vous souhaitez insérer le document, puis double-cliquer sur la balise correspondante.

Vous devez avoir impérativement rempli le champ "Titre de l’image :" de la boîte image (ce titre apparaîtra dans une bulle au passage du pointeur de la souris).

Remarque :

  • Si vous souhaitez faire apparaitre un descriptif sous l’image, il suffit de compléter le champ "Description" dans la fenêtre d’édition du document (lien "Modifier).
Pour davantage de précisions, vous pouvez consulter l’article "Usages multimédia."

 

- 2. Insérer une vignette cliquable dans l’article

Vous souhaitez qu’une vignette "cliquable" (pour ouvrir l’image dans son format d’origine) s’insère dans l’article :
- vous suivrez la même démarche que précédemment, mais une fois l’image téléchargée, vous cliquerez dans la boîte de sur le bouton "Déposer dans le portfolio".
Vous n’aurez plus qu’à insérer la balise dans le texte (<docXX>) pour obtenir une vignette cliquable.

Pour davantage de précisions, vous pouvez consulter l’article "Usages multimédia."

 

- 3. Proposer un album d’images dans l’article

Bouton "Ajouter un document"

Vous souhaitez ajouter un lot d’images et qu’elles s’organisent automatiquement en album :
- vous compresserez vos images dans un dossier zip et utiliserez le bouton « Ajouter un document » situé au pied de la page "aperçu/propriétés" de l’article.

L’autre solution consiste à cliquer sur le bouton "Déposer dans le portfolio" (dans la boîte "image") pour chaque image que l’on souhaite voir apparaître dans l’album (à condition de ne pas insérer leur balise dans l’article).

Pour davantage de précisions, vous pouvez consulter l’article "Usages multimédia."

 

Attention :
Il est bien entendu possible de combiner ces trois utilisations dans un même article.
- Dans tous les cas et pour des raisons d’accessibilité, vous penserez à donner un titre à chaque image (champ "Titre de l’image" disponible lorsque vous cliquez sur le lien "Modifier" de la boîte correspondante).

 

- Détacher une image

Détacher une image

Pour détacher une image d’un article sans le supprimer du site :

  1. cliquer sur le bouton "Modifier cet article" ;
  2. supprimer la balise correspondante (<docXX>) dans le champ d’édition de SPIP ;
  3. cliquer sur le bouton "Détacher" dans la boîte image correspondante.

Cette image est toujours disponible dans la médiathèque.

- Supprimer une image

Supprimer une image

Pour supprimer une image du site :

  1. cliquer sur le bouton "Modifier cet article" ;
  2. supprimer la balise correspondante (<docXX>) dans le champ d’édition de SPIP ;
  3. cliquer sur le bouton "Supprimer" dans la boîte image correspondante.

Cette image est définitivement supprimée du site.

 

• La balise clear

La balise <clear> permet de supprimer les effets de positionnement (Left, center et right) des objets qui précèdent.
Son emploi facilite ainsi la construction des compositions qui incluent par exemple du texte et des images.

- Pour l’utiliser, il suffit de positionner son curseur à l’endroit souhaité et de cliquer sur le bouton "clear" dans la barre typographique de SPIP.

Bouton spip "clear"

 

Ainsi, pour afficher :
Illustration1 - paysage

mon texte d’accompagnement 1 - placé à droite de l’image


 

Illustration2 - paysage

mon texte d’accompagnement 2 - placé à gauche de l’image

Il faut écrire :

<doc251|left> mon texte d'accompagnement 1 - placé à droite de l'image
<clear>
<doc252|right> mon texte d'accompagnement 2 - placé à gauche de l'image
<clear>

(1) Sachant que chaque objet téléchargé possède un numéro unique, il est possible de l’utiliser dans plusieurs articles en réutilisant sa balise <docXX> ou en accédant à la médiathèque.

(2) Bibliothèque de fichiers déjà importés dans le site.

(3) Permet d’accéder au contenu du répertoire upload.

Contact
Accessibilité
Mentions légales
RSS
Académie de Poitiers, Rectorat, 22 rue Guillaume VII le Troubadour BP 625 86022 Poitiers Cedex