Tétraèdre

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.

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

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

Dans le dossier où l'on souhaite placer le visualiseur, mettre 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 des images redimensionnées, de taille maximale 1440 × 1080. Pour ce faire, on pourra utiliser un logiciel tel que Light Image Resizer 4.

3e étape: monter sur le serveur (upload)

Monter sur le serveur le dossier du visualiseur. Dans l'exemple joint, il s'appelle www.deleze.name/marcel/exemples/itea

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

Monter sur le serveur le dossier des photos. Dans l'exemple joint, il s'appelle www.deleze.name/marcel/exemples/itea/2015/ticino

Dans le dossier des photos, créer le sous-dossier vignettes et, temporairement, lui accorder tous les droits d'accès (777). Ce dossier sera automatiquement rempli par le générateur.

4e é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. Utiliser de préférence le navigateur FireFox. 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.

Avant de remplir et d'envoyer le questionnaire ci-dessous, il faut d'abord le placer dans votre site internet, plus précisément dans le dossier destiné à héberger le visualiseur (voir ci-dessus).

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

Le programme crée automatiquement les vignettes qui manquent. Cependant, s'il en manque beaucoup, il vaut mieux les créer soi-même et les placer dans le sous-dossier «vignettes». Pour ce faire, on peut utiliser un logiciel tel que Light Image Resizer avec les réglages largeur 388 px et hauteur 291 px.

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».

5e étape: installer le visualiseur

La page reçue en retour est le visualiseur. Avec le navigateur FireFox, elle doit être enregistrée (son type est "Page web, HTML uniquement") dans le même dossier que generateur-ite.php avec l'extension .html, sous un nom à choisir, par exemple tessin.html, qui devient ainsi www.deleze.name/marcel/exemples/itea/tessin.html. Si on utilise un autre navigateur, il faut vérifier que les liens soient corrects, à savoir, selon l'exemple, de la forme 2015/ticino/xxxxxx.JPG pour les photos à montrer et 2015/ticino/vignettes/xxxxxx.JPG pour les 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>.
    • Supprimer les liens non désirés qui auraient été ajoutés par le navigateur.
  • Le visualiseur doit être monté sur le serveur dans le même dossier que generateur-itea.php
  • Les droits d'accès au sous-dossier vignettes peuvent maintenant être rétablis à un niveau normal de sécurité (par exemple 775).
  • 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.

6e é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" ci-dessous.

Contact  |  Accueil   >   Scripts PHP