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

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

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.

  • Le visualiseur doit être enregistré dans le dossier du visualiseur sans passer par le navigateur. Voici comment procéder:
    • Afficher le code source de la page.
    • Sélectionner tout le code source et le copier dans un éditeur de programmes (par exemple Notepad++).
    • Avec l'éditeur de programmes, enregistrer le code source dans le dossier du visualiseur. Dans notre exemple, il se nomme «tessin.html».
  • 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

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

Comme plus haut.

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)

Comme plus haut, avec en plus: au sous-dossier vignettes, accorder tous les droits d'accès (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

Comme plus haut, avec les remarques suivantes:

  • 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 le visualiseur soit retourné.
  • 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

Comme plus haut, avec en plus: les droits d'accès au sous-dossier vignettes peuvent maintenant être rétablis à un niveau normal de sécurité (par exemple 771).

7e étape: diffuser l'adresse du visualiseur

Comme plus haut.

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

Contact  |  Accueil   >   Scripts PHP