Générateur de visualiseurs d'images tous écrans et adaptés aux mobiles pour présenter des photos sur un site internet

Un visualiseur d'images est un fichier HTML qui contient des images.

Un exemple de visualiseur

Il peut être créé par un script PHP que j'appelle générateur de visualiseurs d'images.

Création

Dans le cas où l'on redimensionne les images

avec un logiciel comme Light Image Resizer

ce qui permet de traiter un grand nombre de photos

1^e étape: sur l'ordinateur, préparer le dossier du visualiseur

Le dossier du visualiseur est le dossier de l'ordinateur qui correspond au dossier du serveur internet destiné à la visualisation des images. Il sert de «dossier racine» pour tout ce qui suit.

Télécharger (download) le générateur de visualiseurs, puis le décompresser.

Dans le dossier du visualiseur, enregistrer les deux fichiers generateur-itea.html et generateur-itea.php

2^e étape: sur l'ordinateur, préparer le dossier des photos

Le dossier des photos originelles non redimensionnées n'apparaît pas dans le site internet. Dans le dossier du visualiseur, créer le dossier des photos qui contient de préférence les images redimensionnées, par exemple de taille maximale 1440 × 1080. Dans l'exemple «tessin», il s'agit du sous-dossier «2015/ticino».

3^e étape: sur l'ordinateur, préparer le sous-dossier vignettes

Dans le dossier des photos, créer le sous-dossier vignettes qui contient les mêmes images, mais redimensionnées à 388 × 291 au maximum. Dans l'exemple «tessin», par rapport au dossier du visualiseur, il s'agit du sous-dossier «2015/ticino/vignettes».

4^e étape: monter sur le serveur (upload)

Monter le dossier du visualiseur sur le serveur. Dans l'exemple joint, il s'appelle www.deleze.name/marcel/exemples/itea, avec les sous-dossiers www.deleze.name/marcel/exemples/itea/2015/ticino et www.deleze.name/marcel/exemples/itea/2015/ticino/vignettes.

Dans le dossier dossier du visualiseur, activer la mise en cache des images: pour un serveur Apache, il peut s'agir d'un fichier .htaccess

5^e étape: exécuter le générateur en cliquant sur le bouton "Créer le visualiseur"

Le générateur generateur-itea.html doit être exécuté sur le serveur qui héberge les photos. L'appel du générateur se fait par son URL. Dans notre exemple, il s'agit de www.deleze.name/marcel/exemples/itea/generateur-itea.html. Le générateur se présente sous la forme d'un formulaire HTML (zone grisée ci-dessous). Son exécution est lancée en cliquant sur le bouton Créer le visualiseur.

6^e étape: installer le visualiseur

La page reçue en retour est le visualiseur.

• Télécharger le visualiseur dans le dossier du visualiseur. Proposé sous le nom visualiseur-01.html, il se nomme tessin.html dans notre exemple.
• Le visualiseur peut être édité et modifié à volonté, à condition de respecter la syntaxe HTML5, ce qui permet d'ajouter une introduction et des sous-titres. Un commentaire de chaque photo peut être inséré dans la ligne vide située au-dessous du lien vers l'image; usuellement, un commentaire est encadré par les balises <p> ... </p>.
• Le visualiseur doit être monté sur le serveur dans le même dossier que generateur-itea.php
• Enregistrer le formulaire generateur-itea.html rempli et le monter dans le dossier du visualiseur. Il pourra être réutilisé avec les mêmes données s'il faut supprimer ou ajouter des photos.

7^e étape: diffuser l'adresse du visualiseur

L'adresse du visualiseur, par exemple www.deleze.name/marcel/exemples/itea/tessin.html, peut être distribuée par messagerie.

Création

Si l'on ne redimensionne pas les images

parce que le nombre de photos n'est pas trop grand

1^e étape: sur l'ordinateur, préparer le dossier du visualiseur

Le dossier du visualiseur est le dossier de l'ordinateur qui correspond au dossier du serveur internet destiné à la visualisation des images. Il sert de «dossier racine» pour tout ce qui suit.

Télécharger (download) le générateur de visualiseurs, puis le décompresser.

Dans le dossier du visualiseur, enregistrer les deux fichiers generateur-itea.html et generateur-itea.php

2^e étape: sur l'ordinateur, préparer le dossier des photos

Le dossier des photos contient les images originelles, non redimensionnées. Dans l'exemple «tessin», il s'agit du sous-dossier «2015/ticino».

3^e étape: sur l'ordinateur, préparer le sous-dossier vignettes

Dans le dossier des photos, créer le sous-dossier vignettes et le laisser vide. Dans l'exemple «tessin», par rapport au dossier du visualiseur, il s'agit du sous-dossier «2015/ticino/vignettes».

4^e étape: monter sur le serveur (upload)

Monter le dossier du visualiseur sur le serveur. Dans l'exemple joint, il s'appelle www.deleze.name/marcel/exemples/itea, avec les sous-dossiers www.deleze.name/marcel/exemples/itea/2015/ticino et www.deleze.name/marcel/exemples/itea/2015/ticino/vignettes.

Dans le dossier dossier du visualiseur, activer la mise en cache des images: pour un serveur Apache, il peut s'agir d'un fichier .htaccess

Au sous-dossier vignettes, accorder tous les droits d'accès (sur Apache, c'est 777) afin que le générateur possède les droits nécessaires pour le remplir automatiquement.

5^e étape: exécuter le générateur en cliquant sur le bouton "Créer le visualiseur"

Le générateur generateur-itea.html doit être exécuté sur le serveur qui héberge les photos. L'appel du générateur se fait par son URL. Dans notre exemple, il s'agit de www.deleze.name/marcel/exemples/itea/generateur-itea.html. Le générateur se présente sous la forme d'un formulaire HTML (zone grisée plus haut). Son exécution est lancée en cliquant sur le bouton Créer le visualiseur.

• Si l'exécution se termine par un «Maximum execution time of 10 seconds exceeded», seule un partie du travail a été accompli durant le temps imparti. Il faut relancer la suite du calcul avec le bouton «Créer le visualiseur» jusqu'à ce que soit retourné le visualiseur complet. Des répétitions laborieuses apparaissent lorsque le nombre de photos est grand. Il vaut mieux alors créer les vignettes sur son ordinateur et les envoyer toutes faites au serveur.
• Si, dans le visualiseur, apparaît le message «... les dimensions de l'image redimensionnée xxxxxx.jpg sortent de l'intervalle ...», il faut effacer la vignette mal formée, puis relancer «Créer le visualiseur».

6^e étape: installer le visualiseur

La page reçue en retour est le visualiseur.

• Télécharger le visualiseur dans le dossier du visualiseur. Proposé sous le nom visualiseur-01.html, il se nomme tessin.html dans notre exemple.
• Rapatrier sur l'ordinateur le dossier vignettes qui a été rempli sur le serveur, c'est-à-dire télécharger le dossier vignettes.
• Le visualiseur peut être édité et modifié à volonté, à condition de respecter la syntaxe HTML5, ce qui permet d'ajouter une introduction et des sous-titres. Un commentaire de chaque photo peut être inséré dans la ligne vide située au-dessous du lien vers l'image; usuellement, un commentaire est encadré par les balises <p> ... </p>.
• Le visualiseur doit être monté sur le serveur dans le même dossier que generateur-itea.php
• Enregistrer le formulaire generateur-itea.html rempli et le monter dans le dossier du visualiseur. Il pourra être réutilisé avec les mêmes données s'il faut supprimer ou ajouter des photos.
• Les droits d'accès au sous-dossier vignettes doivent maintenant être rétablis à un niveau normal de sécurité (par exemple 775).

7^e étape: diffuser l'adresse du visualiseur

L'adresse du visualiseur, par exemple www.deleze.name/marcel/exemples/itea/tessin.html, peut être distribuée par messagerie.

Modification

Ajout ou retrait d'image(s)

pour gérer et mettre à jour le visualiseur

1^e étape

Sur le serveur, accorder les droits d'accès au sous-dossier vignettes.

2^e étape: modifier les dossiers des photos

• Pour supprimer une ou plusieurs photos
  • dans l'ordinateur, les supprimer dans le dossier des photos et dans le dossier vignettes;
  • sur le serveur, les supprimer dans le dossier des photos et dans le dossier vignettes.
• Pour ajouter une ou plusieurs photos
  • dans l'ordinateur, les ajouter dans le dossier photos, au côté des autres; il n'est pas nécessaire de les ajouter dans le dossier vignettes;
  • monter les nouvelles photos dans le dossier des photos du serveur.
• Pour modifier l'ordre des images
  Les photos sont ordonnées selon l'ordre lexicographique, c'est-à-dire selon une sorte d'ordre alphabétique dont l'alphabet a été augmenté avec les chiffres et d'autres symboles ASCII. Pour changer l'ordre des photos, il suffit de les renommer. Une méthode radicale consiste à les numéroter 01-, 02-, 03-, ... et à placer les numéros au début du nom de fichier:
  • dans l'ordinateur, renommer des photos du dossier des photos et chaque vignette correspondante avec le même nom.
  • sur le serveur, renommer des photos du dossier des photos et chaque vignette correspondante avec le même nom.

3^e étape

Réexécuter le formulaire generateur-itea.html

Si on a enregistré de formulaire rempli et qu'il a été monté sur le site dans le dossier du visualiseur, l'opération se fait en un clic. À défaut, on devra le remplir avec les mêmes données que lors de la création.

La page reçue en retour est le nouvel état du visualiseur.

• Dans l'ordinateur, télécharger le nouveau visualiseur dans le dossier du visualiseur sous le même nom que le précédent.
• Rapatrier sur l'ordinateur le dossier vignettes du serveur; il a été modifié et doit remplacer l'ancien état.
• Le visualiseur peut être édité et modifié à volonté, à condition de respecter la syntaxe HTML5, ce qui permet d'ajouter une introduction et des sous-titres. Un commentaire de chaque photo peut être inséré dans la ligne vide située au-dessous du lien vers l'image; usuellement, un commentaire est encadré par les balises <p> ... </p>.
• Le visualiseur doit être monté sur le serveur en remplacement du précédent. (Les photos et les vignettes sont déjà en place.)

4^e étape

Sur le serveur, rétablir les droits d'accès de sécurité du sous-dossier vignettes.

Liens vers les versions

Le critère déterminant est la vitesse à laquelle le visualiseur affiche les photos.

• ITEA: version avec dossier de vignettes (c'est la présente page)
• ITEC: version simple sans dossier de vignettes pour un petit nombre de photos.

Date de la dernière version: consulter le lien "Scripts PHP" en bas de page.