Insertion et Placement des images

samedi 17 novembre 2007
par  _Toufik_
popularité : 4%

Introduction

Une image peut-être insérée dans un article, directement dans le texte ou dans un porfolio.

Quand l’image est téléchargée sur le serveur, trois tags sont proposés sous la vignette de l’image

<imgxxx|left> - <imgxxx|center> - <imgxxx|right>
ou
<docxxx|left> - <docxxx|center> - <docxxx|right>

Ces tags correspondent à des fonctions de mise en page :

  • left = image alignée à gauche (le texte se place à droite de l’image)
  • center = image alignée au centre
  • right = image alignée à droite (le texte se place à gauche)

Remarque : En cas de suppression du tag
<imgxxx> ou <idocxxx>
l’image sera insérée dans le texte, sans aucun effet d’habillage.


Insertion des images dans un portfolio

Pour insérer une image dans un porfolio, il suffit de procéder comme suit :

- Télécharger l’image au format JPEG, GIF ou PNG

  • Ajouter un document :
    • Parcourir et choisir l’image à télécharger
      PNG - 3.6 ko
      Ajouter un document
    • Télécharger l’image et ajouter, éventuellement des informations (Titre de l’image et/ou Descriptif)
      PNG - 19.7 ko
      Télécharger un document

- Le portfolio apparaît en bas de l’article

PNG - 77.4 ko
Portfolio
Profolio dans l’espace privé
PNG - 33.4 ko
Portfolio
Profolio dans l’espace public

- Pour insérer une image du portfolio dans le texte :

  • Pour afficher uniquement la vignette

    Insérer dans le texte un raccourci de la forme <img476|center>
    Sarka-SPIP

  • Pour afficher la vignette, le titre et le descriptif

    Insérer dans le texte un raccourci de la forme <doc476|center>

    GIF - 2.1 ko
    Sarka-SPIP
    Logo de Sarka-SPIP

- Il est possible d’éditer le titre et/ou la description d’un document depuis le portfolio.


Insertion des images dans un texte

Pour insérer une image dans un texte, il suffit de procéder comme suit :

- Télécharger l’image au format JPEG, GIF ou PNG

  • Ajouter une image :
    • Parcourir et choisir l’image à télécharger
      PNG - 3.2 ko
      Ajouter une image
    • Télécharger l’image et ajouter, éventuellement des informations (Titre de l’image et/ou Descriptif)
      PNG - 13 ko
      Télécharger une image

- Insérer l’image dans le texte et ajouter, éventuellement, des informations (Titre de l’image et/ou Description)

  • Insertion et Placement des images avec imgxxx
    • Placement à gauche

      Insérer dans le texte un raccourci de la forme <img463|left>
      Sarka-SPIP

    • Placement au centre

      Insérer dans le texte un raccourci de la forme <img463|center>
      Sarka-SPIP

    • Placement à droite

      Insérer dans le texte un raccourci de la forme <img463|right>
      Sarka-SPIP

  • Insertion et Placement des images avec embxxx
    • Placement à gauche

      <emb463|left>

      GIF - 2.1 ko
      Sarka-SPIP
      Logo de Sarka-SPIP
    • Placement au centre

      Insérer dans le texte un raccourci de la forme <emb463|center>

      GIF - 2.1 ko
      Sarka-SPIP
      Logo de Sarka-SPIP
    • Placement à droite

      Insérer dans le texte un raccourci de la forme <emb463|right>

      GIF - 2.1 ko
      Sarka-SPIP
      Logo de Sarka-SPIP
  • Insertion et Placement des images avec docxxx
    • Placement à gauche

      Insérer dans le texte un raccourci de la forme <doc463|left>

      GIF - 2.1 ko
      Sarka-SPIP
      Logo de Sarka-SPIP
    • Placement au centre

      <doc463|center>

      GIF - 2.1 ko
      Sarka-SPIP
      Logo de Sarka-SPIP
    • Placement à droite

      Insérer dans le texte un raccourci de la forme <doc463|right>

      GIF - 2.1 ko
      Sarka-SPIP
      Logo de Sarka-SPIP

Insertion des images à l’aide de liens

- Pour insérer une image jointe à cet article ou à un autre article

  • Le texte du lien peut être spécifié

Insérer dans le texte un raccourci de la forme

[Logo de Sarka-SPIP->doc463]

ou

[Logo de Sarka-SPIP->img463]

ce qui donne

Voir le logo de Sarka-SPIP

ou

Voir le logo de Sarka-SPIP

  • Le texte du lien peut ne pas être spécifié

Insérer dans le texte un raccourci de la forme

[->doc476] ou [->img463]

ce qui donne

Sarka-SPIP ou Sarka-SPIP

dans ce cas, c’est le titre de l’image qui apparaît

- Pour insérer une image à l’aide d’un lien

Insérer dans le texte un raccourci de la forme

[Logo de Sarka-SPIP->http://sarka-spip.com/IMG/siteon0.gif]

ce qui donne

Logo de Sarka-SPIP

- Pour aller plus loin :

  • Insérer une image cliquable

Insérer dans le texte un raccourci de la forme

[<img463>->http://sarka-spip.com/] ou [<doc463>->http://sarka-spip.com/]

ce qui donne

Sarka-SPIP

ou

GIF - 2.1 ko
Sarka-SPIP
Logo de Sarka-SPIP