[SPIP] PUBLISHED : Adding images to an article in SPIP 4


Article validated

The article « Adding images to an article in SPIP 4
(https://www.spip.net/en_article6759.html) » was validated by George.

Adding images to an article in SPIP 4

Monday 26 September 2022 , by jack

Table of contents

  • Add an image to an article
  • Use image code <docXX> to illustrate the article
  • Aligning the image with codes<docXX|left>, <docXX|center> and
  • Fill in the information of an image
  • The « seen » images
  • Other options in the add image form
  • Changes from previous versions of SPIP

SPIP 4 allows images to be added to articles in a simple and standardised
way through a single model<doc>

Add an image to an article[|Back to the table of


  • In the private area of SPIP, go to your article.
  • Add your image using the add image form

You select the image to be downloaded from your hard drive. After
uploading, the image will appear next to the article with its unique

You can then perform the following actions:

Insert image
Simply copy the code <doc3988> into the text of your article (see next

Edit image
The arrows allow you to rotate the image if it is not properly oriented.

Delete Image
The image file is deleted from the site.

Unlink image
The image has been removed from the article but is still available in the
site’s media library. It can therefore be used elsewhere.

Modify image
Opens a window that allows you to enter information about the image (title,
description, credits) or to update the image file

Use image code <docXX> to illustrate the article[|Back to the table of


To place the image in your article simply add the resulting code <docXX>
to the article text.

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

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

This gives the following result:


To display images included in the text of an object, templates often
specify a maximum display size using the `


` filter. Regardless of this size, the thumbnail of images whose original
dimensions are larger than the value of the constant
(https://www.spip.net/ecrire/?exec=article&id_article=6758) include a link
to display them larger in the Mediabox.

In any case, it should be kept in mind that the final display on the public
site can vary enormously depending on the graphic design of the site and
also on the device with which you consult the site.

Page viewed from a smartphone
Page viewed from a desktop computer


Aligning the image with codes<docXX|left>, <docXX|center> and

<docXX|right> |Back to the table of

You can also specify the alignment of the image with the following codes

Default position <docXX>
The image is placed in the thread of the text

Left position `<docXX


The image is floated to the left and the text wraps around it on the right

Centred position `<docXX


The image moves to the centre and the text moves to the line

Right position `<docXX


The image is floated to the right and the text wraps around it on the left

Fill in the information of an image[|Back to the table of


It is possible to go further and add a title, a caption, credits to an

To do this, click on the « Modify » button

You can then fill in the title, the description of the image, its credits,
the alternative text of the image…


This can result in the following layout

(https://www.spip.net/IMG/jpg/glace_pink-2.jpg) **A pink Ice Cream **

A pink stain on the floor


The « seen » images|Back to the table of contents

Images whose code has been used in the article are marked in the private
area with an « eye » icon.

These are the images filtered by the criterion {vu}
(https://www.spip.net/ecrire/?exec=article&id_article=4273). These images
cannot be deleted or unlinked. Therefore, the corresponding <docXX> in
the text of the article will have to be deleted first.

In the default template, the remaining images are listed in a portfolio at
the bottom of the article.

Organising the images of an article

In the private area, all the images in the article are listed at the bottom
of the article.

The following buttons allow you to change the views (more or less compact).

It is also possible to change the order of the images via drag and drop.


In the default template, this feature is used to arrange the images that
are listed in the portfolio.

Other options in the add image form[|Back to the table of


  • from my computer: allows you to upload a file stored on your hard
  • from the media library allows you to select a document already
    added to the site. You select the image from the media library. This avoids
    having to upload images that have already been uploaded.
  • **from the server: ** allows you to upload documents that have been
    dropped by FTP into the /tmp/upload directory on the server.
  • ** from internet:** allows you to add a remote resource, for example a
    photo from an image library or a document from another website.

Changes from previous versions of SPIP[|Back to the table of


The use of images has been simplified in SPIP 4.

For editors used to SPIP 3 and previous versions, the main changes are :

  • No more distinction between the concepts of images and
  • removal of models <img> and <emb> (which nevertheless remain active
    to ensure backwards compatibility) in favour of the single model <doc>.

Detailed explanation (in French): changes in image management with SPIP4.0


— Sent by SPIP (https://www.spip.net/)