Générateur de visualiseurs d'images tous écrans et adaptés aux mobiles pour présenter des photos sur un site internetVersion ITEA: méthode avec dossier de vignettes capable de traiter un grand lot de photosJe préfère une méthode plus simple |
Un visualiseur d'images est un fichier HTML qui contient des images. 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 imagesavec 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 visualiseurLe 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 photosLe 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». 3e étape: sur l'ordinateur, préparer le sous-dossier vignettesDans 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. 6e étape: installer le visualiseurLa page reçue en retour est le visualiseur.
7e étape: diffuser l'adresse du visualiseurL'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 imagesparce que le nombre de photos n'est pas trop grand 1e étape: sur l'ordinateur, préparer le dossier du visualiseurLe 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 photosLe 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 vignettesDans 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.
6e étape: installer le visualiseurLa page reçue en retour est le visualiseur.
7e étape: diffuser l'adresse du visualiseurL'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 1e étapeSur le serveur, accorder les droits d'accès au sous-dossier vignettes. 2e étape: modifier les dossiers des photos
3e étapeRé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.
4e étapeSur le serveur, rétablir les droits d'accès de sécurité du sous-dossier vignettes. Liens vers les versionsLe critère déterminant est la vitesse à laquelle le visualiseur affiche les photos.
Date de la dernière version: consulter le lien "Scripts PHP" en bas de page. |
Contact | Accueil > Scripts PHP |