USR 3133 - CNRS/EFR Unité de Service et de Recherche

Utilisation des images

Lorsqu’on importe une image ou un document dans une page d’article (ou de rubrique), Spip propose d’abord un premier choix : l’enregistrer ou non dans le ’Portfolio’ de la page.
Le ’Portfolio’ d’une page est une galerie, un ’réservoir’ de documents propre à cette page. Cette galerie s’affiche en bas de page avec des images / documents qui n’ont pas déjà été ’utilisés’, placés, dans le texte.

  • hors du Portfolio, l’image (ou document) est associée à l’article mais si elle n’est pas placée volontairement dans le texte elle n’apparaîtra pas.
  • Mise dans le Portfolio de la page, l’image (ou document) est associée à cette page et apparaîtra de toute façon, qu’on la place volontairement dans le texte ou non.
     
    Dans la pratique, lorsqu’on importe une image dans une page c’est pour l’afficher quelque part et pour cela, on l’enregistrera "par réflexe" dans le Portfolio car c’est ce qui offre le plus de choix d’affichages.
    La laisser hors Portfolio concerne des emplois spéciaux et donc très rares : par ex. une image à afficher dans le carrousel d’accueil et non dans la page même.
     
    Dans cet article sont expliqués et testés les codes d’insertion dans le texte proposés par Spip :
  • Hors Portfolio : "doc",
  • Dans le Portfolio : "doc" et "emb".
     
    Ainsi qu’un code non proposé mais employable, cité juste à titre informatif au cas où quelqu’un essaierait : "img".

Dernière mise à jour : 14 février 2018

  Emploi du code ’doc’

A - vignettes d’images à agrandir (grandes) dans le texte, ou en bas de page

Image mise dans le Portfolio, insérée dans le texte avec le code "doc", avec Titre, Descriptif et Crédit renseigné + mise en lien de certains exemplaires :
Ci-dessous :
<doc375|left>[<doc375|left>->http://www.cnrs.fr] : vignettes à gauche dont une avec lien, épousées par le texte éventuel (noter qu’il suffit de mettre des images en ’left’ cote à cote pour que les vignettes s’alignent à partir de la gauche. Idem pour ’right’ mais pas possible pour ’center’)..
[<doc375|left>->http://www.cnrs.fr] : même image et même code mais cette fois servant de lien.
<doc375|center> : l’image est centrée et ne tolère rien à coté d’elle.
<doc375|right> : image à droite épousée par le texte éventuel.
==> Si cette image n’est pas mise dans le texte avec l’un des codes ci-dessus, elle sera automatiquement disponible en fin de page dans la galerie de l’article (="Portfolio").

Ici un titre pour voir sa disposition
  • Ici un titre pour voir sa disposition
  • | ©Làuncredit
  • Ici un descriptif pour voir comment il se dispose quand il est un peu long sous l’image blablabla blablablablablabla
Ici un titre pour voir sa disposition
  • Ici un titre pour voir sa disposition
  • | ©Làuncredit
  • Ici un descriptif pour voir comment il se dispose quand il est un peu long sous l’image blablabla blablablablablabla
Ici un titre pour voir sa disposition
  • Ici un titre pour voir sa disposition
  • | ©Làuncredit
  • Ici un descriptif pour voir comment il se dispose quand il est un peu long sous l’image blablabla blablablablablabla
Ici un titre pour voir sa disposition
  • Ici un titre pour voir sa disposition
  • | ©Làuncredit
  • Ici un descriptif pour voir comment il se dispose quand il est un peu long sous l’image blablabla blablablablablabla

Ici un titre pour voir sa disposition
  • Ici un titre pour voir sa disposition

Exemples similaires mais juste avec un titre (sans ’Crédits’ ni ’Descriptif’) puis sans aucun texte. Pas de lien non plus. Donc en ’left’ puis en ’center’.

Ici un titre pour voir sa disposition
  • Ici un titre pour voir sa disposition

B - Document (pdf.. word.. etc.) dans le texte, ou en bas de page

Document mis dans le Portfolio, inséré dans le texte avec le code "doc", avec ’Titre’, ’Descriptif’ et ’Crédit’ renseignés.
Ci-dessous : <doc386|left>, <doc386|center> et <doc386|right>
==> Si ce document n’est pas mis dans le texte avec l’un des codes ci-dessus, il sera automatiquement disponible en fin de page dans une section "Documents joints" (puisque enregistré dans le "Portfolio" de l’article).


Idem mais sans ’Titre’, ’Descriptif’ ni ’Crédit’ renseignés pour ce document.


C - Image à taille réelle dans le texte, ou invisible

Image NON mise dans le Portfolio, insérée dans le texte avec le code "doc", avec Titre, Descriptif et Crédit renseignés :
Ci-dessous : <doc377|left>, <doc377|center> et <doc377|right>
==> Si cette image n’est pas mise dans le texte avec l’un des codes ci-dessus, elle ne sera PAS automatiquement disponible en fin de page dans la galerie de l’article (="Portfolio"). Elle sera alors invisible dans la page de l’article.
Dans le texte ces images apparaissent directement à leur taille réelle (dans les limites de la largeur ’utile’ de la page). Donc pas d’agrandissement possible.

Ici un titre pour voir sa disposition
  • Ici un titre pour voir sa disposition
  • | ©Làuncredit
  • Ici un descriptif pour voir comment il se dispose quand il est un peu long sous l’image blablablablablabla blablabla
Ici un titre pour voir sa disposition
  • Ici un titre pour voir sa disposition
  • | ©Làuncredit
  • Ici un descriptif pour voir comment il se dispose quand il est un peu long sous l’image blablablablablabla blablabla
Ici un titre pour voir sa disposition
  • Ici un titre pour voir sa disposition
  • | ©Làuncredit
  • Ici un descriptif pour voir comment il se dispose quand il est un peu long sous l’image blablablablablabla blablabla

 Emploi du code ’emb’

Image à taille réelle dans le texte, ou vignette en bas de page

Image mise dans le Portfolio, insérée dans le texte avec le code "emb", avec Titre, Descriptif et Crédit renseignés + 1 mise en lien :
Ci-dessous : <emb376|left>, [<emb376|center>->http://www.cnrs.fr] et <emb376|right>
==> Si cette image n’est pas mise dans le texte avec l’un des codes ci-dessus, elle sera automatiquement disponible en fin de page dans la galerie de l’article (="Portfolio").
Dans le texte ces images apparaissent directement à leur taille réelle (dans les limites de la largeur ’utile’ de la page). Donc pas d’agrandissement possible.

Ici un titre pour voir sa disposition
  • Ici un titre pour voir sa disposition
  • | ©Làuncredit
  • Ici un descriptif pour voir comment il se dispose quand il est un peu long sous l’image blablablablablabla blablablablablabla
Ici un titre pour voir sa disposition
  • Ici un titre pour voir sa disposition
  • | ©Làuncredit
  • Ici un descriptif pour voir comment il se dispose quand il est un peu long sous l’image blablablablablabla blablablablablabla
Ici un titre pour voir sa disposition
  • Ici un titre pour voir sa disposition
  • | ©Làuncredit
  • Ici un descriptif pour voir comment il se dispose quand il est un peu long sous l’image blablablablablabla blablablablablabla

Idem mais juste avec un titre (sans ’Crédits’ ni ’Descriptif’) puis sans texte. Pas de lien non plus.

Ici un titre pour voir sa disposition
  • Ici un titre pour voir sa disposition

 Emploi du code non proposé par Spip : ’img’

Image à taille réelle dans le texte, ou vignette en bas de page

Image mise dans le Portfolio, insérée dans le texte avec le code "img", avec ’Titre’, ’Descriptif’ et ’Crédit’ renseignés :
Ci-dessous : <img376|left>, <img376|center> et <img376|right>
==> Si cette image n’est pas mise dans le texte avec l’un des codes ci-dessus, elle sera automatiquement disponible en fin de page dans la galerie de l’article (="Portfolio").
Dans le texte ces images apparaissent directement à leur taille réelle (dans les limites de la largeur ’utile’ de la page). Donc pas d’agrandissement possible.

Ici un titre pour voir sa disposition {JPEG}

Ici un titre pour voir sa disposition {JPEG}

Ici un titre pour voir sa disposition {JPEG}


Cette fois ’img’ avec une image qui n’est PAS enregistrée dans le portfolio :
<img377|left><img377|center><img377|right>.
Donc si elle n’était pas utilisée ici elle ne serait pas affichée en bas de page dans le ’Portfolio’ :
 
Ici un titre pour voir sa disposition {JPEG}

Ici un titre pour voir sa disposition {JPEG}

Ici un titre pour voir sa disposition {JPEG}


 Le Portfolio

Ci dessous s’affichent les sections "Portfolio" + "Documents joints" qui offrent les images d’une part et les documents d’autre part qui ont été enregistrés dans le "Portfolio" de la page et qui n’ont pas déjà été placés dans le texte.