Quantcast
Channel: Sachsen – Seite 40 – designest.de – Fotografien Leipzig
Viewing all articles
Browse latest Browse all 35

How-To: Flash Panorama Player und WordPress

$
0
0

+++ ENGLISH VERSION: CLICK HERE +++ ENGLISH VERSION: CLICK HERE +++

Im Netz bin ich über Sams Anleitung gestolpert, kam damit zwar klar, aber nicht auf Anhieb. Ich nehme an, dem Durchschnittsnutzer geht es nicht anders. Aus der Motivation heraus entstand dieses How-To, möglichst einfach den Flash Panorama Player in WordPress zu integrieren.

Ein, zwei Anmerkung zu dieser Anleitung.

  1. Ich habe meine Panoramas alle als cylindrisches JPGs vorliegen. Ich denke aber, man kann diese Anleitung auch benutzen, wenn man sein Panoramas als MOV auf dem Server liegen hat, da es beliebig erweiterbar ist.
  2. Ich will meine Panoramas direkt in die Seite einbauen und möglichst viel Kontrolle über das Einbinden haben. Ich möchte dies mit möglichst wenig Klicks und Text bewerkstelligen.
  3. Eine Abwandlung des Skripts, um die Panoramas mittels Fancybox, Lightbox oder Thickbox einzubinden, gebe ich am Ende des Tutorials.
  4. Ich benutze derzeit WordPress 2.7.1 zusammen mit Flash Panorama Player 2.3.1

Was machen und brauchen wir?

  1. Flash Panorama Player (FPP)
  2. WordPress Plugin Enzymes installieren
  3. WordPress Plugin More Fields installieren & einrichten (optional)
  4. Ran ans Panorama-Bloggen
  5. Das Ganze mit FancyBox, Thick- oder LightBox
  6. So sieht es dann aus

FPP-Dateien auf Server laden

1. Flash Panorama Player

Der Flash Panorama Player ist ein sehr schicker, schlanker und flexibler Viewer für Panoramas. Mein Favorit!

Wir werden das Panorama ganz ohne externe XML-Datei einbinden. Dadurch reicht es, die mitgelieferten SWF-Dateien und das Flash Detector Plugin (swfobjects.js) alle zusammen in ein Verzeichnis zu kopieren. In meinem Fall nach wp-content/panorama/. Ich benutze zusätzlich noch das Plugin logoMeter.

2. Enzymes installieren

Einfach runterladen, installieren und aktivieren. Dank Enzymes kann man sehr flexibel auf Inhalte des Blogs zurückgreifen und auch an PHP-Skripte übergeben. Die Idee ist, in die Metafelder den Dateinamen des Panoramas (und ggf. zusätzliche Informationen) einzugeben und diesen dann an ein PHP-Skript zu übergeben. Dieses Skript gibt dann den notwendigen Code zurück, womit das Panorama eingebunden wird.
Dafür im Template-Ordner wp-content/plugins/enzymes/templates des Plugins eine Datei names embedpano.php erstellen.

Das Skript bindet das Panorama wie unter SWFObject im Tutorial von FPP (tutorials/parameters.html#SWFObject) beschrieben ein. Zusätzlich nutzt es noch die Embedded XML file-Methode wie im Tutorial (tutorials/parameters.html#Embedded_XML_file) erklärt.
Hier der Code, den ihr für eure Seite noch anpassen müsst (Pfadangaben) und womit es auch ganz einfach sein sollte, zusätzliche Parameter einzubinden (Panorama-Größe, XML-Aufrufe):

<?php
// Put Every Variable in a Separated Field To Access Them Like This: $field_vars['pano-filename']
$field_vars = $this->elaborate("pano-filename => .pano-filename" );
// If You Are Using More Than One Meta Field, Use Code Like This
// $field_vars = $this->elaborate("pano-filename => .pano-filename \n pano-width => .pano-width \n pano-height => .pano-height" );

// Define (URL-) PATH to FPP Files
$fpp_path = 'http://DOMAIN.com/path/to/fpp/files';

// Define Size Of Embedded Panorama
$width = 610; // Or: $width = $field_vars['pano-width'];
$height = 400;

// Build Embedded XML String
$xml_string = '<?xml version = \'1.0\'?>';
$xml_string .= '<panorama>';
$xml_string .= '<parameters>';
$xml_string .= 'layer_1=' . $fpp_path . '/logoMeter.swf;'; // Load Plugins
$xml_string .= 'layer_3=' . $fpp_path . '/limits.swf;';
$xml_string .= 'layer_4=' . $fpp_path . '/autorotator.swf;';
$xml_string .= 'layer_5=' . $fpp_path . '/cylConverter.swf;';
$xml_string .= 'layer_8=' . $fpp_path . '/menuFullscreen.swf;';
$xml_string .= 'panoType=cylinder;';
$xml_string .= 'panoName=' . substr($field_vars['pano-filename'], 0, strrpos($field_vars['pano-filename'], '.')) . ';'; // Strip The File Extension
$xml_string .= 'loaderStreamed=1;';
$xml_string .= 'loaderBandwidth=100;';
$xml_string .= '</parameters>';
$xml_string .= '<cylconverter>'; // Set Plugin Parameters
$xml_string .= 'autoLimits=1;';
$xml_string .= 'strictBorders=0;';
$xml_string .= '</cylconverter>';
$xml_string .= '<logoMeter>'; // Set Plugin Parameters
$xml_string .= 'size=200x40;';
$xml_string .= 'radius=5;';
$xml_string .= 'bgColor=0xb0b0b0;';
$xml_string .= 'borderColor=0x303030;';
$xml_string .= 'meterSize=180x6;';
$xml_string .= 'meterPos=9:8;';
$xml_string .= 'meterColor=0xffffff;';
$xml_string .= 'textPos=9:17;';
$xml_string .= 'textSize=180x20;';
$xml_string .= 'textColor=0xCffffff;';
$xml_string .= 'textLoaded=Panorama wird geladen...;';
$xml_string .= 'font=Verdana;';
$xml_string .= 'fontsize=12;';
$xml_string .= 'delay=1000;';
$xml_string .= 'alpha=0.8;';
$xml_string .= 'postCommand=text2.alpha%3D1,600;';
$xml_string .= '</logoMeter>';
$xml_string .= '</panorama>';

// Get Timestamp As Unique DIV-ID
// Necessary If You Include More Than One Panorama On Your Website
$micro_time = microtime();
$flash_id = 'flashcontent' . substr($micro_time, 0, strrpos($micro_time, ' '));

// Echo Everything

echo '<script type="text/javascript" src="' . $fpp_path . '/swfobject.js"></script>' . "\n";
echo '<div id="' . $flash_id . '">Diese Seite ben&ouml;tigt <a href="http://www.adobe.com/go/getflashplayer/">Adobe Flash Player</a> und einen Browser mit aktiviertem JavaScript.</div>' . "\n";
echo '<script type="text/javascript">' . "\n";
echo 'var so = new SWFObject("' . $fpp_path . '/show_pano.swf", "mypano", "' . $width . '", "' . $height . '", "6.0.65", "#FFFFFF");' . "\n";
echo 'so.addParam("allowFullScreen","true");' . "\n";
echo 'so.addParam("allowScriptAccess","sameDomain");' . "\n";
echo 'so.addVariable("movie", "' . $fpp_path . '/pano.swf");' . "\n";
echo 'so.addVariable("redirect", window.location);' . "\n";
echo 'so.addVariable("xml_text", "' . $xml_string . '");' . "\n";
echo 'so.write("' . $flash_id . '");' . "\n";
echo '</script>' . "\n";

?>

Hier gibt es das Skript auch als Download: [download#4#nohits]

Das also unter wp-content/plugins/enzymes/templates/embedpano.php speichern. Nutzen werden wir es im übernächsten Schritt.

Kurze Erläuterung: Der XML-Aufruf muss in einer Zeile stehen und Einträge mit Semikolon abgetrennt werden. Um es übersichtlicher zu halten, hab ich das wie oben eingebunden. Der Pfad zum Panorama wird in der Variable $field_vars[‚pano-filename‘] stehen. Zum Einbinden mit cylConverter brauchen wir jedoch den Namen ohne die Dateiendung, daher der substr-Filter des Dateinamens.
Beliebig andere Metafelder können bspw. wie folgt eingebunden werden:

$field_vars = $this->elaborate("pano-filename => .pano-filename \n pano-thumbnail => .pano-thumbnail" );

Um dem Objekt einen eindeutigen Namen zu geben, benutze ich die ID des Beitrags: $this->post->ID. Um den DIV-Container für das Panorama eindeutig zu bezeichnen, benutze ich die microtime-Funktion. Somit kann man mehrere Panoramas in einen Beitrag einfügen.

Einstellungen von More Fields

3. More Fields installieren & einrichten

Das Plugin More Fields sorgt lediglich für eine bequemere Nutzung der Spezialfelder eines Beitrags (Meta Felder). Wir gehen wie folgt vor:

  1. More Fields runterladen, installieren und aktivieren.
  2. Unter Einstellungen > More Fields eine neue Box anlegen: Add new Box!:
    Box Title ist Embed Panorama
    Position ist right.
    Dann mit Speichern bestätigen.
  3. Im Anschluss ein neues Feld innerhalb der Box anlegen: Add new field!:
    Als Key vergebe ich pano-filename,
    Title ist Path to Pano File,
    Slug bleibt leer und
    als Type wähle ich Text.
    Noch auf Save klicken zum Bestätigen.

Dieser Schritt ist optional, man kann auch einfach beim Schreiben eines Beitrags, unten auf Spezialfelder klicken, dann auf Neu anlegen und als Name pano-filename vergeben.

Man kann natürlich beliebig viele Felder in der Box anlegen. Zum Beispiele eine, die die Größe definiert.

Panorama hochladen & Pfad kopieren

4. Ran ans Panorama-Bloggen

Eine neue Seite oder einen neuen Beitrag erstellen und wie gewohnt das Bild/Panorama einfügen. Hier jedoch das Panorama hochladen und den Pfad zum Bild in die Zwischenablage kopieren. Zu finden ist der unter Link-URL -> Datei-URL. Den Vorgang mit Änderungen speichern abschließen. Die Informationen zu Titel und Beschreibung auszufüllen ist optional, macht aber für die bessere zukünftige Verwaltung durchaus Sinn.

Den kopierten Pfad zum Panorama jetzt in die Box, die wir mit More Fields erstellt haben, einfügen. Alternativ das Spezialfeld pano-filename nutzen.

Das Einbetten in den Beitrag geht nun ganz einfach mit:
Panorama bloggen!

{[ .-/embedpano.php ]}

Das war es schon. Der Inhalt des Meta-Felds mit dem Namen pano-filename wird innerhalb des Template-PHP-Skripts ausgelesen und beim Bauen des SWF-Objekts entsprechend eingebunden.
How easy is that?

5. Das Ganze mit FancyBox

Das funktioniert auch. Ich hab dafür das Plugin FancyBox for WordPress installiert. Dann im PHP-Skript den Inhalt in einen DIV-Container werfen, der unsichtbar ist und eine eindeutige ID hat: <div id="pano" style="display: none;">...</div>. Dann beim Bloggen einen Aufruf ähnlich diesem bauen:

<a id="inline" class="fancybox" href="#pano"><img src="http://DOMAIN.com/path/to/pano-thumbnail.jpg" /></a>
{[ .-/embedpano.php ]}

Oben ist der Link und das Panorama wird als Inline-Element mit FancyBox eingebunden. Analog funktioniert das auch mit Lightbox.

6. So sieht es dann aus

Diese Seite benötigt Adobe Flash Player und einen Browser mit aktiviertem JavaScript.

How-To: Flash Panorama Player and WordPress

Surfing the web, I was looking for an easy integration of Flash Panorama Player into WordPress. I found Sams posts. But it was hard to understand, what and why he was doing certain things. I think, other users got the same experience. This was the motivation for writing this How-To.

One or two remarks on this How-To:

  1. I have saved all my panoramas as cylindric JPGs and this tutorial describes how to use JPGs. But I think you can still use it, if you have MOV-files on your server due to the easy adaption of the script
  2. I want to post my panorama pretty straight and easy, but still having the maximum of control. If possible, I want to have a one-click-integration without inserting tons of text.
  3. A modification of the script, to use it with FancyBox, LightBox or ThickBox is given at the end of the How-To.
  4. Currently, I am using WordPress 2.7.1 and Flash Panorama Player 2.3.1

What do we make and what do we need?

  1. Flash Panorama Player (FPP)
  2. Install WordPress Plugin Enzymes
  3. Install and set up WordPress Plugin More Fields (optional)
  4. Blog your panorama
  5. Use FancyBox, Thick- or LightBox
  6. That’s how it looks like

Put FPP-files to server

1. Flash Panorama Player

The Flash Panorama Player is a very fancy, light and flexible viewer engine for panoramas. My favorite one!

We are going to include the panorama without an external XML-file. So you only need to put the SWF-files of FPP and the Flash Detector Plugin (swfobjects.js) on your web server. I saved them in a folder called wp-content/panorama/. Additionally, I am using the plugin logoMeter.

2. Install Enzymes

Simply download, install und activate the plugin. Using enzymes you can easily access to content of your blog post and use them inside PHP-scripts. The idea is to put the filename of your panorama (and more information) into the meta fields of your post and pass these values to the PHP-script. The script processes and builds the required code for the flash player integration.
Therefor, create a new PHP-file inside of wp-content/plugins/enzymes/templates and call it embedpano.php.

The script embeds the panorama using SWFObject with Flash version detector plugin as described in the FPP tutorial (tutorials/parameters.html#SWFObject). Further, it is using the Embedded XML file-methode as described (tutorials/parameters.html#Embedded_XML_file).
Here is the code, which you have to adapt (path settings) and which you can use to include more parameter like size of your panorama or additionally plugins:

<?php
// Put Every Variable in a Separated Field To Access Them Like This: $field_vars['pano-filename']
$field_vars = $this->elaborate("pano-filename => .pano-filename" );
// If You Are Using More Than One Meta Field, Use Code Like This
// $field_vars = $this->elaborate("pano-filename => .pano-filename \n pano-width => .pano-width \n pano-height => .pano-height" );

// Define (URL-) PATH to FPP Files
$fpp_path = 'http://DOMAIN.com/path/to/fpp/files';

// Define Size Of Embedded Panorama
$width = 610; // Or: $width = $field_vars['pano-width'];
$height = 400;

// Build Embedded XML String
$xml_string = '<?xml version = \'1.0\'?>';
$xml_string .= '<panorama>';
$xml_string .= '<parameters>';
$xml_string .= 'layer_1=' . $fpp_path . '/logoMeter.swf;'; // Load Plugins
$xml_string .= 'layer_3=' . $fpp_path . '/limits.swf;';
$xml_string .= 'layer_4=' . $fpp_path . '/autorotator.swf;';
$xml_string .= 'layer_5=' . $fpp_path . '/cylConverter.swf;';
$xml_string .= 'layer_8=' . $fpp_path . '/menuFullscreen.swf;';
$xml_string .= 'panoType=cylinder;';
$xml_string .= 'panoName=' . substr($field_vars['pano-filename'], 0, strrpos($field_vars['pano-filename'], '.')) . ';'; // Strip The File Extension
$xml_string .= 'loaderStreamed=1;';
$xml_string .= 'loaderBandwidth=100;';
$xml_string .= '</parameters>';
$xml_string .= '<cylconverter>'; // Set Plugin Parameters
$xml_string .= 'autoLimits=1;';
$xml_string .= 'strictBorders=0;';
$xml_string .= '</cylconverter>';
$xml_string .= '<logoMeter>'; // Set Plugin Parameters
$xml_string .= 'size=200x40;';
$xml_string .= 'radius=5;';
$xml_string .= 'bgColor=0xb0b0b0;';
$xml_string .= 'borderColor=0x303030;';
$xml_string .= 'meterSize=180x6;';
$xml_string .= 'meterPos=9:8;';
$xml_string .= 'meterColor=0xffffff;';
$xml_string .= 'textPos=9:17;';
$xml_string .= 'textSize=180x20;';
$xml_string .= 'textColor=0xCffffff;';
$xml_string .= 'textLoaded=Panorama wird geladen...;';
$xml_string .= 'font=Verdana;';
$xml_string .= 'fontsize=12;';
$xml_string .= 'delay=1000;';
$xml_string .= 'alpha=0.8;';
$xml_string .= 'postCommand=text2.alpha%3D1,600;';
$xml_string .= '</logoMeter>';
$xml_string .= '</panorama>';

// Get Timestamp As Unique DIV-ID
// Necessary If You Include More Than One Panorama On Your Website
$micro_time = microtime();
$flash_id = 'flashcontent' . substr($micro_time, 0, strrpos($micro_time, ' '));

// Echo Everything

echo '<script type="text/javascript" src="' . $fpp_path . '/swfobject.js"></script>' . "\n";
echo '<div id="' . $flash_id . '">Diese Seite ben&ouml;tigt <a href="http://www.adobe.com/go/getflashplayer/">Adobe Flash Player</a> und einen Browser mit aktiviertem JavaScript.</div>' . "\n";
echo '<script type="text/javascript">' . "\n";
echo 'var so = new SWFObject("' . $fpp_path . '/show_pano.swf", "mypano", "' . $width . '", "' . $height . '", "6.0.65", "#FFFFFF");' . "\n";
echo 'so.addParam("allowFullScreen","true");' . "\n";
echo 'so.addParam("allowScriptAccess","sameDomain");' . "\n";
echo 'so.addVariable("movie", "' . $fpp_path . '/pano.swf");' . "\n";
echo 'so.addVariable("redirect", window.location);' . "\n";
echo 'so.addVariable("xml_text", "' . $xml_string . '");' . "\n";
echo 'so.write("' . $flash_id . '");' . "\n";
echo '</script>' . "\n";

?>

Get the script here: [download#4#nohits]

Save that to your file in wp-content/plugins/enzymes/templates/embedpano.php. We will call the script later.
Some short words about the script: The XML-call does not contain any line feed, all text should be formatted in a single line replacing all significant line feeds to „;“. Using the code above we are formating it gratifying to the eye. The path to the panorama file is stored in $field_vars[‚pano-filename‘]. Using cylConverter, we need the filename without extension. That is why I am using the substr call.
Any other meta fields can be included like this;

$field_vars = $this->elaborate("pano-filename => .pano-filename \n pano-thumbnail => .pano-thumbnail" );

To give the SWF object an ID, I am using the post ID: $this->post->ID. To give the DIV-container an unique identifier, I am using the microtime-function. Therewith, it is possible to include more than one panorama per post.

Settings of More Fields

3. Install More Fields

Using the plugin More Fields is a comfortable way to use the meta fields of your post. You can set it up as following:

  1. Download, install and activate More Fields.
  2. In Settings > More Fields choose: Add new Box!, whereas
    Box Title is Embed Panorama
    Position is right.
    Click on Save to confirm.
  3. Next, add a new field inside the box: Add new field!:
    For the Key identifier I am using pano-filename,
    Title is Path to Pano File,
    Slug stays blank and
    Type is Text.
    Click on Save to confirm.

As already mentioned, this step is optional. You can also add a meta field when writing a post: Click on Custom Fields, then Add Custom Field and use pano-filename for the Name.
You can add as many fields as you want, e.g. one for the size the panorama should have.

Upload panorama

4. Blog your panorama

Add a new post or page and upload your panorama. After uploading, make sure to copy the File-URL, fill in the title and description if you want.

Now paste the copied path to the Path to Pano File in the Embed Pano box. Or you can use a custom field named pano-filename.

Embedding the panorama is pretty easy, just paste this code into your post:

Panorama bloggen!
{[ .-/embedpano.php ]}

That’s it!. The content of the meta field pano-filename is read inside the Template-PHP-scripts and is included while building the SWF-object.
How easy is that?

5. FancyBox

Which is pretty easy to do. I am using the plugin FancyBox for WordPress.
Now simply put the output of your PHP-script into a DIV-container, which is invisible and which has a unique ID: <div id="pano" style="display: none;">...</div>. Writing your post, you should call the panorama like this:

<a id="inline" class="fancybox" href="#pano"><img src="http://DOMAIN.com/path/to/pano-thumbnail.jpg" /></a>
{[ .-/embedpano.php ]}

First line is a link to an inline-element which uses FancyBox. The second line embeds the invisible panorama. Embedding Light- or ThickBox should work pretty similar.

6. That’s how it looks like

Diese Seite benötigt Adobe Flash Player und einen Browser mit aktiviertem JavaScript.

Viewing all articles
Browse latest Browse all 35

Trending Articles


Vimeo 10.7.1 by Vimeo.com, Inc.


UPDATE SC IDOL: TWO BECOME ONE


KASAMBAHAY BILL IN THE HOUSE


Girasoles para colorear


Presence Quotes – Positive Quotes


EASY COME, EASY GO


Love with Heart Breaking Quotes


Re:Mutton Pies (lleechef)


Ka longiing longsem kaba skhem bad kaba khlain ka pynlong kein ia ka...


Vimeo 10.7.0 by Vimeo.com, Inc.


FORECLOSURE OF REAL ESTATE MORTGAGE


FORTUITOUS EVENT


Pokemon para colorear


Sapos para colorear


Smile Quotes


Letting Go Quotes


Love Song lyrics that marks your Heart


RE: Mutton Pies (frankie241)


Hato lada ym dei namar ka jingpyrshah jong U JJM Nichols Roy (Bah Joy) ngin...


Long Distance Relationship Tagalog Love Quotes