[SPIP] Proposé : Ajouter une image à un article en SPIP 4

SPIP

Article proposé

L’article « Ajouter une image à un article en SPIP 4
(https://www.spip.net/ecrire/?exec=article&id_article=6744) » est proposé
à la publication depuis le lundi 19 septembre 2022.


Ajouter une image à un article en SPIP 4

lundi 19 septembre 2022 , par erational

Sommaire

  • Ajouter une image à un article
  • Utiliser le code de l’image <docXX> pour illustrer l’article
  • Aligner l’image avec les codes <docXX|left>, <docXX|center> et
    <docXX|right>
  • Organiser les images d’un article
  • Les images « vues »
  • Autres options du formulaire d’ajout d’images
  • Évolutions par rapport aux versions précédentes de SPIP

SPIP 4 permet d’ajouter des images aux articles d’une façon simple et
standardisée à travers un modèle unique <doc>

Ajouter une image à un article[|Retour au

sommaire](#s-Ajouter-une-image-a-un-article)

  • Dans la partie privée de SPIP, aller sur votre article.
  • Ajouter votre image en utilisant le formulaire d’ajout d’image

Vous sélectionnez l’image à télécharger depuis votre disque dur.
Après le chargement, l’image apparait alors à coté de l’article avec
son numéro unique

Vous pouvez ensuite effectuer les actions suivantes :

Insérer l’image
Il suffit de copier le code <doc3966> dans le texte de votre article
(voir paragraphe suivant)

Editer l’image
Les flèches vous permettent de pivoter l’image si elle n’est pas bien
orientée

Supprimer l’image
Le fichier de l’image est supprimé du site

Détacher l’image
L’image est supprimée de l’article mais elle reste disponible dans la
médiathèque du site. On pourra donc l’utiliser ailleurs.

Modifier l’image
Ouvre une fenêtre qui permet de renseigner les informations sur l’image
(titre, descriptif, crédits) ou de mettre à jour le fichier de l’image


Utiliser le code de l’image <docXX> pour illustrer

l’article|Retour au
sommaire

Pour placer l’image dans votre article il suffit d’ajouter le code
obtenu <docXX> dans le texte de l’article

<doc3966>Lorem ipsum dolor sit amet consectetuer consequat et Donec

lacinia id. Lorem pretium Curabitur lacus Pellentesque leo id volutpat
Donec …

Ce qui donne le résultat

(https://www.spip.net/IMG/jpg/apercu-desktop.jpg)

Lorsque vous ajoutez une image, il faut garder à l’esprit que
l’affichage final sur le site publique peut énormément varier selon
l’habillage graphique du site et aussi selon le support (« device ») sur
lequel vous consultez le site

Page consultée depuis un smartphone
Page consultée depuis un ordinateur de bureau

(https://www.spip.net/IMG/jpg/apercu-desktop.jpg)

Aligner l’image avec les codes <docXX|left>, <docXX|center> et

<docXX|right> |Retour au sommaire

Vous pouvez aussi préciser l’alignement de l’image avec les codes
suivants

Position par défaut <docXX>
L’image se place dans le fil du texte

Position à gauche `<docXX

|left

`
L’image se place à gauche et le fil du texte continue sur sa droite
jusqu’à dépasser l’image en hauteur

Position centrée `<docXX

|center

`
L’image se place au centre et le texte passe à la ligne

Position à droite `<docXX

|right

`
L’image se place au centre et le texte passe à la ligne


Organiser les images d’un article[|Retour au

sommaire](#s-Organiser-les-images-d-un-article)

Toutes les images de l’article sont listées en bas de l’article.

Les boutons suivants permettent de changer les vues (plus ou moins
compactes)

Il est possible aussi de modifier l’ordre des images via un
glisser-déposer.

(https://www.spip.net/IMG/jpg/portfoliov_ordonner.jpg)

Les images « vues »|Retour au sommaire

Les images dont on a utilisées le code dans l’article sont marquées
avec une icône « oeil »

On ne peut pas supprimer ou détacher ces images. Il faudra donc à
préalable supprimer les codes <docXX> correspondant dans le texte de
l’article.

Autres options du formulaire d’ajout d’images[|Retour au

sommaire](#s-Autres-options-du-formulaire-d-ajout-d-images)

  • depuis mon ordinateur : permet d’uploader un fichier stocké
    depuis son disque dur
  • depuis la médiathèque : permet de sélectionner un document
    déjà ajouté sur le site. Vous sélectionnez l’image depuis la
    médiathèque. Cela vous évitez d’avoir à télécharger des images qui
    ont déjà été mise en ligne.
  • **depuis le serveur : ** permet de charger des documents ayant été
    déposés par FTP dans le répertoire /tmp/upload du serveur
  • ** depuis internet :** permet d’ajouter une ressource distante comme
    par exemple une image flickr, un zip de github, une vidéo youtube…

Évolutions par rapport aux versions précédentes de SPIP[|Retour au

sommaire](#s-Evolutions-par-rapport-aux-versions-precedentes-de-SPIP)

L’utilisation des images a été simplifiée en SPIP 4.

Pour les rédacteurs et rédactrices habitué-es aux versions SPIP 3 et
précédentes, les principaux changements sont :

  • On ne distingue plus la notion d’images et de portfolio
  • Suppression des modèles <img> et <emb> (qui restent néanmoins
    actifs pour assurer une rétro-compatibilité) au profit du modèle unique
    <doc>.

Explications détaillées
(https://blog.spip.net/O-mega-c-est-SPIP-4-0-alpha.html)

— Envoyé par SPIP (https://www.spip.net/)

rubon209-6a36e.jpg