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

spip.net · Septembre 26, 2022, 6:45

SPIP

Article submitted

The article « Adding images to an article in SPIP 4
(https://www.spip.net/ecrire/?exec=article&id_article=6759) » is submitted
for publication. on Monday 26 September 2022.

Adding images to an article in SPIP 4

Monday 26 September 2022 , by jack

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

contents](#s-Add-an-image-to-an-article)

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 item with its unique number.

You can then perform the following actions:

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

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

contents](#s-Use-image-code-to-illustrate-the-article)

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:

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

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

|image_reduire

` filter. Regardless of this size, the thumbnail of images whose original
dimensions are larger than the value of the constant
_IMAGE_TAILLE_MINI_AUTOLIEN
(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

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

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

<docXX|right> |Back to the table of
contents

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

|left

`
The image is placed on the left and the text continues on its right until
it is higher than the image

Centred position `<docXX

|center

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

Right position `<docXX

|right

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

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

contents](#s-Fill-in-the-information-of-an-image)

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

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…

(https://www.spip.net/IMG/png/filling-info-image.png)

This can result in the following display

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

A pink stain on the floor

@Emma48

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 {seen}
(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.

Organise 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.

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

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

contents](#s-Other-options-in-the-add-image-form)

from my computer: allows you to upload a file stored on your hard
drive.
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 download 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 of 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

contents](#s-Changes-from-previous-versions-of-SPIP)

The use of images has been simplified in SPIP 4.

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

The notion of images and portfolio is no longer distinguished
Deleting 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
(https://blog.spip.net/O-mega-c-est-SPIP-4-0-alpha.html)

Portfolio

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