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

Formulaire et mode d'emploi

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.

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

1e é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

2e é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 les images redimensionnées, de taille maximale 1440 × 1080. Dans l'exemple «tessin», il s'agit du sous-dossier «2015/ticino».

3e é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».

4e é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

5e é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.

Dossier des photos

Chemin relatif: entre le script generateur-itea.php et le dossier des photos. Dans l'exemple, il s'agit de 2015/ticino

Titre: texte décrivant le contenu du dossier et qui deviendra le titre du visualiseur.

Sous-titre: (informations complémentaires).

Lien de retour

Le lien de retour est placé au bas du visualiseur d'images. Il pointe généralement vers la page mère et est utile à la navigation.

Lien: chemin relatif entre le script generateur-itea.php et le fichier visé par le lien (typiquement "../index.html").

Libellé: texte du lien de retour, (typiquement "Mes albums de photos").

Envoyer les données

6e é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
  • Les deux fichiers generateur-itea.html et generateur-itea.php peuvent maintenant être supprimés, sauf si l'on prévoit installer un autre visualiseur dans le même dossier.

7e é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.

Si l'on ne redimensionne pas les images

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

1e é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

2e é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».

3e é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».

4e é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.

5e é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».

6e é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
  • Les deux fichiers generateur-itea.html et generateur-itea.php peuvent maintenant être supprimés, sauf si l'on prévoit installer un autre visualiseur dans le même dossier.
  • Les droits d'accès au sous-dossier vignettes doivent maintenant être rétablis à un niveau normal de sécurité (par exemple 775).

7e é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.

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

Contact  |  Accueil   >   Scripts PHP