Egarements photographiques

Insertion d’un panorama krpano dans WordPress

by on Jan.03, 2010, under Trucs & Astuces

[ad name=”Adsense_06″] .

Après avoir passé une petite journée à essayer de trouver comment mettre un panorama 360° produit par krpanotools (krpano), j'ai pu mettre en ligne ce premier panoramique en ligne. Je pense que cela n'est  pas forcément très difficile à mettre en oeuvre à la base, mais étant donné mes connaissances particulièrement limitées en java, xml, javascript & Co , j'ai dû chercher un peu (et j'aime ça !).

Bref, voici en quelques lignes mes quelques petits trucs, paramétrage pour mettre en ligne des panoramas issus de krpano.

La première chose est bien évidemment de produire une photo panoramique de 360°. Personnellement, j'essaie de garder la plus grande résolution possible quitte à ce que ça rame un peu lors du traitement de la photo (actuellement, la dimension horizontale maximale utilisée est de 15000 pixels).

Avec une telle résolution, il est particulièrement utile de traiter en multi-résolution. En tout cas, c'est l'option que je choisis.

Dans le fichier kmakemultires.config, voici les paramètres que j'ai spécifiquement positionnés (par rapport à l'original) :
# default.xml
xmltemplate=templates/xml/blog.xml
(...)
# renamedswf
renamedswf=true
(...)
# 'swfkrpano' template (default)
#
# - only one single javascript file (swfkrpano.js)
# - this file contains the swfobject.js and the swfkrpanomousewheel.js and
#   addtional code for easier flash to html embedding
#
#htmltemplate=templates/html/swfkrpano.html
#htmltemplate_additional_file=templates/html/swfkrpano.js
# 'blog' template (basé sur swfkrpano)
#
# - only one single javascript file (swfkrpano.js)
# - this file contains the swfobject.js and the swfkrpanomousewheel.js and
#   addtional code for easier flash to html embedding
#
htmltemplate=templates/html/swfblog.html
htmltemplate_additional_file=templates/html/swfkrpano.js

Je laisse la création du fichier html, je récupère une partie du code produit grâce au template paramétré avec la variable htmltemplate.

Il faut ensuite faire attention au contenu du fichier singleswfmultires.config : il écrase certains paramètres du fichier kmakemultires.config.

Dans le fichier de configuration, j'ai défini deux nouveaux templates : xmltemplate (blog.xml) et htmltemplate (swfblog.html).

  • fichier blog.xml :

<krpano version="1.0.8"[PARTIALPANO]>
    <include url="http://www.monsite.org/wp-content/pano360/skin/defaultskin.xml" />
    <view hlookat="0" vlookat="0" maxpixelzoom="1.0" />
    <display details="22" />
    [PREVIEW]
    [IMAGE]
</krpano>

  • fichier swfblog.html :
    <html>
    <head>
        <title>krpano.com - [NAME]</title>
    </head>
    <style>
    body{ font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; background-color:#000000; margin:0; padding:0; }
    * html, * html body{ overflow: hidden; }
    a{ color:#AAAAAA; text-decoration:underline; }
    a:hover{ color:#FFFFFF; text-decoration:underline; }
    </style>
    <body>
    <!--************* Début <@@@@> à mettre dans post WordPress ********************-->
    <div id="krpanoDIV">
        <noscript><table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Javascript not activated<br><br></center></td></tr></table></noscript>
    </div>

    <script type="text/javascript" src="http://www.monsite.org/wp-content/krpano/swfkrpano.js"></script>

    <script type="text/javascript">
    // <![CDATA[

        var swf = createswf("http://www.monsite.org/wp-content/pano360/[SWF]");
        swf.addVariable("xml","http://
    www.monsite.org/wp-content/pano360/[XML]");
        swf.embed("krpanoDIV");

    // ]]>
    </script>
    <!--************* Fin <@@@@@>  à mettre dans post WordPress ********************-->
    </body>
    </html>

Le répertoire pano360 est un choix purement personnel où je compte mettre tous mes panos 360°. Le répertoire krpano correspond au fichier javascript utilisé. Hélas, je n'ai pu y mettre le répertoire skin, il se retrouve donc dans pano360.

Un petit drag-and-drop du fichier <<image>> sur le fichier de commande (.bat) qui va bien….. et les fichiers sont produits :

  • répertoire <<image>>.tiles, contenant toutes les portions d'images (les tiles)
  • <<image>>_preview.jpg
  • <<image>.license
  • <<image>>.html
  • <<image>>.swf
  • <<image>>.xml : il faut, hélas, le retoucher pour mettre http://www.monsite.org/wp-content/pano360/ dans les url non complètes

Reste ensuite à télécharger sur le site :

  • les fichiers relatifs à <<image>> dans http://www.monsite.org/wp-content/pano360/
  • les différents fichier javascript (notamment swfkrpano.js) dans http://www.monsite.org/wp-content/krpano/

Pour l'écriture du post dans WordPress, il faut copier-coller le bloc <@@@@@> ci-dessus. Cependant, j'ai un petit bémol sur ma config originale WordPress avec l'éditeur visuel de base :
En basculant en le mode "Visuel" ou "HTML", le code est corrompu (ça ajoutait des saut de lignes) et donc, ça ne marchait pas !

J'ai pu contourner le problème en installant un nouveau plugins (Dean's FCKEditor For WordPress) permettant de mieux gérer le code javascript dans la rédaction d'un post.
 

Liens :


 

x

:, , , ,
Aucun commentaire pour l instant...

Laisser un commentaire

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!