**SPIP**
# Article proposé
L’article "**SPIP images shortcuts : know-how**
(https://www.spip.net/ecrire/?exec=article&id_article=6485)" est proposé
à la publication depuis le dimanche 20 janvier 2019.
* * *
## SPIP images shortcuts : know-how
dimanche 20 janvier 2019 , par [naema](.././?page=auteur&id_auteur=8207&)
This article describes the default settings to insert images in SPIP (SPIP
3.0 and newer versions)
## General Principle
SPIP shortcuts are a handyway to display images in SPIP. Those shortcuts
are translated into a HTML code (which is described and set in the
templates found in the folder : /plugins-dist/medias/models/). This HTML
code is further "dressed" with the CSS code stylesheets (that you can
customize) in order to display the final look of those images.
**Warning : ** The way images are displayed or look like can thus change
from a website to another, according to how you set your CSS stylesheets,
or whether you decide to *override* the default templates. If the final
result doesn’t suit you, please analyze first how the stylesheets are
set.
## In short...
For busy ones who don’t have time for long explanations...
Shortcut
Meaning
Illustration
Portfolio
`<img>`
images
Image
Thumbnail + Link
`<doc>`
document
Image + Title
Thumbnail + Title + Link
`<emb>`
embed
Image + Title
Thumbnail + Title
---------------------------------------------------------------------------
More detailed explanations follow...
## Add images
https://www.spip.net/fr_article5631.html
https://www.spip.net/fr_article5632.html
## Illustration or Portfolio ?
There are two ways to display your images with SPIP :
* **Illustration for an article** : that helps you explain some parts of
your text with an image (inside the body of your your text)
* **Portfolio** : that is intended to display a set of images, such as in
a photography portfolio, a slideshow... (all together at the end of your
text)
You can easily switch from one method to another by selecting the
appropriate setting (as explained in the pictures below) : click on "Put
into the Portfolio" or "Take out of the Portfolio".
#### Case # 1 : Image set as Illustration
The three shortcuts `<img>, <emb>, and <doc>` are equivalent and will lead
to the same result : They will display a full size image.
Further, the two `<emb>` and `<doc>` shortcuts will display the title of
your image, if you have set one (which is not a default setting for the
`<img>` shortcut).
Examples below, with the same image :
code `<img94>`
code `<doc94>`
code `<emb94>`
#### Case # 2 : Image set as Portfolio
If your image is set as "Included to the Portfolio", then using one of the
three shortcuts `<img>`, `<emb>` or `<doc>` will make them appear in the
body of your text (and thus, will take them "out of the Portfolio").
Shortcut
Comments
`<img>`
will display the thumbnail with a clickable direct link to the full-size
image
`<doc>`
will display the thumbnail AND its title with a clickable direct link to
the full-size image
`<emb>`
will display the full-size image, without any link (it is embed)
---------------------------------------------------------------------------
Examples below with the same image :
code `<img95>`
code `<doc95>`
code `<emb95>`
[1]
## How to use the align parameter : left, right, or center
The images are always displayed in the FLOW of the text according to the
HTML syntax. Here is something you need to keep in mind : the link to the
image must always be written at the BEGINNING of your text in order to
appear "part" of your paragrah, whether you chose to set it on the left
hand-side, the right-side (regarding to the text orientation) or the center
of the page (and this is the way the HTML works).
Let’s analyze the following examples :
Setting
Graphic outlook
code
Final result
Default setting
the image is displayed following the flow of the text
`<imgXX>`
IMAGE HERE
Left
the image is displayed on the left-handside of the text and the text wraps
it then continues below until the end of the text.
`<imgXX|left>`
IMAGE HERE
Center
the image is displayed at the top-center of the text and the text starts
underneath, below.
`<imgXX|center>`
IMAGE HERE
Right
the image is displayed on the right-handside of the text and the text wraps
it then continues below until the end of the text.
`<imgXX|right>`
IMAGE HERE
---------------------------------------------------------------------------
Remember to always write the image code BEFORE your text, whatever
orientation you wish it to get :
the right way :
`<imgXX|right>Lorem ipsum dolor sit amet consectetuer consequat et Donec
lacinia id. Lorem pretium Curabitur lacus Pellentesque leo id volutpat
Donec ....`
and the wrong way (that will display the image underneath your text,
separated from it — which is not what you want to get) :
Lorem ipsum dolor sit amet consectetuer consequat et Donec lacinia id.
Lorem pretium Curabitur lacus Pellentesque leo id volutpat Donec ....
<imgXX|right>
Note : You can chose to write the image code in the flow of your text (as
above) or underneath, with a line-break. But please note that there should
be no blank space between the line code for the image and your text, since
both are considered two parts of the same paragraph in HTML code. If you a
skip a line, it will be interpreted as two distincts pargraphs and you
won’t obtain the wanted result.
To be more precise :
This works :
<imgXX|right>
Lorem ipsum dolor sit amet consectetuer consequat et Donec lacinia id.
Lorem pretium Curabitur lacus Pellentesque leo id volutpat Donec ....
This doesn’t work :
<imgXX|right>
Lorem ipsum dolor sit amet consectetuer consequat et Donec lacinia id.
Lorem pretium Curabitur lacus Pellentesque leo id volutpat Donec ....
And to set your images in-line (depending their size, of course), simply
set the same align parameter for all of them, for example "left" :
`<img50|left><img57|left><img58|left> ...`
**Tips :** Depending on how you have set your CSS stylesheet, you can
display your images alternatively floating on one side then on the other
side, such as : `<docXX|left>, <imgWW|right>` by using the shortcut :
`----` (four dashes, that mean a paragraph break) in-between the images.
Otherwise you will have to set it specifically with the HTML code as
follows : `<div style="clear:both"></div>`, (meaning : "re-set to
default"), eg. below :
`<docXX|left><div style="clear:both"></div><imgWW|right>`
[1] Some plugins (like ’image_responsive’) can enable you to insert the
image title even when you use the `<img>` shortcut, but it is not a SPIP
default setting.
— Envoyé par SPIP (https://www.spip.net/)
