iGal
Ceci est une traduction partielle et à ma sauce de la page officielle d'iGal : http://www.stanford.edu/~epop/igal/
Mais qu'est-ce que c'est iGal
?!
iGal, ça veux dire : "online Image GALlery generator" ou
"Générateur de Galerie d'images en ligne".
En fait, c'est un programme, écrit en Perl, qui permet de générer
automatiquement des galeries d'images prêtes à être mises en ligne.
Bien évidemment, c'est un programme conçu pour Unix®, donc en ligne
de commande quifaitpeur®,
(ex: igal -c --as -w 4 -u -k -f -r --title "Démo 1"
ça fout la trouille©, non ?)
Fiturz^W Fonctionnalités
- Facile d'usage. Sisi, c'est fa-ci-le.
- Flexible, assez bien documenté (en français, le man est traduit).
- Gère les fichiers d'images jpg, gif et png (les formats classiques d'images pour le web).
- Génère des pages HTML statiques et valides !!! (W3, 'videmment).
- Facilement configurable, avec des options quifontpeur© et des fichiers modèles pour la CSS et le HTML.
- Les slides utilisent un machin javascript pour pré-charger l'image suivante (c'est dans le slidetemplate, ça s'enlève).
- S'appuie sur les programmes et bibliothèques d'outils suivants : imagemagick, perl, libimage-size-perl.
- Devrait s'installer et fonctionner facilement sur tous les Unix-like (même MacOS-X !)
- S'installe les doigts dans le nez sur une Debian/Testing (Sarge) : # apt-get install igal
Comment ça marche ?
Trés simple : en 10 étapes. Laissez-vous guider, ou allez lire le man.
0/ Étape zéro : installer
(Oui, en root, ou avec sudo)
moufette:~# apt-get install igal Reading Package Lists... Done Building Dependency Tree... Done The following NEW packages will be installed: igal 0 upgraded, 1 newly installed, 0 to remove and 0 not upgraded. Need to get 23.2kB/23.2kB of archives. After unpacking 115kB of additional disk space will be used. Selecting previously deselected package igal. (Reading database ... 80920 files and directories currently installed.) Unpacking igal (from .../archives/igal_1.4-6_all.deb) ... Setting up igal (1.4-6) ... moufette:~#
1/ Première étape : lire le manuel
lois@moufette:~$ man igal
hé ho, je veux bien être sympa, mais faut faire un effort
2/ Deuxième étape : Appréhender le concept
(ok, piger, ça marche aussi)
En gros, iGal fonctionne en trois étapes :
- On invoque iGal une première fois, ce qui lui permet de lister les fichiers images présent dans le répertoire et de créer le fichier .captions (voir plus bas)
- Ensuite, on modifie le fichier .captions, et les modèles d'iGal (igal.css, indextemplate.html et slidetemplate.html) avec son éditeur préféré (Vim, évidemment).
- Enfin, on relance iGal, avec une tétrachiée d'options (lire le man, merci), ce qui va générer un index.html et un fichier HTML par image dans le répertoire.
Observez (étape 6) qu'il y a une copie locale de tous les modèles (CSS et HTML) après la deuxième invoquation d'iGal. Ces modèles locaux ne seront pas écrasés à l'invoquation suivante, sauf contre-ordre. On peut donc bosser "tout en local".
3/ Troisième étape : générer le .captions
lois@moufette:~/web/gruiick/zab/42$ ls -a . .. apt-get.jpg chocolat_42.jpg spams.png stats_200308.gif lois@moufette:~/web/gruiick/zab/42$ igal -c Found 4 image files in current directory Creating the .captions file... Now edit the .captions file to your liking and rerun igal -c lois@moufette:~/web/gruiick/zab/42$ ls -a . .. apt-get.jpg .captions chocolat_42.jpg spams.png stats_200308.gif lois@moufette:~/web/gruiick/zab/42$
(heu, le truc important, là, c'est igal -c, hein)
4/ Quatrième étape : relire ce putain de manuel
lois@moufette:~$ man igal
5/ Cinquième étape : récupérer les modèles et les modifier
Étape la plus importante, s'il en est.
Les modèles sont rangés dans /usr/share/igal/. Vous y trouverez
une CSS et deux fichiers modèles en HTML, faciles à modifier si vous connaissez un peu
le HTML. La doc est contenu dans (inline) les fichiers. Vous pouvez vous faire vos
propres modèles et css, en les rangeant dans le (votre)
répertoire ~/.igal/.
- Exemple d'igal.css (adapté pour ce site)
- Exemple de indextemplate.html (adapté pour ce site) Ctrl+U ou "afficher le code source" pour voir le HTML
- Exemple de slidetemplate.html (adapté pour ce site) Ctrl+U ou "afficher le code source" pour voir le HTML
Vous remarquerez (pour les plus curieux) qu'il n'y a plus trace du javascript d' origine, ça me gonflait, je l'ai viré. Na.
Pour info, iGal recherche les fichiers modèles dans cet ordre :
- - répertoire local
- - igal.css
- - .indextemplate.html
- - .slidetemplate.html
- - répertoire utilisateur (~/.igal/)
- - répertoire système (ou wide : /usr/share/igal/)
6/ Sixième étape : relancer iGal
(attention, cette étape contient une ligne de commande quifaitpeur®)
lois@moufette:~/web/gruiick/zab/42$ igal --as -c -w 4 -u -k -f -r --title "Titre" Reading the .captions file ... found 4 image files. Creating thumbnails: .... done! Determining image sizes: .... done! No .slidetemplate.html file ... getting a copy from /home/lois/.igal/ Creating individual slides: .... done! Got option -r... omitting film reel effect. No .indextemplate.html file... getting a copy from /home/lois/.igal/ No CSS template file ... getting /home/lois/.igal/igal.css Creating the index.html file: .... done! lois@moufette:~/web/gruiick/zab/42$ ls -a . 4.html index.html .thumb_apt-get.jpg .. apt-get.jpg .indextemplate.html .thumb_chocolat_42.jpg 1.html .captions .slidetemplate.html .thumb_spams.png 2.html chocolat_42.jpg spams.png .thumb_stats_200308.gif 3.html igal.css stats_200308.gif
7/ Septième étape : apprendre à utiliser le .captions
Déjà, qu'est-ce que c'est ? C'est un simple fichier texte qui contient la liste des images présentes dans le répertoire :
# moi, j'aime pô les commentaires apt-get.jpg ---- chocolat_42.jpg ---- spams.png ---- stats_200308.gif ----
Grâce à ce fichier, il est possible de mettre une légende pour chaque image :
# ceci n'est pas un commentaire apt-get.jpg ---- apt-get 42 chocolat_42.jpg ---- 42 au chocolat # ceci est un commentaire spams.png ---- 42 spams stats_200308.gif ---- 42 mozilla/5 # être ou ne pas être un commentaire
Après, y'a plus qu'à relancer iGal, avec l'option -c, pour qu'il utilise ces réglages.
Voir la Galerie Démo 2 pour le résultat en direct.
Ce fichier permet aussi de mettre une image "en commentaire" pour qu'elle
n'apparaisse pas dans la galerie, simplement en commentant son nom dans le
fichier .captions. Vous pouvez aussi ordonner votre
galerie grâce à l'ordre dans lequel apparaisse les images dans le fichier
.captions.
Bref, .captions, c'est la solution !!
(j'aurai du être bonimenteur de foire, moi, tiens)
8/ Huitième étape : uploader (èftépéter?) les fichiers générés
Donc, maintenant, comme vu à l'étape 6, on a plein de nouveaux fichiers dans le répertoire :
lois@moufette:~/web/gruiick/zab/42$ ls -a . 4.html index.html .thumb_apt-get.jpg .. apt-get.jpg .indextemplate.html .thumb_chocolat_42.jpg 1.html .captions .slidetemplate.html .thumb_spams.png 2.html chocolat_42.jpg spams.png .thumb_stats_200308.gif 3.html igal.css stats_200308.gif
Y'a plus qu'à utiliser son client ftp préféré (lftp) et à poser
tout ça chez notre hébergeur de fichier préféré du grand Nain Ternet©.
Bon, perso, je n'upload pas le .captions et les fichiers modèles
(.*template.html), mais c'est vous qui voyez :o)
Fais péter les démos, GruiicK !
Ok, poussez pas, ça arrive :
- Galerie Démo 1, générée avec la commande suivante : igal --as -w 4 -u -k -f -r --title "42, démo 1" et basée sur la CSS de ce site.
- Galerie Démo 2, générée avec la commande suivante : igal --as -c -w 4 -u -k -f -r --title "42, démo 2, avec légendes" et basée sur la CSS de l'ALDIL.
- Galerie Démo 3, générée avec la commande suivante : igal --as -w 4 -u -k -f -r --title "42, démo 3" et basée sur la CSS de debian-fr.org (pas adaptée à ça, soit dit en passant ;o)
9/ Bonus
9.1/ Explications sur les options
Quoi ?! Vous voulez des explications sur les options de la ligne de commande quifaitpeur® ?! Bande de lavettes !! :
lois@moufette:~$ man igal -c : crée le fichier .captions (le lis s'il existe déjà) --as : écrit la taille de l'image dans le fichier d'index -w 4 : 4 images par ligne -u : utilise les infos de .captions pour le fichier d'index -k : utilise les infos de .captions pour les titres des slides HTML -f : force la reconstruction des fichiers HTML -r : n'utilise pas le film-effect originel (cacabeurk) --title : titre pour l'index
(avec les manpages-fr, z'avez une version en français du man)
9.2/ Trucs et astuces
- - La ligne de commande ayant servi à générer le slideshow^W diaporama est dans les entêtes du fichier index.html (dans le META Generator)
- - Essayez d'avoir une CSS complète (ie: classe .small, .center, .slide, .large, etc.)
A vous de jouer, maintenant.