{"id":3576,"date":"2024-09-02T13:37:11","date_gmt":"2024-09-02T13:37:11","guid":{"rendered":"https:\/\/www.flagarde.fr\/wp_fl\/?p=3576"},"modified":"2024-09-02T13:38:03","modified_gmt":"2024-09-02T13:38:03","slug":"plugin-stereoscope-pour-wordpress","status":"publish","type":"post","link":"https:\/\/www.flagarde.fr\/wp_fl\/plugin-stereoscope-pour-wordpress\/","title":{"rendered":"Plugin \u00ab\u00a0stereoscope\u00a0\u00bb pour WordPress"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Cette extension (plugin) pour WordPress permet de voir en relief-3D les images fixes (couples st\u00e9r\u00e9oscopiques) d\u2019une galerie \u00a0en choisissant un des modes de vision possible\u00a0: c\u00f4te-\u00e0-c\u00f4te pour vision libre ou avec un st\u00e9r\u00e9oscope ou un binocle, en anaglyphe (lunettes rouge-cyan), en compress\u00e9 pour un t\u00e9l\u00e9viseur 3D ou un projecteur 3 D, en entrelac\u00e9 pour \u00e9cran auto st\u00e9r\u00e9oscopique, …<\/p>

La galerie (\u00ab\u00a0Gallery\u00a0\u00bb), peut \u00eatre cr\u00e9\u00e9e \u00a0par un \u00e9diteur \u00e9labor\u00e9 NextGen (plugin de WordPress) qui permet de fixer l\u2019ordre de pr\u00e9sentation et de donner un titre et une description \u00e0 chaque image.
Une galerie peut aussi \u00eatre cr\u00e9\u00e9e\u00a0sans passer par NextGen, en pr\u00e9parant un dossier d\u2019images transf\u00e9r\u00e9 (ftp).\u00a0<\/p>

Dans une page ou un article du site un simple appel au plugin permet d\u2019ins\u00e9rer une planche (tableau) de vignettes (thumbnail sheet), chaque vignette appelant la visionneuse 3D (Lightbox)<\/p>

Source<\/strong>\u00a0:<\/p>

La visionneuse 3D (Lightbox) est bas\u00e9e sur le code JavaScript produit par\u00a0 Masuji Suto pour Stereo Photo Maker (SPM). Ce m\u00eame code est utilis\u00e9 pour la visionneuse 3D du site du St\u00e9r\u00e9o-Club Fran\u00e7ais\u00a0: image-en-relieg.org<\/p>

\u00a0<\/strong><\/p>

VERSION\u00a0:<\/strong> Ce plugin est test\u00e9 dans peu de cas et n\u2019est pas publi\u00e9 sur wordpress.org<\/strong>
Galeries exemples\u00a0: https:\/\/www.flagarde.fr\/wp_fl\/category\/image-en-relief-3d\/galeries-stereo\/<\/p>

I.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Mode emploi<\/h3>

Il faut d\u2019abord installer (une fois) le plugin (proc\u00e9dure assez simple)
Puis, pour chaque galerie, la cr\u00e9er,\u00a0 et ensuite ins\u00e9rer l\u2019appel \u00e0 cette galerie dans une page ou un article (post)<\/p>

Installation\u00a0 du plugin :<\/strong><\/p>

  1. a) T\u00e9l\u00e9charger le fichier compress\u00e9, le d\u00e9compresser et copier le dossier \u00ab\u00a0stereoscope\u00a0\u00bb dans l\u2019arborescence WordPress sous\u00a0: wp-content\/plugin<\/li>
  2. b) Dans l\u2019interface d\u2019administration\u00a0:<\/li><\/ol>

    – Ajouter 2 styles CSS \u00a0qui serviront \u00e0 chaque vignette et \u00e0 la planche des vignettes, ajout dans le th\u00e8me utilis\u00e9 (voir annexe CSS).<\/p>

    – Activer le plugin \u00ab\u00a0stereoscope\u00a0\u00bb.<\/p>

    \u00a0<\/p>

    Cr\u00e9ation d\u2019une \u00ab\u00a0Gallery\u00a0\u00bb avec une\u00a0 s\u00e9rie d\u2019images st\u00e9r\u00e9o. <\/strong><\/p>

    Les images \u00e0 pr\u00e9senter sont des couples st\u00e9r\u00e9os en .jpg,
    Il est recommand\u00e9 une taille de 1080px de haut maximum pour le d\u00e9lai de chargement (cf. conversion multiple de SPM). Mais le syst\u00e8me semble admettre des tailles sup\u00e9rieures. De plus le moteur d\u2019affichage st\u00e9r\u00e9o permet l\u2019agrandissement (zoom par molette) et le d\u00e9calage pour profondeur (fl\u00e8ches gauche et droite).<\/p>

    Titre et description de chaque image\u00a0:<\/p>

    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\u00e9rieur de l\u2019image<\/p>

    Ces m\u00e9tadonn\u00e9es sont cr\u00e9\u00e9es diff\u00e9remment selon qu\u2019on utilise ou non NextGen<\/p>

    AVEC NextGen, on cr\u00e9e une Gallery 2D (images= couples) et c\u2019est le plugin qui l\u2019utilise\u00a0:<\/p>

    Dans l\u2019interface d\u2019administration\u00a0: cr\u00e9er une nouvelle Gallery, et bien rep\u00e9rer le nom du dossier qui correspond au titre de la Gallery (nom sans majuscule ni signes divers)\u00a0<\/p>

    T\u00e9l\u00e9chargez les images (par glisser-d\u00e9poser depuis son ordinateur).
    Renseigner le titre et la description des images.<\/p>

    Fixer l\u2019ordre des images<\/p>

    NextGen permet de d\u00e9clarer un titre et une description par image ;
    par d\u00e9faut NextGen utilise le nom du fichier comme titre\u00a0;
    NextGen ne r\u00e9cup\u00e8re pas le titre (headline) des IPTC, ni la description (Caption-Abstract)<\/p>

    \u00a0J\u2019ai utilis\u00e9 NextGEN \u00ab\u00a0Plus\u00a0\u00bb 100\u20ac (au moins la premi\u00e8re ann\u00e9e\u00a0; le renouvellement annuel couvre la maintenance corrective et \u00e9volutive, le support technique)<\/p>

    \u00a0<\/p>

    SANS NextGen\u00a0:<\/p>

    Pr\u00e9parer un dossier comprenant les images avec un nom de dossier voulu pour WordPress
    Les noms des fichiers images fixeront l\u2019ordre de pr\u00e9sentation.<\/p>

    Mettre un titre et une description dans les m\u00e9tadonn\u00e9es IPTC de chaque image (facultatif).<\/p>

    \u00a0\u00a0 On peut utiliser un \u00e9diteur de\u00a0 fichier images, exemples\u00a0:<\/p>

    \u00a0\u00a0\u00a0 – Sous Ifranview\u00a0: Image > Information > IPTC info (bouton en bas \u00e0 gauche) ><\/p>

    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Renseigner \u2018Document title\u2019 et \u2018Caption\u2019 (description) puis Write et OK<\/p>

    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Il y a un bouton \u2018Image information\u2019 (I sur fond bleu) et des fl\u00e8ches pour photo suivante \/pr\u00e9c\u00e9dente<\/p>

    \u00a0\u00a0\u00a0 – Sous Photoshop\u00a0: Fichier > information > IPTC > Contenu IPTC > Titre (zone de saisie) et Description.<\/p>

    \u00a0\u00a0 – \u00a0Pas dans l\u2019explorateur de fichiers\u00a0 Windows\u00a0: la zone \u00ab\u00a0Titre \u00ab\u00a0propos\u00e9e ne correspond pas.<\/p>

    \u00a0 \u00a0– \u00a0Pas par SPM, et Attention\u00a0: SPM ne transporte pas les IPTC\u00a0; il ne transporte que les EXIF du fichier source au fichier sauvegard\u00e9 apr\u00e8s traitements<\/p>

    \u00a0\u00a0 \u00a0Par d\u00e9faut, le titre est vide (contrairement \u00e0 NextGen)<\/p>

    Transf\u00e9rer le dossier sur le site sous WordPress sous wp-content\/gallery\u00a0 (par FTP)<\/p>

    \u00a0<\/p>

    Insertion de la \u00ab\u00a0Gallery\u00a0\u00bb dans une page du site ou d\u2019un article (post)<\/strong>\u00a0:<\/p>

    Dans l\u2019\u00e9dition de la page\/article o\u00f9 on pr\u00e9sente la s\u00e9rie d\u2019images st\u00e9r\u00e9o\u00a0:<\/p>

    \u00a0Cr\u00e9er une section \u00a0\u00e0 une colonne,
    \u00a0Ins\u00e9rer l\u2019appel \u00e0 la visionneuse\u00a0:

    ! ! Pour Stereoscope : nom-dossier<\/em><\/i> dossier non trouv\u00e9.<\/b><\/div>
    – sous Elementor on utilise un bloc paragraphe (Text Editor) contenant le texte d\u2019appel
    – sans Elementor on utilise un\u00a0 bloc \u00ab\u00a0 [\/] Short code\u00a0\u00bb de la s\u00e9rie des Widgets<\/p>

    Si on utilise la fonction d\u2019insertion d\u2019une Gallery NextGen, on obtient, dans le texte brut, une d\u00e9claration de la forme\u00a0: \u00a0ngg_shortcode_0_placeholder\u00a0; que l\u2019on remplace\u00a0\u00a0\u00a0 par

    ! ! Pour Stereoscope : nom-dossier<\/em><\/i> dossier non trouv\u00e9.<\/b><\/div> . Attention\u00a0: il ne faut pas d\u2019espace entre les guillemets et le nom du dossier (contrairement au m\u00e9canisme de correction de Word, si on pr\u00e9pare en local un texte \u00e0 copier sur le site)<\/p>

    – Annexe\u00a0 CSS pour l\u2019installation<\/strong><\/p>

    Objectif\u00a0: ajouter 2 styles\u00a0pour l\u2019affichage de chaque vignette (img.stfl_th2d3d)\u00a0 et de la planche des vignettes (div.stfl_thbox)\u00a0<\/p>

    Utilisation de la fonction de d\u00e9claration d\u2019un \u00ab\u00a0Additionnal CSS\u00a0\u00bb dans la personnalisation\u00a0 de l\u2019apparence d\u2019un th\u00e8me.<\/p>

    \u00a0<\/p>

    – Sous Elementor et le th\u00e8me Astra, page d\u2019administration\u00a0:<\/p>

    Aller dans interface d\u2019administration,\u00a0\u00a0 Appareance > Customize > Additional CSS<\/p>

    Ajouter les lignes ci-dessous en fin (cf. colonne de gauche) et publier :<\/p>

    \u00a0<\/p>

    img.stfl_th2d3d {<\/p>

    \u00a0border-radius: 8px;<\/p>

    \u00a0box-shadow: 8px 8px 8px #aaa;<\/p>

    }<\/p>

    div.stfl_thbox {<\/p>

    \u00a0float: left;<\/p>

    \u00a0width: 210px;<\/p>

    \u00a0height: 200px;<\/p>

    \u00a0padding: 2px;<\/p>

    \u00a0margin: 5px;\u00a0<\/p>

    \u00a0border: 1px solid #4FF;<\/p>

    }<\/p>

    \u00a0<\/p>

    –\u00a0 sans Elementor\u00a0 et th\u00e8me \u00ab\u00a0Twenty-Four\u00a0\u00bb au lieu de\u00a0 ASTRA : chercher<\/p>

    \u00a0Appareance > Customize (=> Design) > Style > Edit style (icone crayon) > More (3 points en vertical \u00e0 droite) >’Additional CSS’<\/p>

    \u00a0\u00a0 Ajouter les lignes \u00a0de CSS (cf. ci-dessus) et publier .<\/p>

    \u00a0<\/p>

    Remarque\u00a0: La personnalisation de ces deux styles est possible en d\u00e9clarant d\u2019autre contenu, mais il faut garder la partie \u00ab\u00a0float: left;\u00a0\u00bb de \u00ab\u00a0div.stfl_thbox\u00a0\u00bb.<\/p>

    1. Contraintes<\/li><\/ol>

      Le Plugin cr\u00e9e (ou met \u00e0 jour) sous chaque dossier de gallery un sous-dossier \u00ab\u00a0th2d3d\u00a0\u00bb\u00a0 comportant des vignettes (thumbnails) correspondant \u00e0 la vue gauche, en r\u00e9duisant cette vue \u00e0 un maximum de 180px par 120px, sans rognage par simple r\u00e9duction.<\/p>

      Remarque\u00a0: NextGen cr\u00e9e un sous-dossier \u00ab thumbs\u00a0\u00bb\u00a0 comportant des vignettes (thumbnails) correspondant \u00e0 la r\u00e9duction et au rognage pour obtenir un ratio fixe (240px par 160px) \u00e0 partir du couple (fichier.jpg)<\/p>

      Le Plugin cr\u00e9e (ou met \u00e0 jour) sous chaque dossier de gallery un fichier \u00ab\u00a0listePhotos.js\u00a0\u00bb servant au visualiseur pour passer d\u2019une image \u00e0 l\u2019autre.<\/h3>

      III. Documentation technique\u00a0<\/h3>

      D\u00e9nominations\u00a0: <\/strong><\/p>

      Nom du plugin\u00a0: \u00ab\u00a0stereoscope\u00a0\u00bb , il n\u2019existe pas (19\/03\/2024) \u00a0ni en tant que nom de plugin, ni nom de pattern.<\/p>

      Pr\u00e9fixe pour les fonctions et les variables globales\u00a0: \u00a0\u00ab\u00a0stfl_\u00a0\u00bb .<\/p>

      \u00a0\u00a0\u00a0 remarque\u00a0 : stl \u00a0(3 lettres)= est un format de fichier mod\u00e8les 3D<\/p>

      \u00a0<\/p>

      IV Remarques\u00a0:<\/h3>

      \u00a0<\/p>

      Faux Fr\u00e8re\u00a0: Il y a une fonction \u00a0basique de Gallery sous Wodpress \u2013 Gutemberg (sans NextGen donc)\u00a0: Inutilisable actuellement, cette fonction permet le chargement de fichiers images .jpg qui sont stock\u00e9s dans l\u2019arborescence usuelle\u00a0 par ann\u00e9e et mois de chargement, dossiers wp-content\/uploads\/AAAA\/MM.<\/p>

      En m\u00eame temps ces images sont mises dans le block gallery<\/p>

      \u00a0<\/p>

      Nom de galerie et Nom de page ou d\u2019article post\u00a0: deux noms distincts m\u00eame si homonymes.
      En utilisant un article (post) par galerie, on peut appeler directement cet article contenant la galerie\u00a0: exemple\u00a0: https:\/\/www.flagarde.fr\/wp_fl\/les-arts-de-la-bievre\/<\/a> pr\u00e9sente une\u00a0 galerie\u00a0 cr\u00e9\u00e9e sans NextGEN \u00e0 partir d\u2019un dossier local appel\u00e9 \u00ab\u00a0les-arts-de-la-bievre\u00a0\u00bb et transf\u00e9r\u00e9 (FTP) sur le site. Mais il y a deux entit\u00e9s sur le site avec le m\u00eame nom\u00a0: le dossier galerie, d\u2019une part, \u00a0et l\u2019article, d\u2019autre part, qui contientac en plus un texte d\u2019introduction notamment. Le lien vise l\u2019article, et je ne connais pas d\u2019expression de lien permettant de viser directement la galerie.<\/p>

      \u00a0<\/p>

      Recherche de plugin existant pour la m\u00eame fonction dans les tr\u00e8s nombreux plugins de WordPress\u00a0:
      “3D” dans les plugins de wordpress correspond \u00e0 l’affichage de mod\u00e8les 3D\u00a0 ou des effets d’animation d’images.<\/p>

      “stereo” peut correspondre \u00e0 de l\u2019audio\u00a0; sinon il y a des plugin non maintenus (ex\u00a0: smartbroker, 3d-wiggle-player, \u2026)<\/p>

      \u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

      Cette extension (plugin) pour WordPress permet de voir en relief-3D les images fixes (couples st\u00e9r\u00e9oscopiques) d\u2019une galerie \u00a0en choisissant un des modes de vision possible\u00a0: c\u00f4te-\u00e0-c\u00f4te pour vision libre ou avec un st\u00e9r\u00e9oscope ou un binocle, en anaglyphe (lunettes rouge-cyan), en compress\u00e9 pour un t\u00e9l\u00e9viseur 3D ou un projecteur 3 D, en entrelac\u00e9 pour \u00e9cran …<\/p>\n

      Plugin \u00ab\u00a0stereoscope\u00a0\u00bb pour WordPress<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ngg_post_thumbnail":0,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-3576","post","type-post","status-publish","format-standard","hentry","category-documents-sur-3d-stereo"],"_links":{"self":[{"href":"https:\/\/www.flagarde.fr\/wp_fl\/wp-json\/wp\/v2\/posts\/3576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.flagarde.fr\/wp_fl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.flagarde.fr\/wp_fl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.flagarde.fr\/wp_fl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.flagarde.fr\/wp_fl\/wp-json\/wp\/v2\/comments?post=3576"}],"version-history":[{"count":4,"href":"https:\/\/www.flagarde.fr\/wp_fl\/wp-json\/wp\/v2\/posts\/3576\/revisions"}],"predecessor-version":[{"id":3580,"href":"https:\/\/www.flagarde.fr\/wp_fl\/wp-json\/wp\/v2\/posts\/3576\/revisions\/3580"}],"wp:attachment":[{"href":"https:\/\/www.flagarde.fr\/wp_fl\/wp-json\/wp\/v2\/media?parent=3576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.flagarde.fr\/wp_fl\/wp-json\/wp\/v2\/categories?post=3576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.flagarde.fr\/wp_fl\/wp-json\/wp\/v2\/tags?post=3576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}