> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Systèmes d'exploitation

> Linux

> Reprenez le contrôle à l'aide de Linux !

> Automatisez vos tâches avec des scripts Bash

> TP : générateur de galerie d'images

> Lecture du tutoriel

TP : générateur de galerie d'images

Par

Mathieu Nebra (M@teo21)

Mise à jour : 20/11/2011

Difficulté : Intermédiaire

56 176 visites depuis 7 jours, dont 459 sur ce chapitre classé 7/786

L'intérêtdu bash ne commence à se faire sentir que lorsque l'on code de vrais scripts, alors… il est grand temps de pratiquer !

Dans ce TP, vous allez devoir réutiliser un peu tout ce que vous avez appris jusqu'ici sur bash et sur Linux en général. N'oubliez pas que dans les scripts bash vous pouvez réutiliser toutes les commandes de la console que vous connaissez : ls, grep, cut, sort, les flux… allez-y, tous les coups sont permis. Vous risquez même d'avoir à lire le manuel pour trouver quelques paramètres !

Votre objectif est de créer une page web présentant une galerie d'images en fonction des fichiers présents dans un dossier. Plus facile à dire qu'à faire, car vous allez voir qu'il y a là un vrai défi. Bonne chance à tous.

Retour en haut

Sommaire du chapitre :

Objectifs
Solution
Améliorations

Retour en haut

Objectifs

Nous souhaitons réaliser dans ce TP un générateur de galerie d'images en bash.

Le script s'appellera galerie.sh. Pour sa première version, il faudra le placer dans un dossier contenant des images ; il générera des miniatures à partir de ces dernières et un fichier HTML présentant toutes les images du dossier.

Concrètement, le script devra donc :

créer une miniature de chaque image du dossier ;
générer un fichier HTML et y insérer ces miniatures ;
faire un lien vers les images en taille originale.

Pour réaliser ce script, il est recommandé de connaître un petit peu le HTML. Vous avez un cours à votre disposition sur le Site du Zéro. C'est assez facile : ceux qui ne connaissent pas ne devraient pas y consacrer beaucoup de temps, d'autant plus qu'il suffit de lire la première partie seulement de ce cours pour faire ce TP.

Le rendu final

La page web que vous devez arriver à générer devrait ressembler à la figure suivante.

Bien entendu, c'est un exemple minimal. Il est possible de faire quelque chose de beaucoup plus joli : commencez déjà par faire en sorte que cela fonctionne, vous enjoliverez après. ;)

Le code HTML de base

Pour vous aider (enfin surtout pour ceux d'entre vous qui ne sont pas très à l'aise en HTML

), je vous propose de partir du code (minimaliste) suivant :

Code : Console

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Ma galerie</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <style type="text/css">
       a img { border:0; }
       </style>
   </head>
   <body>
      <p>

<a href="alsamixer.png"><img src="miniatures/alsamixer.png" alt="" /></a> 
<a href="icone_installer.png">  <img src="miniatures/icone_installer.png" alt="" />
</a> 
<a href="installation.png"><img src="miniatures/installation.png" alt="" /></a>
      </p>
   </body>
</html>

Vous pourrez réutiliser le début et la fin de ce code source pour chaque fichier HTML de galerie que vous créerez. Par contre, au milieu (les images <img /> et les liens <a>), il faudra adapter automatiquement le code en fonction des images présentes dans le dossier.

Vous afficherez des miniatures sur la page et ferez un lien vers leur version agrandie.

Comment générer des miniatures d'images ?

Bonne question. On n'a pas appris à faire cela en ligne de commande, tout simplement parce que ce n'est pas ce que j'appelle une commande « de base » de Linux. Néanmoins, vous devriez avoir le programme convert, capable d'effectuer de nombreuses opérations sur des images. À vous d'afficher le manuel et de comprendre comment on l'utilise. :)

Bon : je vous aide quand même un peu parce que cette commande a énormément de paramètres. « Miniature » en anglais se dit « thumbnail ».
Vous apprécierez probablement l'aide en ligne, plus étoffée et plus lisible peut-être que le man.

Les paramètres

Notre programme devra accepter un paramètre optionnel : le nom du fichier HTML à générer. S'il n'est pas présent, on générera un fichier galerie.html par défaut.

Retour en haut

Solution

L'heure est venue de passer à la correction !

Code : Console

#!/bin/bash

# Vérification des paramètres
# S'ils sont absents, on met une valeur par défaut

if [ -z $1 ]
then
        sortie='galerie.html'
else
        sortie=$1
fi

# Préparation des fichiers et dossiers

echo '' > $sortie

if [ ! -e miniatures ]
then
        mkdir miniatures
fi

# En-tête HTML

echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Ma galerie</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <style type="text/css">
       a img { border:0; }
       </style>
   </head>
   <body><p>' >> $sortie

# Génération des miniatures et de la page

for image in `ls *.png *.jpg *.jpeg *.gif 2>/dev/null`
do
        convert $image -thumbnail '200x200>' miniatures/$image
        echo '<a href="'$image'"><img src="miniatures/'$image'" alt="" /> </a> '>> $sortie
done

# Pied de page HTML

echo '</p>
   </body>
</html>' >> $sortie

Quelques commentaires sur le script :

Il vérifie d'abord si un paramètre est présent. Si oui, il l'utilise comme nom de fichier de sortie, sinon il utilise galerie.html.
On doit créer un fichier vide pour galerie.html. Normalement, on peut faire ça avec touch, mais si le fichier existe déjà, on veut le vider. On choisit donc de faire un echo vide dans ce fichier pour le vider.
On crée le dossier qui accueillera les images miniatures s'il n'existe pas.
On écrit l'en-tête HTML dans le fichier.
On fait une boucle sur tous les fichiers de type image (*.png, *.jpg, etc.) qui existent dans le dossier. Pour chacun d'eux, on crée une miniature d'une taille maximale de 200 x 200 pixels dans le sous-dossier miniatures. Le petit symbole « > » permet, comme indiqué dans la documentation du programme, de ne pas générer de miniature inutilement si l'image est de base plus petite que la taille des miniatures.
On écrit dans la page web la balise qui affichera l'image et on fait un lien vers la version agrandie.
Enfin, on termine la page HTML en fermant les balises.

Je tiens à rappeler qu'il n'y a pas une seule façon de réaliser ce script mais plusieurs. Je vous ai présenté la mienne et, bien qu'elle fonctionne, je vous préviens que l'on peut largement l'améliorer. Je vous propose d'ailleurs des pistes pour améliorer ce script.

Retour en haut

Améliorations

Comme je le disais plus tôt, le script que je vous ai proposé de faire est minimal. Le but était d'avoir à réaliser un script accessible à tous et qui produise un résultat intéressant.

Si vous voulez l'améliorer, les pistes ne manquent pas. En voici quelques-unes.

Améliorer le design de la galerie avec un peu de CSS.
Permettre de choisir le dossier contenant les images dont on veut générer une galerie. Actuellement, il faut que galerie.sh soit dans le bon dossier pour que cela fonctionne !
Utiliser un paramètre pour définir la taille des miniatures à générer.
Afficher le nom de l'image sous chaque image.
Afficher d'autres informations, comme les dimensions de l'image originale, sous chaque miniature. Il faudra faire appel à l'outil convert pour obtenir ces informations.
Afficher la date de dernière modification sous chaque image.

Pour certaines de ces améliorations, il faudra vous renseigner dans le manuel voire poser des questions sur les forums.
Ne vous arrêtez pas en si bon chemin ! Cherchez, cherchez et cherchez encore ! Vous allez vous habituer à faire des recherches et vous deviendrez ainsi beaucoup plus autonomes.

Retour en haut

Retour en haut

24 commentaires pour "TP : générateur de galerie d'images"

Note moyenne : 3.80 / 4 (1031 votes)

Pseudo	Commentaire
Eagleseb	# Posté le 18/04/2011 à 10:51:22
	Après avoir finit ce tutoriel j'ai cherché à amélioré mon script et le plus gros bug que j'ai remarqué c'est que ça ne marche pas pour les fichiers avec espace. J'ai donc rajouté ceci : IFS=$'\n' Du coup la conversion des images marche mais pas cette ligne : echo '<a href="'$image'"><img src="miniatures/'$image'" alt="" /></a> ' >> $sortie
Eagleseb	# Posté le 18/04/2011 à 10:56:02
	Ca y est ça marche !! Dsl, j'avais juste mis des quote (') différents.
Megashad	# Posté le 27/06/2011 à 18:31:20
Avis : Très bon Blog Twitter close Ville : Arlon Pays : Belgique	Quelle satisfaction d'avoir réussi ce "petit" script ! J'ai eu des petits soucis avec mon dossier où se trouve les versions miniatures de mes images. J'ai du ajouter une ligne chmod miniatures/ pour que "convert" puisse rétrécir et placer les images dans ce dossier... Je vais maintenant peaufiner un peu le script. Un grand chapeau bas pour l'ensemble du tutorial sur Linux et Bash, de l'excellent boulot ! Vous m’avez reproché de penser que j’avais toujours raison. Et je me suis rendu compte que vous aviez raison. Enfin je pense. Mais va savoir si j’ai raison ! Initiation à FreeBSD
TuNi54	# Posté le 28/09/2011 à 15:25:15
Études : SUPINFO Lorraine à Metz	salut, j'ai un problème à la ligne 39 au convert. quelqu'un à une idée ?
rhhtahina	# Posté le 24/04/2012 à 08:35:21
Avis : Très bon	C'est un très bon cours.