Codes d’insertions de documents dans un article

Je me donne comme objec­tif de te mon­trer com­bien il est impor­tant de bien insé­rer les docu­ments dans tes arti­cles pour qu’ils s’affi­chent bien. L’idée, c’est qu’il n’y ait pas de dis­tor­sion d’affi­chage, à savoir que non seu­le­ment le texte de l’arti­cle soit jus­ti­fié à droite et à gauche, mais aussi que les images qui sont insé­rées sui­vent ces mêmes règles de jus­ti­fi­ca­tion.

Ce n’est pas encore par­fait, car la per­fec­tion vien­dra avec l’usage et les dif­fé­rents défis que l’uti­li­sa­tion du site nous pro­po­sera.

Allons-y !

Avec SPIP 2, il n’y a plus de dif­fé­ren­ces entre l’inser­tion d’images et l’inser­tion de docu­ments. Désormais quel­les que soient leur nature (images, video, pdf, etc) on insère tou­jours un docu­ment. SPIP sait de lui-même com­ment l’uti­li­ser.

On peut le posi­tion­ner à l’inté­rieur d’un arti­cle. Dans ce cas, il faut suivre scru­pu­leu­se­ment les codes d’inser­tions qui sui­vent.

Si on ne le posi­tionne pas, il a le statut de docu­ment joint est appa­raît dans la case «docu­ments joints» en fin d’arti­cle.

Un docu­ment importé est affu­blé d’une iden­tité unique : son numéro.
Il peut être uti­lisé dans plu­sieurs arti­cles sans néces­sité de le réim­por­ter, il suffit d’uti­li­ser son numéro.

Dans le corps d’un arti­cle :

Insérer un docu­ment revient à coder de cette manière :

<docxxx>

Le posi­tion­ner consiste à lui adjoin­dre un filtre gauche centre ou droite :

<docxxx|left>

<docxxx|center>

<docxxx|right>

Afin que son affi­chage soit pris en charge par le script Lytebox (qui est en réa­lité Floatbox, mais bon), il faut ajou­ter d’autres fil­tres :

Les fil­tres sui­vants sont dis­po­ni­bles, j’en ajou­te­rai au fur et à mesure que je crée­rai leur fonc­tion.

 Pour une col­lec­tion de photos dans le corps du texte d’un arti­cle, 3 photos par ligne, autant de lignes qu’on veut. Il faut ajou­ter le filtre «lyte­box­hor3» (hor pour photos hori­zon­ta­les ou car­rées comme dans l’arti­cle 26)

<docxx1|left|lyteboxhor3>

<docxx2|left|lyteboxhor3>

<docxx3|right|lyteboxhor3>

Attention : la troi­sième image de la ligne doit être placée à droite !

Voici le test avec trois images codées de cette manière :

Enlightened I

Enlightened II

Enlightened III

 Pour une col­lec­tion de photos dans le corps du texte d’un arti­cle, 4 photos ver­ti­ca­les par ligne, autant de lignes qu’on veut. Il faut ajou­ter le filtre «lyte­box­ver4» (ver pour photos ver­ti­ca­les comme dans l’arti­cle 22)

<docxx1|left|lyteboxver4>

<docxx2|left|lyteboxver4>

<docxx3|left|lyteboxver4>

<docxx4|right|lyteboxver4>

Attention : la qua­triè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’arti­cle 26, il faut ajou­ter le filtre «lyte­box­mov» :

<docxx1|center|lyteboxmov>

Le filtre |center est requis, car je ne garan­tis pas (encore) un bon affi­chage à gauche ou à droite.

Et voici le test video :

 Positionner une seule photo à gauche et posi­tion­ner une seule photo à droite dans un texte.

Puisqu’elle est seule, plutôt que de faire glis­ser le texte sous l’image, et ainsi lais­ser un espace vide jusqu’à la marge oppo­sé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» signi­fiant une seule image hori­zon­tale (fonc­tionne aussi pour une image ver­ti­cale). Ce code est à placer impé­ra­ti­ve­ment juste avant le pre­mier mot du para­gra­phe. Le test suit avec ce texte de sub­sti­tu­tion :

Ciduiscilis diat lor sismod dolo­rem nisim num am nulput alisl dolor sum­sand iamcon ercillu mmodit nonulla conse­quat ip erci bla facil­lup­tat nos­trud tem inci exer­cil estrud el digna facil do odip et niamet alit ad dolo­bor eros­trud tat augait ulla feuisl dolup­tat lao­re­rat.

Ciduiscilis diat lor sismod dolo­rem nisim num am nulput alisl dolor sum­sand iamcon ercillu mmodit nonulla conse­quat ip erci bla facil­lup­tat nos­trud tem inci exer­cil estrud el digna facil do odip et niamet alit ad dolo­bor eros­trud tat augait ulla feuisl dolup­tat lao­re­rat. Ut num nis eum illan ut voles­sed min ute estrud dignit ad dio cor si blan ute dolesse ndiam, sim adip er adip et ametum dolor­pe­rit, quat, conul­pu­tat. Duiscilla acinis ea adion­se­quat ad eugia­met, vera­tem non­se­quam dolor ad dolo­rer aese­ni­sis enim autpat volent lor susto odi­gnim nullum ipisit accum eu facil­lao­rem illa consec­tet, sissi.Ciduiscilis diat lor sismod dolo­rem nisim num am nulput alisl dolor sum­sand iamcon ercillu mmodit nonulla conse­quat ip erci bla facil­lup­tat nos­trud tem inci exer­cil estrud el digna facil do odip et niamet alit ad dolo­bor eros­trud tat augait ulla feuisl dolup­tat lao­re­rat.

Ut num nis eum illan ut voles­sed min ute estrud dignit ad dio cor si blan ute dolesse ndiam, sim adip er adip et ametum dolor­pe­rit, quat, conul­pu­tat. Duiscilla acinis ea adion­se­quat ad eugia­met, vera­tem non­se­quam dolor ad dolo­rer aese­ni­sis enim autpat volent lor susto odi­gnim nullum ipisit accum eu facil­lao­rem illa consec­tet, sissi.

 Positionner 2 photos sur une ligne dans un texte pour l’arti­cle 1 par exem­ple.

<docxx8|left|lyteboxhor2>

<docxx9|right|lyteboxhor2>

La deuxième image doit être à droite !

«hor2» signi­fiant deux images hori­zon­ta­les (fonc­tionne aussi pour deux images ver­ti­ca­les).

Voici le code test comme dans l’arti­cle 1

Il reste à coder les fil­tres sui­vants :

 Positionner à gauche ou à droite une vidéo

 Ceux que mon ima­gi­na­tion me per­met­tra d’écrire...