Documentation Awele Partager pour récolter

Objectif : Suite à un événement, vous avez 36 photos à publier sur votre site SPIP.

Tout d'abord, n'oubliez pas de les traiter un minimum, et de les enregistrer en bonne qualité tout en prennant compte que leur poids ne devra pas excéder 2 Mo. Aucune limitation de taille dans ce tutoriel. Ensuite, créez un article dans la partie privée, donnez-lui un titre, et validez-le. Nous voici avec :

• 1 article déjà existant dans la partie privée de SPIP
• 36 photos de moins de 0.5Mo chacune dans notre disque dur

0. Créer des fichiers compressés au format ZIP

Avant de télécharger les photos dans Spip, pour faciliter le travail, nous allons les rassembler dans des dossiers compressés. Ce sont ces dossiers qui ont l'extension .zip. Pour créer un .zip sous windows, il faut sélectionner plusieurs images, cliquer droit, et selon le programme que vous utilisez vous allez trouver quelque chose comme "ajouter à photos.zip". Si vous ne trouvez pas le moyen de compresser vos images, vous pouvez télécharger un logiciel de compression libre et gratuit ici. Attention, chaque fichier compressé ne devra avoir un poids supérieur à 2Mo !

1. Télécharger les photos dans SPIP

Tout d'abord, il s'agit de télécharger les photos dans SPIP. Pour cela, nous allons utiliser l'interface "Joindre un document", qui se trouve en bas de page. Dans ce tutoriel, nous n'utiliserons pas l'interface "ajouter une image" ou "ajouter un document" qu'on retrouve lors de la modification d'un article.

Pour chaque dossier compressé (.zip), il faudra :

• Le télécharger : lorsque vous allez télécharger le .zip, SPIP va d'abord vous demander si vous souhaitez extraire les photos du .zip ou pas. Vous acceptez, et SPIP va alors installer toutes les photos du .zip, et créer automatiquement une vignette de 150 pixels de large (par d"faut, votre webmestre peut avoir décidé de faire des vignettes plus grandes, ou plus petites). Vous pouvez retourner chaque photo grâce aux petites flèches sur le côté.
• Lui donner une légende (votre album sera tout de suite plus intéressant)

Une fois les 36 photos téléchargées, vous devriez avoir un résultat semblable à celui-ci (avec plus de photos) :

2. Insérer les photos téléchargées dans l'article

Si vous n'insérez pas les photos dans le texte de l'article, celles-ci vont se trouver dans partie "pièce jointe" de votre article public, si le webmestre l'a mise en place. Dans notre cas, il est important qu'elles soient toutes insérées dans le texte de l'article.

Cliquez sur "Modifier cet article". Vous allez retrouver toutes les photos téléchargées sur le côté de l'article, avec plusieurs codes à votre disposition.

2a. Un tableau pour accueillir tout le monde

Tout d'abord, préparons un tableau dans le corps de l'article SPIP, où nous allons les insérer une par une. Un tableau sous SPIP se prépare avec la touche "|" (Alt Gr + 6 sur un clavier azerty). Dans notre tableau, nous avons choisi de faire des lignes de 3 photos. Il nous faut donc 12 lignes. :

| | | |
| | | |
| | | |
etc.

Chaque ligne se décompose de la sorte : "|" + espace + espace + "|" + espace + espace + "|" + espace + espace + "|" + retour à la ligne (entrée)
Attention, pas d'espace après le dernier "|" d'une ligne !

2b. Pour chaque photo, une cellule de tableau

Sur le côté de l'article en cours de rédaction, nous avons donc toutes les photos. Pour chaque photo, vous avez plusieurs possibilités :

• Inclure la vignette dans le corps de l'article : c'est cette possibilité qui nous intéresse pour notre portfolio
• Inclure la photo directement dans le corps de l'article : c'est une autre possibilité, en sachant que si votre photo fait plus de 50ko les visiteurs auront du mal à la voir.

Il s'agit donc, pour chaque photo, de prendre le code d'inclusion de la vignette et de l'insérer dans le corps de l'article. Il suffit de placer le curseur au milieu d'une cellule, et de double-cliquer ensuite sur la vignette qu'on veut insérer à cet endroit-là (ainsi on peut choisir l'ordre dans lequel insérer des photos). Voici la signification des 3 codes (+1) :

• <doc972|left> va aligner votre photo à gauche, en faisant revenir le texte à droite de celle-ci
• <doc972|center> va aligner votre photo au centre, en faisant revenir le texte à droite de celle-ci
• <doc972|right> va aligner votre photo à droite, en faisant revenir le texte à gauche de celle-ci
• <doc972> n'est pas mentionné par Spip, mais il donne la possibilité d'inclure la photo sans aucun alignement

Dans notre portfolio, nous voulons que les photos soient bien centrées dans chaque cellule, alors nous allons utiliser <doc972|center> pour chacune d'entre elles.

Une fois le tableau rempli il devrait ressembler à :

Validez, et voyons ce que ça donne en ligne : les images sont par ligne de trois, les titres apparaissent automatiquement en dessous et lorsqu'on clique sur une image, on peut voir la photo en grand format !

Récapitulons

Il est normal que vous n'entendiez aucun son.