PanoPress Quick Start Guide

Download Panopress
  1. Install PanoPress:
    1. Log into your WordPress site admin area
    2. Go to Plugins > Add New and do a search for PanoPress
    3. Click the Install now link in the PanoPress listing
    4. Or you can instal manually, Download & unzip Panopress & upload Panopress to your wp-plugins folder
  2. Activate Panopress in your WordPress admin plugins page
  3. Configure Panopress settings in the PanoPress admin page under Settings > PanoPress
  4. Upload your panoramas to your site via ftp
  5. Enter the shortcode in your post like this, replace file=”” parameter with your own path info – [pano file=”path/my-panorama.html”]

PanoPress General Instructions for all Panorama players
Updated for PanoPress 1.2 – August 2014

Supported Panorama Players

To embed a panorama on your site using PanoPress, you must create a panorama ready for web display using one of the following applications

PanoPress supports Flash, HTML5 & WebGL panoramas created by the following applications and should work w similar apps not listed, as well as panoramas hosted on sites like 360Cities, ViewAt, TourWrist, etc

  1. Krpano – Flash, HTML5 & WebGL
  2. Kolor Panotour & Panotour Pro – Flash, HTML5 & WebGL
  3. Pano2Vr & Object2VR – Flash & HTML5
  4. Flashificator – Flash only
  5. Ptgui – Flash & HTML5
  6. OpenPano Saladoplayer – Flash only
  7. QTVR – Flash only (via CuTy)
  8. Other similar HTML5, WebGL & Flash 360° panorama formats should work with PanoPress as well

PanoPress Basic Settings

test

Default Panorama Size
This is the default size in pixels (px) that your panoramas will be displayed on your site, it can be overridden in the shortcode

Play Button
Show/hide a semi transparent play button over preview panoramas

Panobox
open panoramas in Panobox lightbox clone and set options, Panobox window size, color, etc

PanoPress Advanced Settings

Advanced Settings


Upload Folder
This is where your panoramas are stored, either in the default wordpress upload folder, like below

wp-content/uploads

or your own directory, this path will be from the root of your wp site, examples below

wp-content/uploads/panoramas

wp-content/panoramas

Performance (panopress 1.0b1)
display only one active panorama per page for non/mobile/all, prevents multiple panoramas opening simultaneously by closing the last open panorama when opening a new one, opening too many panos simultaneously will crash some web browsers and slow down performance in general – requires preview images be set for each pano so the image can replace the closed panoramas

Flash window mode (wmode) (panopress 1.0b1)
change flash wmode settings if there are issues w other elements displaying over or under flash elements

CSS (panopress 1.0b1)
configure PanoPress CSS settings, set the PanoPress embed element & Panobox colors, position, borders, padding etc all through CSS !

Global Viewer
Global viewer allows you to use only one swf file for all the panoramas displayed on your site, which allows for easily updating the panorama display engine & global skin etc in one location, no need for separate swf & js alongside xml in every project folder

this currently works with Flash Panorama Player & KRPano

Set Global Viewer folder path
If using global swf mode, upload your krpano.swf + krpano.js files or your fpp.swf to your global viewer directory via ftp.

FPP users should take a copy of pano.swf and rename to fpp.swf

KRPano users can use the krpano droplets to create swf & js files w embedded license (and iphone js if desired as well), rename the created files to krpano.swf + krpano.js and upload via ftp

Using PanoBox (lightbox clone)

PanoBox

PanoBox Options

Panobox
Check this box to open panoramas in Panobox window

this setting can be overridden per shortcode with panobox=”on” or panobox=”off”

Show options
Click this link to see more options

Window Size: 
check box for fullscreen or use Width: & Height: in pixels

Effects:
Check boxes for Fade-in & Animated window resize

Style:
Light or Dark

Other Content:
To open jpg files in panobox you need to add “panobox” class to image link

Uploading Panoramas

Using FTP to Upload Panoramas


all panoramas must be uploaded to your panorama upload folder as set in the panopress prefs, if you are working with panoramas that consist of multiple files such as xml from krpano or html5 from pano2vr or elaborate virtual tours from panotour pro, you must use an ftp client such as cyberduck or filezilla to upload the entire working panorama project directory to your site

note that if you want to embed html pages (panotour pro, etc) you must be using panopress 1.0.b1 or later

it is also recommended to test your uploaded panorama files outside of wordpress to confirm they are working normally if you have any problems with the panopress embed not functioning as expected, by visiting the url for your files directly with a web browser

so if your panorama upload folder is left at the default setting of

wp-content/uploads

you would upload your panoramas like this

wp-content/uploads/panoramas/my-pano/my-pano.html (all project files in my-pano/)

and embed it like this, using the appropriate file extension

[pano file=”panoramas/my-pano/my-pano.html”]

or with an absolute url, which you could also use to test that the panorama is working on its own outside of wordpress

[pano file=”http://www.domain.com/wp-content/uploads/panoramas/my-pano/my-pano.html”]

Projects that contain multiple files in a folder

KRPano:

KRPanotools & other KRPano XML Projects

Use FTP to upload XML panoramas, make sure all of your files created by the droplet are in the same folder, my-pano.swf, my-pano.js, my-pano.xml, & my-pano.tiles folder should all be in an enclosing “my-pano” folder – if you are using krpano global swf, my-pano.swf & my-pano.js are not required in panorama folders

Panotour Pro

To upload panotour pro projects, you must use ftp to upload the entire working project folder as it was created on your local machine

Pano2VR:

Pano2VR or other all in one swf

To upload pano2VR self contained swf panorama files use either the wp media upload, or upload via ftp as above

Pano2VR Flash + HTML5 & others (PTGui, Flashificator+IOSVR, etc)

you must create a working .html page with flash & html5 device detection (see the documentation for your pano player), confirm that it all works on its own outside of wordpress, all files must be uploaded via ftp, embed the .html file as described above for xml

Using the Shortcode

PanoPress Post Editor Button


You may use the PanoPress button in the WordPress visual post editor, or enter the shortcode by hand

The shortcode accepts the following parameters –

file – REQUIRED
path can be relative or absolute
file=”path/my-pano.html”
file=”http://www.my-domain/wp-content/uploads/path/my-pano.html”
The file parameter is the path to your xml, swf, or html file from your panorama folder as set in panopress
accepts files ending with .swf, .xml, qtvr .mov .html, .php (+ queries) etc, and most urls ending w slash /

preview – OPTIONAL
path can be relative or absolute
preview=”path/my-pano.jpg”
preview=”http://www.my-domain/wp-content/uploads/path/my-pano.jpg”
this is a preview jpg which will load the pano when clicked
accepts .jpg, .png, .gif

width & height – OPTIONAL
height=”600″ width=”400″
height=”600px″ width=”400px″
height=”600px″ width=”100%″
Width & height are in pixels by default, or can optionally be specified as px, %, em, or other standard CSS units Examples: 800px, 100%, 2.5em, etc, you may mix values like width=”100%” height=”400px” Note that % width or height will be % of the parent css element, not nessisarily the entire page – can be set in the shortcode to override default settings

panobox – OPTIONAL
panobox=”on” OR panobox=”off”
turn the panobox lightbox clone on/off per pano in the shortcode

button – OPTIONAL
button=”on” OR button=”off”
turn the “play” button displayed on pano preview images on or off per pano in the shortcode
(use css settings to change button image)

Using the Shortcode

Shortcode Examples


file paths used in the shortcode are set from your panorama folder as set in panopress settings, if you are using the default “wp-content/uploads”, and you upload your panos like “wp-content/uploads/path/my-pano.swf” you would set “path/my-pano.swf” as the file path in the shortcode



always make sure to use [" "] straight quotes and not [“ ”] curly quotes in your shortcode

note that height & width may be specified as px or %, or will assume px value if not specified

you may optionally use absolute URL paths like this in any example below
[pano file="http://www.my-domain/wp-content/uploads/path/my-pano.html"]
to embed html5 and flash panoramas with an .html file, this is the easiest method for all supported players

[pano file="my-pano/my-pano.html"]
[pano file="my-pano/my-pano.html" width="100%" height="500px"]
[pano f="my-pano/my-pano.html" w="900" h="500"]
[pano file="my-pano/my-pano.html" preview="my-pano/my-pano.jpg" width="900" height="500"]
to embed panoramas with a .xml file

[pano file="my-pano/my-pano.xml"]
[pano file="my-pano/my-pano.xml" width="100%" height="500px"]
[pano f="my-pano/my-pano.xml" w="900" h="500"]
[pano file="my-pano/my-pano.xml" preview="my-pano/my-pano.jpg" width="900" height="500"]
to embed stand alone self contained swf panoramas - flash only, no html5 

[pano file="my-pano/my-pano.swf"]
[pano file="my-pano/my-pano.swf" width="100%" height="500px"]
[pano f="my-pano/my-pano.swf" w="900" h="500"]
[pano file="my-pano/my-pano.swf" preview="my-pano/my-pano.jpg" width="900" height="500"]
to embed QTVR .mov panoramas as flash (no html5) 
(QTVR is automatically displayed with flash by Aldo Hoeben's CuTy, instructions here)
[pano file="my-pano/my-pano.mov"]
[pano file="my-pano/my-pano.mov" width="100%" height="500px"]
[pano f="my-pano/my-pano.swf" w="900" h="500"]
[pano file="my-pano/my-pano.mov" preview="my-pano/my-pano.jpg" width="900" height="500"]

Global Swf mode

Global Swf mode

PanoPress Global Swf mode allows you to use only one swf (+ optional iphone js) file for all the panoramas displayed on your site, which allows for easily updating the panorama display engine & javascript in one location, no need for separate swf + js alongside xml in every project folder

if using global swf mode, upload your krpano.swf + krpano.js files to your krpano upload directory.

use the krpano droplets to create swf & js files w embedded license (and embedded iphone js if desired as well), rename the created files to krpano.swf + krpano.js, set the folder in the PanoPress settings and upload the files via ftp

global swf mode only functions with xml embeds for krpano and flash panorama player

you will need to make sure all of your xml image, plugin and hotspot etc paths work with the specified global swf path, use something like the safari activity viewer to determine how your files are loading and fix your xml accordingly

QTVR files

PanoPress WordPress plugin QTVR

QTVR & CuTy

QTVR .mov files are displayed using flash (no HTML5) using Aldo Hoeben’s CuTy

to use QTVR .mov files with panopress you must download CuTy from this site –

http://fieldofview.com/projects/cuty

and install it in your panopress folder on your server like this

wp-content/plugins/panopress/flash/cuty.swf

WordPress does not allow us to include CuTy due to Cuty using a different license model than WordPress accepts for plugin included files

CuTy only works with single node cubic qtvr files with no hotspots etc, see the CuTy documentation for more info

Customize PanoPress with CSS

You can customize PanoPress appearance by using CSS.
(PanoPress 1.0.b1 and higher)

The CSS entry box located on PanoPress settings panel under advanced settings.

see this forum topic for examples
http://www.panopress.org/forums/topic/panopress-css-tips/

PanoPress CSS elements can be targeted by their class name:

Class name Description
.pp-embed the embedded panorama div
.pp-embed-content content (after loading)
.pp-embed-play the play button on preview image
.pp-embed-title panorama title
.pp-error error messages
.pb-box panobox (lightbox) window
.pb-loader animated loader icon
.pb-content panobox content (after loading)
.pb-close panobox close button
.pb-title panobox title
.pb-shadow panobox drop-shadow
.pb-background panobox background overlay
.pb-nav panobox navigation pips & arrows