Voici un exemple d’un album photos (ici nommé Portfolio) joint à un article. La même technique s’applique aussi à une rubrique.
Pour les rédacteurs
Des images aux fomats GIF, JPG et PNG peuvent être jointes à un article ou une rubrique en utilisant le formulaire JOINDRE UN DOCUMENT ou Ajouter une image ou un document lors de la création ou de l’édition d’un article ou d’une rubrique. Les images peuvent être jointes à un article ou une rubrique en utilisant l’une ou l’autre des méthodes suivantes :
- En téléchargeant une à une des images à partir de votre ordinateur.
- En téléchargeant un lot d’images compressés en un seul fichier au format .zip (SPIP vous propose alors de les décompresser et d’en faire un Portfolio, automatiquement)
- En référencant une image externe sur l’internet. Il suffit alors d’en indiquer l’adresse URL.
Dans l’exemple qui suit, nous avons utilisé les trois méthodes.
Pour ordonner les vignettes dans l’ordre désiré
- Faites simplement précéder le Titre de la vignette d’un nombre suivi d’un point et d’une espace, ainsi :
1. Le Lac des castors - Les vignettes seront alors ordonnées selon le numéro de leur titre.
Pour l’administrateur du site
S’assurer d’abord, dans l’espace privé (à Configuration > Contenu du site : Documents joints), de cocher Autoriser les documents joints aux articles et Autoriser les documents joints aux rubriques.
Dans l’exemple au bas de la présente page, nous avons activé le plugin MediaBox dans Configuration -> Gestion des plugins. Ça fonctionne aussi sensiblement de la même façon avec les plugins FancyBox, Thickbox ou Nyceros. Si aucun plugin de gestion de portfolio n’est installé et activé, la version agrandie de la vignette cliquée s’affichera sous l’ensemble des vignettes.
Autre type d’album
Exemple
Le diaporama d’une Gallerie de photos issue de Flickr.
Code
Le code HTML copié du bouton Partager de la Gallerie photos de Flickr (dans l’onglet précédent)
- <object width="500" height="375"> <param name="flashvars" value="offsite=true&lang=fr-fr&page_show_url=%2Fphotos%2Ftags%2Fautumn%2Finteresting%2Fshow%2F&page_show_back_url=%2Fphotos%2Ftags%2Fautumn%2Finteresting%2F&tags=autumn&sort=interestingness-desc&jump_to=&start_index="></param> <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649"></param> <param name="allowFullScreen" value="true"></param><embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=71649" allowFullScreen="true" flashvars="offsite=true&lang=fr-fr&page_show_url=%2Fphotos%2Ftags%2Fautumn%2Finteresting%2Fshow%2F&page_show_back_url=%2Fphotos%2Ftags%2Fautumn%2Finteresting%2F&tags=autumn&sort=interestingness-desc&jump_to=&start_index=" width="500" height="375"></embed></object>





