31 janvier 2020

Album photo

Conception d'un album photo web utilisant un simple script bash pour produire les pages html.

Présentation

Le site est composé de pages qui affichent chacune un album photo. Chaque photo comporte un commentaire. En survolant la photo avec la souris on fait apparaitre une bulle qui indique la date de prise de la photo (donnée exif). En cliquant sur une photo on obtient une vue agrandie. Comme il est d'usage sur le web, un clic droit permet de la télécharger.

Un bandeau donne une présentation du site.

Dessous un menu type fil d'ariane permet de naviguer entre les pages.

Le site est statique. Il est écrit en HTML et en CSS. Il ne nécessite pas javascript.

Le code HTML de chaque page est produit grâce à un script bash, qui gère la navigation entre les pages.

Pout l'instant la mise en ligne n'est pas prévue. Le programme ftp me suffit.

Structure du site et navigation

Chaque page du site est numérotée de 1 à N, nombre de pages. Elle possède son fichier html 1.html, 2.html. Le fichier index.html est une copie du dernier (3 dans l'exemple ci-dessous)

Chaque page a son propre répertoire dans le dossier img : img/1, img/2, etc.

Ce répertoire contient deux fichiers texte :

  1. Un fichier title.htm qui est le titre de la page. Il peut comporter des balises html.
  2. Un fichier comment.txt (facultatif) utilisé par un utilitaire comment qui permet d'ajouter des commentaires au images qui n'ont pas cette métadonnée.

Le fichier CSS

Il peut être modifié à volonté, et même réécrit entièrement. Dans ce cas il faudra adapter le script bash. Celui qui est proposé ici est minimaliste.

body {
   max-width: 604px;
   min-height: 640px;
   height: 100%;
   margin: 0 auto;
   background-color: #555;
}
 
h1, h2, h3 {margin: 0; color: Ivory; line-height: 1em;}
 
/* p { margin: 0; padding: 0 2;} */
 
#header {
   width: 100%;
   height: 80px;
   margin: 0;
   padding: 0;
   color: Ivory;
}
 
#header a {color: Ivory;}
 
.box {
   float: left;
   width: 192px; height: 196px;
   margin: 4px 0 0 4px;
   background-color: #707070;
   color: white;
}
 
img {
   display: block;
   height: 154px; 
   max-width: 180px;
   margin-top: 6px;
   margin-left: auto;
   margin-right: auto;
}
 
.box p {
   padding: 0;
   margin: 4px 0 0 0;
   text-align: center;
   font-size: 9pt;
}
 
.nav {
   clear: both;
   text-align: center;
   padding: 0;
}
 
.nav ul {
   list-style-type: none;
}
 
.nav li {
   display: inline;
   padding: 4px;
}
 
.nav li a {
   font-size: 1.2em;
   text-decoration: none;
   color: white;
   padding: 0 4px 0 4px;
   border: solid 1px;
}
 
.active {
   font-weight: bold;
   background-color: #444;
}
 
.nav li a:visited {
   color: #eee;
}
 
.nav li a:hover {
   background-color: lightgrey;
   color: black;
}

Squelette du code html d'une page

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="description" content="Album photo">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="site" content="Album photo bash html css">
   <meta name="author" content="Mourad Arnout">
   <link rel="stylesheet" type="text/css" href="style.css">
   <link rel="icon" type="image/png" href="favicon.png">
   <title>Album photo</title>
</head>
<body>
   <div id="header">
      <h1>Album photo</h1>
      <h3>Portugal</h3>
   </div>
   <ul class="nav">
     <li><a href="index.html">&beth;</a></li>
     <li><a href="2.html">2</a></li>
     <li><a class="active" href="1.html">1</a></li>
   </ul>
<div class="box" title="2008:08:07">
  <a href="img*1/1.jpg"><img src="img*1/1.jpg" alt="image1"></a>
  <p>Coucher de soleil</p>
 26     </div>
 ..   ...
</body>
</html>

Commentaires

- En gras les parties que le script devra adapter à chaque page et à chaque photo. En fait toute la partie navigation (lignes 19 à 21 seront adaptées).

- La classe active (ligne 21) correspond à la page active du site. Ici c'est la page 1.

- La classe box est le conteneur de la photo et de son titre ou commentaire.

- L'attribut title de la classe box fera que lors du survol de la souris, une bulle indiquera la date de prise de la photo.

- La ligne 25 contient le titre (ou commentaire) qui apparaîtra dessous la photo.

Le script bash «album»

Le script bash est fourni en téléchargement ici album.

Usage : album n [Titre de la page n], où n est le numéro de la page : 1, 2, ...

Le tire de la page est facultatif. S'il est fourni, il remplace l'existant. S'il n'est pas fourni mais que le fichier title.htm existe, il est lu à partir de celui-ci. Sinon il est initialisé à une chaine vide et est écrit sur le disque.

Il commence par compter le nombre de répertoires du dossier img. C'est la variable count.

Il controle les arguments qui lui sont fournis et l'existence du répértoire dédié à la page, par exemple img/1. Il ne faut pas qu'il y ait des trous dans cette numérotation. La partie après # title & title.htm lit le fichier title.htm, s'il existe, ou l'initialise comme expliqué ci-dessus.

À partir de la ligne # write $page.html l'écriture du fichier n.html commence.

La variable page est le numéro de la page à écrire : 1, 2, ...

Les lignes comprises entre cat > $dest << Header jusqu'à Header copient la partie communes à toutes les pages. C'est la partie invariable. La sytaxe du cat utilise les redirections << et >.

Vient ensuite la partie navigation, propre à chaque page. Ceci pour l'ancre qui sert de bouton est distinguée pour la page active. Cette partie commence à # navigation.

Les boites des photos sont formées à partir la ligne # images. La commande getexif d est un programme que j'ai écrit en C++, parce que les commandes fournies par exiv2 ou Image magick ne me convenaient. Cf. article précédent.

Puis on ferme les balises body et html.

Enfin, dans le cas où la page à écrire est la dernière (de plus grand numéro), on la copie en index.html que les navigateurs lisent par défaut. Par exemple l'url http://arad.free.fr/album pointera en fait sur ce fichier.

Script bash «comment»

C'est un utilitaire qui permet d'ajouter la métadonnée comment de JPEG. Par facilité, ou par flemme, je n'ai pas utilisé la métadonnée exif équivalente.

Ce script est donné en téléchargement sans plus d'explications. Il est moyennement documenté comment.

Script renimg

Renommer des images en les numérotant dans l'ordre croissant des dates de prise de la photo.

Exemple:

reinimg 10 123

va renommer les images dans le dossier img/10 ainsi

124.jpg, 125.jpg, 126.jpg ...

Le sript est fourni ici renimg




Réalisé avec Qlam - LGPL