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

Mode d'emploi

Cette version est obsolète et remplacée par Générateur de visualiseurs d'images.

Un exemple de visualiseur: Mes vacances au Tessin

Préparation: téléchager les générateurs

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

Garder à portée de main les deux fichiers generateur-ite.html et generateur-ite.php.

Étape 1: préparer le dossier du visualiseur

  • Les deux fichiers generateur-ite.html et generateur-ite.php doivent être copiés dans le dossier où l'on veut placer le visualiseur d'images. Dans l'exemple, le «dossier du visualiseur» est exemples/ite.
  • Il est conseillé (mais pas obligatoire) de redimensionner les photos originelles afin de ne pas dépasser 1440×1080, respectivement 1920×1080 pixels, par exemple au moyen de «Light Image Resizer 4».
  • Ces photos sont placées dans un sous-dossier du dossier du visualiseur appelé «dossier des photos à montrer». Dans l'exemple, il s'agit du dossier exemples/ite/2015/ticino.
  • Le «dossier des photos à montrer» doit contenir le «sous-dossier des grandes vignettes» nommé 360x360 contenant les images redimensionnées, de largeur maximale 360px et de hauteur maximale 360px. Dans l'exemple, il s'agit du dossier exemples/ite/2015/ticino/360x360.
  • Il est vivement recommandé de compresser ces «grandes vignettes», par exemple au moyen de compressjpeg.
  • Les «grandes vignettes» doivent impérativement porter exactement le même nom de fichier que les «photos à montrer». Pour ôter le suffixe «-min», on peut utiliser un logiciel gratuit, par exemple «Métamorphose file renamer».

Étape 2: monter sur le serveur

Le «dossier du visualiseur», avec tout son contenu, doit être monté sur le serveur. En particulier

  • les deux fichiers generateur-ite.html et generateur-ite.php qui deviennent ainsi, dans notre exemple, www.monsite.ch/exemples/ite/generateur-ite.html et www.monsite.ch/exemples/ite/generateur-ite.php;
  • le sous-dossier des «photos à montrer» et son sous-dossier des «grandes vignettes» 360x360 qui deviennent ainsi, dans notre exemple, www.monsite.ch/exemples/ite/2015/ticino et www.monsite.ch/ exemples/ite/2015/ticino/360x360.
  • Activer la mise en cache des images : pour un serveur Apache, il peut s'agir d'un fichier .htaccess.

Étape 3: créer le visualiseur d'images

C'est le serveur qui, par l'exécution du script PHP generateur-ite.php, va créer le visualiseur. L'appel du générateur se fait par l'URL de generateur-ite.html, par exemple www.monsite.ch/exemples/ite/generateur-ite.html. Le générateur se présente sous la forme d'un formulaire HTML (zone grisée). Son exécution est lancée en cliquant sur le bouton Créer le visualiseur.

La page reçue en retour, appelée visualiseur, est adaptée à tous les écrans (ordinateur, tablette et portable).

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 ticino.html, qui devient ainsi exemples/ite/ticino.html. Si on utilise un autre navigateur, il faut vérifier que les liens relatifs soient bien selon l'exemple 2015/ticino/xxxxxx.JPG pour les photos à montrer et 2015/ticino/360x360/xxxxxx.JPG pour les grandes vignettes.

Facultativement: introduction, sous-titres et commentaire de chaque photo :

Le visualiseur (nommé ticino.html dans l'exemple) peut être édité et modifié à volonté, à condition de respecter la syntaxe HTML5, ce qui permet d'ajouter une introduction, des sous-titres et un commentaire de chaque photo.

Le commentaire d'une photo peut être inséré dans la ligne vide située au-dessous du lien vers l'image. Usuellement, un commentaire débute par la balise <br>

Monter le visualiseur d'images sur le serveur. Son adresse, par exemple www.monsite.ch/exemples/ite/ticino.html, peut être distribuée par messagerie.

Les deux fichiers generateur-ite.html et generateur-ite.php peuvent maintenant être supprimés, ou laissés en place pour une utilisation sur d'autres photos, par exemple sur le dossier exemples/ite/2016/schaffhausen.

Date de la dernière version : consulter le lien PHP ci-dessous.

Contact  |  Accueil > PHP