Cette extension (plugin) pour WordPress permet de voir en relief-3D les images fixes (couples stéréoscopiques) d’une galerie en choisissant un des modes de vision possible : côte-à-côte pour vision libre ou avec un stéréoscope ou un binocle, en anaglyphe (lunettes rouge-cyan), en compressé pour un téléviseur 3D ou un projecteur 3 D, en entrelacé pour écran auto stéréoscopique, …
La galerie (« Gallery »), peut être créée par un éditeur élaboré NextGen (plugin de WordPress) qui permet de fixer l’ordre de présentation et de donner un titre et une description à chaque image.
Une galerie peut aussi être créée sans passer par NextGen, en préparant un dossier d’images transféré (ftp).
Dans une page ou un article du site un simple appel au plugin permet d’insérer une planche (tableau) de vignettes (thumbnail sheet), chaque vignette appelant la visionneuse 3D (Lightbox)
Source :
La visionneuse 3D (Lightbox) est basée sur le code JavaScript produit par Masuji Suto pour Stereo Photo Maker (SPM). Ce même code est utilisé pour la visionneuse 3D du site du Stéréo-Club Français : image-en-relieg.org
VERSION : Ce plugin est testé dans peu de cas et n’est pas publié sur wordpress.org
Galeries exemples : https://www.flagarde.fr/wp_fl/category/image-en-relief-3d/galeries-stereo/
I. Mode emploi
Il faut d’abord installer (une fois) le plugin (procédure assez simple)
Puis, pour chaque galerie, la créer, et ensuite insérer l’appel à cette galerie dans une page ou un article (post)
Installation du plugin :
- a) Télécharger le fichier compressé, le décompresser et copier le dossier « stereoscope » dans l’arborescence WordPress sous : wp-content/plugin
- b) Dans l’interface d’administration :
– Ajouter 2 styles CSS qui serviront à chaque vignette et à la planche des vignettes, ajout dans le thème utilisé (voir annexe CSS).
– Activer le plugin « stereoscope ».
Création d’une « Gallery » avec une série d’images stéréo.
Les images à présenter sont des couples stéréos en .jpg,
Il est recommandé une taille de 1080px de haut maximum pour le délai de chargement (cf. conversion multiple de SPM). Mais le système semble admettre des tailles supérieures. De plus le moteur d’affichage stéréo permet l’agrandissement (zoom par molette) et le décalage pour profondeur (flèches gauche et droite).
Titre et description de chaque image :
Le titre apparait en haut de chaque vignette de la planche,
Titre et description apparaissent dans la visionneuse en positionnant le curseur vers le 1/3 inférieur de l’image
Ces métadonnées sont créées différemment selon qu’on utilise ou non NextGen
AVEC NextGen, on crée une Gallery 2D (images= couples) et c’est le plugin qui l’utilise :
Dans l’interface d’administration : créer une nouvelle Gallery, et bien repérer le nom du dossier qui correspond au titre de la Gallery (nom sans majuscule ni signes divers)
Téléchargez les images (par glisser-déposer depuis son ordinateur).
Renseigner le titre et la description des images.
Fixer l’ordre des images
NextGen permet de déclarer un titre et une description par image ;
par défaut NextGen utilise le nom du fichier comme titre ;
NextGen ne récupère pas le titre (headline) des IPTC, ni la description (Caption-Abstract)
J’ai utilisé NextGEN « Plus » 100€ (au moins la première année ; le renouvellement annuel couvre la maintenance corrective et évolutive, le support technique)
SANS NextGen :
Préparer un dossier comprenant les images avec un nom de dossier voulu pour WordPress
Les noms des fichiers images fixeront l’ordre de présentation.
Mettre un titre et une description dans les métadonnées IPTC de chaque image (facultatif).
On peut utiliser un éditeur de fichier images, exemples :
– Sous Ifranview : Image > Information > IPTC info (bouton en bas à gauche) >
Renseigner ‘Document title’ et ‘Caption’ (description) puis Write et OK
Il y a un bouton ‘Image information’ (I sur fond bleu) et des flèches pour photo suivante /précédente
– Sous Photoshop : Fichier > information > IPTC > Contenu IPTC > Titre (zone de saisie) et Description.
– Pas dans l’explorateur de fichiers Windows : la zone « Titre « proposée ne correspond pas.
– Pas par SPM, et Attention : SPM ne transporte pas les IPTC ; il ne transporte que les EXIF du fichier source au fichier sauvegardé après traitements
Par défaut, le titre est vide (contrairement à NextGen)
Transférer le dossier sur le site sous WordPress sous wp-content/gallery (par FTP)
Insertion de la « Gallery » dans une page du site ou d’un article (post) :
Dans l’édition de la page/article où on présente la série d’images stéréo :
Créer une section à une colonne,
Insérer l’appel à la visionneuse :
– sous Elementor on utilise un bloc paragraphe (Text Editor) contenant le texte d’appel
– sans Elementor on utilise un bloc « [/] Short code » de la série des Widgets
Si on utilise la fonction d’insertion d’une Gallery NextGen, on obtient, dans le texte brut, une déclaration de la forme : ; que l’on remplace par
– Annexe CSS pour l’installation
Objectif : ajouter 2 styles pour l’affichage de chaque vignette (img.stfl_th2d3d) et de la planche des vignettes (div.stfl_thbox)
Utilisation de la fonction de déclaration d’un « Additionnal CSS » dans la personnalisation de l’apparence d’un thème.
– Sous Elementor et le thème Astra, page d’administration :
Aller dans interface d’administration, Appareance > Customize > Additional CSS
Ajouter les lignes ci-dessous en fin (cf. colonne de gauche) et publier :
img.stfl_th2d3d {
border-radius: 8px;
box-shadow: 8px 8px 8px #aaa;
}
div.stfl_thbox {
float: left;
width: 210px;
height: 200px;
padding: 2px;
margin: 5px;
border: 1px solid #4FF;
}
– sans Elementor et thème « Twenty-Four » au lieu de ASTRA : chercher
Appareance > Customize (=> Design) > Style > Edit style (icone crayon) > More (3 points en vertical à droite) >’Additional CSS’
Ajouter les lignes de CSS (cf. ci-dessus) et publier .
Remarque : La personnalisation de ces deux styles est possible en déclarant d’autre contenu, mais il faut garder la partie « float: left; » de « div.stfl_thbox ».
- Contraintes
Le Plugin crée (ou met à jour) sous chaque dossier de gallery un sous-dossier « th2d3d » comportant des vignettes (thumbnails) correspondant à la vue gauche, en réduisant cette vue à un maximum de 180px par 120px, sans rognage par simple réduction.
Remarque : NextGen crée un sous-dossier « thumbs » comportant des vignettes (thumbnails) correspondant à la réduction et au rognage pour obtenir un ratio fixe (240px par 160px) à partir du couple (fichier.jpg)
Le Plugin crée (ou met à jour) sous chaque dossier de gallery un fichier « listePhotos.js » servant au visualiseur pour passer d’une image à l’autre.
III. Documentation technique
Dénominations :
Nom du plugin : « stereoscope » , il n’existe pas (19/03/2024) ni en tant que nom de plugin, ni nom de pattern.
Préfixe pour les fonctions et les variables globales : « stfl_ » .
remarque : stl (3 lettres)= est un format de fichier modèles 3D
IV Remarques :
Faux Frère : Il y a une fonction basique de Gallery sous Wodpress – Gutemberg (sans NextGen donc) : Inutilisable actuellement, cette fonction permet le chargement de fichiers images .jpg qui sont stockés dans l’arborescence usuelle par année et mois de chargement, dossiers wp-content/uploads/AAAA/MM.
En même temps ces images sont mises dans le block gallery
Nom de galerie et Nom de page ou d’article post : deux noms distincts même si homonymes.
En utilisant un article (post) par galerie, on peut appeler directement cet article contenant la galerie : exemple : https://www.flagarde.fr/wp_fl/les-arts-de-la-bievre/ présente une galerie créée sans NextGEN à partir d’un dossier local appelé « les-arts-de-la-bievre » et transféré (FTP) sur le site. Mais il y a deux entités sur le site avec le même nom : le dossier galerie, d’une part, et l’article, d’autre part, qui contientac en plus un texte d’introduction notamment. Le lien vise l’article, et je ne connais pas d’expression de lien permettant de viser directement la galerie.
Recherche de plugin existant pour la même fonction dans les très nombreux plugins de WordPress :
“3D” dans les plugins de wordpress correspond à l’affichage de modèles 3D ou des effets d’animation d’images.
“stereo” peut correspondre à de l’audio ; sinon il y a des plugin non maintenus (ex : smartbroker, 3d-wiggle-player, …)