1. Générer une petite galerie d'image (HTML)
1.1. Description
J'ai quelques photos que je souhaite partager facilement sur ma page Internet. J'aimerais générer une petite page HTML qui affiche des petites vignettes. Un clic sur une de ces vignette devra afficher la photo originale...
1.2. Objectif
La fonction devra prendre une liste de fichiers images en arguments et
-
générer des vignettes de taille 128 pixels par 128 pixels
-
générer une page HTML pour afficher ces vignettes
-
chacune de ces vignettes sera un lien vers l'image originale
Voici un exemple d'exécution :
$ source ./galerie.sh
$ galerie *.???
inclusion de l'image Gerbil1.jpg
inclusion de l'image Gerbil2.png
inclusion de l'image Jaculus_orientalis.jpg
inclusion de l'image Jerboa.png
inclusion de l'image Meriones_unguiculatus.jpg
inclusion de l'image Springharelg.jpg
et vous pouvez voir le résultat ici. (Pour voir le contenu du fichier, vous pouvez faire afficher le code source de la page...)
1.3. Précisions
Vous pouvez utiliser les photos de cette archive (prises sur Wikipedia) pour tester votre fonction.
Il va falloir faire des boucles sur les arguments d'une fonction.
-
Pour générer une vignette, on peut utiliser la commande
$ convert FICHIER -resize 128x128 VIGNETTE
(Si cette commande n'existe pas, il faut installer le paquet imagemagick.)
-
Pour ajouter des lignes dans un fichier, vous pourrez utiliser la commande
echo
avec une redirection>>
. -
Le schéma minimale pour une page web valide est
<!DOCTYPE html> <html> <head> <title>TITRE</title> </head> <body> CODE HTML </body> </html>
où TITRE est le titre de la page et CODE HTML est le contenu HTML de la page.
-
Le contenu de la page doit ressembler à
<ul> <li><a href="IMAGE1"><img src="VIGNETTE1"></a></li> <li><a href="IMAGE2"><img src="VIGNETTE2"></a></li> <li><a href="IMAGE3"><img src="VIGNETTE3"></a></li> <li><a href="IMAGE4"><img src="VIGNETTE4"></a></li> </ul>
1.4. Pour aller plus loin
-
Générer un tableau à deux dimensions plutôt qu'une liste.
-
Ajouter un peu de style (css ou autre) pour rendre la page plus jolie.
-
Laisser le choix de la taille des vignettes à l'utilisateur.
-
etc.