Pour que les images s’affichent correctement sur ce site, il convient de connaître les codes d’insertion.
Clique sur le bouton « Prévisualisation » pour voir les exemples comme si l’article était publié.
Je me donne comme objectif de te montrer combien il est important de bien insérer les documents dans tes articles pour qu’ils s’affichent bien. L’idée, c’est qu’il n’y ait pas de distorsion d’affichage, à savoir que non seulement le texte de l’article soit justifié à droite et à gauche, mais aussi que les images qui sont insérées suivent ces mêmes règles de justification.
Ce n’est pas encore parfait, car la perfection viendra avec l’usage et les différents défis que l’utilisation du site nous proposera.
Allons-y !
Avec SPIP 2, il n’y a plus de différences entre l’insertion d’images et l’insertion de documents. Désormais quelles que soient leur nature (images, video, pdf, etc) on insère toujours un document. SPIP sait de lui-même comment l’utiliser.
On peut le positionner à l’intérieur d’un article. Dans ce cas, il faut suivre scrupuleusement les codes d’insertions qui suivent.
Si on ne le positionne pas, il a le statut de document joint est apparaît dans la case «documents joints» en fin d’article.
Un document importé est affublé d’une identité unique : son numéro.
Il peut être utilisé dans plusieurs articles sans nécessité de le réimporter, il suffit d’utiliser son numéro.
Dans le corps d’un article :
Insérer un document revient à coder de cette manière :
<docxxx>
Le positionner consiste à lui adjoindre un filtre gauche centre ou droite :
<docxxx|left>
<docxxx|center>
<docxxx|right>
Afin que son affichage soit pris en charge par le script Lytebox (qui est en réalité Floatbox, mais bon), il faut ajouter d’autres filtres :
Les filtres suivants sont disponibles, j’en ajouterai au fur et à mesure que je créerai leur fonction.
Pour une collection de photos dans le corps du texte d’un article, 3 photos par ligne, autant de lignes qu’on veut. Il faut ajouter le filtre «lyteboxhor3» (hor pour photos horizontales ou carrées comme dans l’article 26)
<docxx1|left|lyteboxhor3>
<docxx2|left|lyteboxhor3>
<docxx3|right|lyteboxhor3>
Attention : la troisième image de la ligne doit être placée à droite !
Voici le test avec trois images codées de cette manière :
Pour une collection de photos dans le corps du texte d’un article, 4 photos verticales par ligne, autant de lignes qu’on veut. Il faut ajouter le filtre «lyteboxver4» (ver pour photos verticales comme dans l’article 22)
<docxx1|left|lyteboxver4>
<docxx2|left|lyteboxver4>
<docxx3|left|lyteboxver4>
<docxx4|right|lyteboxver4>
Attention : la quatrième image de la ligne doit être placée à droite !
Voici le test avec 4 images codées de cette manière :
Pour insérer une vidéo comme dans l’article 26, il faut ajouter le filtre «lyteboxmov» :
<docxx1|center|lyteboxmov>
Le filtre |center est requis, car je ne garantis pas (encore) un bon affichage à gauche ou à droite.
Et voici le test video :
Positionner une seule photo à gauche et positionner une seule photo à droite dans un texte.
Puisqu’elle est seule, plutôt que de faire glisser le texte sous l’image, et ainsi laisser un espace vide jusqu’à la marge opposée, j’ai fait en sorte que le texte habille l’image.
Le code est celui-ci :
<docxx3|left|lyteboxhor1>
pour la gauche
ou
<docxx4|right|lyteboxhor1>
pour la droite
«hor1» signifiant une seule image horizontale (fonctionne aussi pour une image verticale). Ce code est à placer impérativement juste avant le premier mot du paragraphe. Le test suit avec ce texte de substitution :
Ciduiscilis diat lor sismod dolorem nisim num am nulput alisl dolor sumsand iamcon ercillu mmodit nonulla consequat ip erci bla facilluptat nostrud tem inci exercil estrud el digna facil do odip et niamet alit ad dolobor erostrud tat augait ulla feuisl doluptat laorerat.
Ciduiscilis diat lor sismod dolorem nisim num am nulput alisl dolor sumsand iamcon ercillu mmodit nonulla consequat ip erci bla facilluptat nostrud tem inci exercil estrud el digna facil do odip et niamet alit ad dolobor erostrud tat augait ulla feuisl doluptat laorerat. Ut num nis eum illan ut volessed min ute estrud dignit ad dio cor si blan ute dolesse ndiam, sim adip er adip et ametum dolorperit, quat, conulputat. Duiscilla acinis ea adionsequat ad eugiamet, veratem nonsequam dolor ad dolorer aesenisis enim autpat volent lor susto odignim nullum ipisit accum eu facillaorem illa consectet, sissi.Ciduiscilis diat lor sismod dolorem nisim num am nulput alisl dolor sumsand iamcon ercillu mmodit nonulla consequat ip erci bla facilluptat nostrud tem inci exercil estrud el digna facil do odip et niamet alit ad dolobor erostrud tat augait ulla feuisl doluptat laorerat.
Ut num nis eum illan ut volessed min ute estrud dignit ad dio cor si blan ute dolesse ndiam, sim adip er adip et ametum dolorperit, quat, conulputat. Duiscilla acinis ea adionsequat ad eugiamet, veratem nonsequam dolor ad dolorer aesenisis enim autpat volent lor susto odignim nullum ipisit accum eu facillaorem illa consectet, sissi.
Positionner 2 photos sur une ligne dans un texte pour l’article 1 par exemple.
<docxx8|left|lyteboxhor2>
<docxx9|right|lyteboxhor2>
La deuxième image doit être à droite !
«hor2» signifiant deux images horizontales (fonctionne aussi pour deux images verticales).
Voici le code test comme dans l’article 1
Il reste à coder les filtres suivants :
Positionner à gauche ou à droite une vidéo
Ceux que mon imagination me permettra d’écrire...