You are not logged in.

KRPano Wordpress Shortcode Plugin 2011 - iPhone/iPad Compatible

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

  • 1
  • 2

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 110

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

1

Friday, January 21st 2011, 4:10pm

KRPano Wordpress Shortcode Plugin 2011 - iPhone/iPad Compatible

03/2011 - this plugin is now updated to a new version: PanoPress

see this thread for more info - PanoPress - Wordpress plugin for 360° Panoramas w flash & html5

- - - - -

this is an update of my previous KRPano wordpress shortcode, the shortcode is now installed as a wordpress plugin, i have added some minor changes & fixes, and included support for iphone/ipad html 5 pano display

see my site for examples of panoramas embedded with this shortcode - http://www.samrohn.com

new - thanks to omer calev this code is now installed as a wordpress plugin, no more editing your themes functions.php :)

this code is for displaying individual krpano panoramas using a common xml file (not multi-pano tours or other per-pano custom xml) on a wordpress site

if you wish to embed multi-pano virtual tours, see the existing krpano wordpress plugin, or just link to the tours html page in an iframe or lightbox clone

this shortcode relies on a specific file structure to work, and is best suited to a site with many individual panos, all panos are displayed with a single krpano.swf & a single xml file, so this all lets you easily post new panos to your site without worrying about creating new xml files, and also allows you to easily update the krpano engine, nav buttons & other common xml, etc without having to remake every pano

The Shortcode -

the shortcode is used by putting text like this into a post -

[krpano file="pano-file-name" title="Panorama Title"]

"pano-file-name" should be the name of your pano image files, it would be "apple" for the files illustrated below, title can be whatever you wish

for the files in the illustration, the code would be like this [krpano file="apple" title="Apple Store 5 Ave - NYC"]

and the result would be a post something like this - http://www.samrohn.com/360-panorama/apple-store-manhattan/

pano files are added by uploading the pano qtvr.mov + images for iphone & preview to a directory as illustrated below

File Structure -

set up your files & directories like this inside wp-content -


apple.mov is the file displayed by krpano.swf, code could be altered to use all cube faces & no mov file if you wish
apple.jpg is the preview image displayed in your post, clicking on it opens the pano in a new window, but the code could be altered to embed in iframe, etc
apple_ipad_b.jpg etc are the images used by iOS devices, they should be named like in the directory image above, i use a pano2vr droplet to quickly prepare these files from a finished pano

XML File -

create your own xml file called pano.xml, upload as above, this is to define nav buttons, menu items, or other elements which will be common to all panos displayed, but do not specify any pano images in the xml as they wil be specified by the shortcode

The Shortcode Plugin -

create a new file called krpano-shortcode.php, paste in the following code, and upload it to your wordpress installs plugins directory, then go to your wordpress admin plugin page and activate the plugin called KRPano Wordpress Shortcode

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php
/*
Plugin Name: KRPano Wordpress Shortcode
Plugin URI: http://krpano.com/forum/wbb/index.php?page=Thread&threadID=4246
Description: Embed KRPano flash & iphone/ipad panoramas in wordpress
Version: 0.3
Author: Sam Rohn
Author URI: http://www.samrohn.com
*/
// KRPANO SHORTCODE 2011
// usage: [krpano file="pano-name" title="Pano Title"] 
function panorama($attributes, $content='') {
extract(shortcode_atts(array(
'file' => '',
'title' => ''
), $attributes));

return '<div><a href="'.get_bloginfo('url').'/wp-content/panorama/pano.php?pano='.$file.'&title='.$title.'" title="'.$title.'" target="_blank" rel="" class="">
<img class="pano" src="'.get_bloginfo('url').'/wp-content/panorama/pano/'.$file.'/'.$file.'.jpg" alt="'.$title.'"/></a></div>
<div align="center"><p>Click on Image to view 360° Panorama of '.$title.'</p></div>';
}
// END KRPANO SHORTCODE 
add_shortcode(krpano, 'panorama');
?>


feel free to alter the returned html on lines 19-21 to suite your site, the code here will open the pano in a new window, this can be used with various lightbox clones by setting the rel="" attribute on line 19

pano.php -

create the file pano.php and insert the following code, upload as shown in the file structure image

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<html>
<head>
<title><?php echo $_GET['title']; ?></title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<style>
body{ font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; background-color:#111111; margin:0; padding:0; }
* html, * html body{ overflow: hidden; }
a{ color:#AAAAAA; text-decoration:underline; }
a:hover{ color:#FFFFFF; text-decoration:underline; }
</style>
</head>
<body>

<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="inc/swfkrpano.js"></script>

<script type="text/javascript">

	var swf = createswf("inc/krpano.swf", "krpanoSWFObject", "100%", "100%");
	swf.addVariable("xml", "pano.xml");
	swf.addVariable("qtvr", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>.mov");
	swf.addVariable("setview", "true");
		
	swf.addVariable("image.mobile.left.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_iphone_l.jpg");
	swf.addVariable("image.mobile.front.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_iphone_f.jpg");
	swf.addVariable("image.mobile.right.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_iphone_r.jpg");
	swf.addVariable("image.mobile.back.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_iphone_b.jpg");
	swf.addVariable("image.mobile.up.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_iphone_u.jpg");
	swf.addVariable("image.mobile.down.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_iphone_d.jpg");
		
	swf.addVariable("image.tablet.left.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_ipad_l.jpg");
	swf.addVariable("image.tablet.front.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_ipad_f.jpg");
	swf.addVariable("image.tablet.right.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_ipad_r.jpg");
	swf.addVariable("image.tablet.back.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_ipad_b.jpg");
	swf.addVariable("image.tablet.up.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_ipad_u.jpg");
	swf.addVariable("image.tablet.down.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_ipad_d.jpg");
	
	swf.addParam("allowFullScreen","true");
        swf.addParam("wmode","transparent");
	
	swf.embed("krpanoDIV");

</script>

</body>
</html>


boom, thats it, upload some pano image files, enter the shortcode in a post, hit publish :)

this is all tested and working on a brand new install of wordpress 3.0.4 & using KRPano 1.0.8.12 w current swfkrpano.js & krpanoiphone.js

thanks to michel, omer calev & tom mills for some of the new code included here :)

see the previous shortcode thread for more notes on usage & modifications - KRPano Wordpress Shortcode 2010

sam
Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

This post has been edited 31 times, last edit by "Sam Rohn" (Mar 16th 2011, 9:49am)

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 110

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

2

Saturday, January 22nd 2011, 4:21am

the shortcode is now installed as a wordpress plugin, no more editing functions.php, thanks to omer calev for helping with the plugin code :)

sam
Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

VN2009

Professional

Posts: 1,336

Location: Duluth MN

  • Send private message

3

Saturday, January 22nd 2011, 5:14am

sam just an FYI you site does not load correctly in IE8. I have to put it in IE7 compatablilty mode for it to be right. THought you might want to test.

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 110

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

4

Saturday, January 22nd 2011, 6:14am

hm, thanks, i'm on a mac myself, guess i need to reinstall parallels or somesuch for IE testing, again...

unlikely this has anything to do with the shortcode though, its probably my sloppy theme coding...

sam
Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Stoney

Trainee

Posts: 119

Location: Portland, Oregon

  • Send private message

5

Saturday, January 22nd 2011, 10:55am

Hey Sam, http://www.samrohn.com is working well using IE 9 Beta. Let me know if there is something I can test for you.

badders

Beginner

Posts: 4

Location: East Kilbride

Occupation: Managing Director

  • Send private message

6

Saturday, January 22nd 2011, 2:44pm

Sam, can you explain the reason for the source pano being a qtvr .mov file format? i.e. what's the benefit over using say an equirectangular jpeg?

Badders
Andrew Baddeley
www.360tacticalvr.com
http://stores.ebay.co.k/360tacticalvr

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 110

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

7

Sunday, January 23rd 2011, 12:23am

hey andrew -

2 reasons, 1st is that i originally had a large existing collection of qtvr files on my site already, and i wanted to convert my site to flash without too much hassle, and 2nd reason is that krpano lets you use qtvr mov files with the the opening view set inside the qtvr file (preview pano too), so i dont have to set initial pan/tilt/zoom etc per pano in each instance of the shortcode, but the shortcode could be easily expanded to accept these other variables...

qtvr or cube face also give better quality than a single equirectangular file when displayed via krpano, using a single equi results in some odd zenith/nadir distortion

it would be easy to change the code to use all cube faces or a single equi, i can post a modified all cube face jpg (no mov files) version if desired

i'd love to hear other suggestions too :)

stoney, thanks for the offer, i need to look over my sites css and whatnot & figure out whats going on, but feel free to test the shortcode :)

sam
Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

This post has been edited 7 times, last edit by "Sam Rohn" (Jan 23rd 2011, 3:14am)

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 110

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

8

Saturday, January 29th 2011, 10:30am

krpano wordress plugin 2011 - new version testing

hi all -

i'm working on a new version of the plugin that uses a single plugin file, no more separate pano.php

this new version also works with standard output from the krpano multi-res & vtour droplets, so no more of my odd file structure, no more qtvr .mov files, etc

it also embeds panos directly in page with a proper krpano.js div embed or optionally in a hidden div for lightbox clones, so it should display properly in all browsers, from IE to iPad :)

im also working on a page to demonstrate the code & embedded output exactly, as the code on samrohn.com is actually a bit different than the more generic version that the plugin uses

i pretty much have all of this working now, but i would like to do some testing with others before i release to the general public

please post here or send me a PM if you wish to help test it out, thanks :)

sam
Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

lcne

Beginner

Posts: 4

Location: Denmark

  • Send private message

9

Saturday, January 29th 2011, 7:48pm

Testing the shortcode plugin

Hi Sam,
I am testing my new site based on Wordpress, so I am willing and able to test your new plugin.

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 110

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

10

Wednesday, February 2nd 2011, 7:03pm

hi icne - the plugin is currently being re-written from the ground up by a proper experienced coder, and should be relaunched in the next week, stay tuned...

sam
Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

This post has been edited 1 times, last edit by "Sam Rohn" (Feb 3rd 2011, 9:18am)

Briger

Beginner

Posts: 5

  • Send private message

11

Friday, February 18th 2011, 5:29am

any news?

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 110

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

12

Friday, February 18th 2011, 6:14am

hi briger -

sorry for the delay, we are very close to releasing the new plugin, and we need people to test it in different environments to make sure everything is working properly for all

if you or anyone else is interested in testing the beta and providing feedback, please send me a pm, and i will get you on the (not yet public) plugin site

sam
Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Briger

Beginner

Posts: 5

  • Send private message

13

Wednesday, February 23rd 2011, 8:33am

I send you a PN

Pat

junglejuz

Beginner

Posts: 10

  • Send private message

14

Thursday, February 24th 2011, 3:50pm

Thanks for your great plugin. I've got it working except for one thing. I can't seem to get the panorama to open to use in my Lightbox clone. I am using Fancybox and have adjusted the rel"" attribute as per your instructions..

I've typed rel="fancybox" and it seems to have no effect. Could this be because fancybox might not support video (.mov) files? I have also tried z-lightview, and changing the code to rel="z-lightview", but still nothing happens.

Could you please help me. I'm quite new at this and would really love to get this working.

Justin

junglejuz

Beginner

Posts: 10

  • Send private message

15

Friday, February 25th 2011, 3:43am

A quick update. I tried adding class="fancybox" and this seems to open the fancybox when I now click on the Panorama. However nothing appears in the lightbox. It is blank and it is also only the size of the preview image. Any advice or assistance would be most appreciated.

Justin

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 110

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

16

Friday, February 25th 2011, 4:38am

hi justin -

i havent tried fancybox personally, but check the code below for exaample of proper usage,
& see the fancybox docs for more info - http://fancybox.net/howto

Source code

 
1
2
3

fancybox iframe usage -

<a class="iframe" href="http://www.example">This goes to iframe</a>



lightview should work fine w class="lightview" rel="iframe", again, see the lightview docs for usage details - http://www.nickstakenburg.com/projects/lightview/

otherwise, i am just writing up the documentation for the new plugin which i will release this weekend, promise :)

sam
Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

This post has been edited 3 times, last edit by "Sam Rohn" (Mar 9th 2011, 10:59pm)

bpc94609

Beginner

Posts: 25

  • Send private message

17

Friday, February 25th 2011, 6:47pm

Yes please!

Keep us posted!

*smile*

bpc94609

Beginner

Posts: 25

  • Send private message

18

Tuesday, March 1st 2011, 12:12am

Any news? :)

Woot! I'm excited! :)

junglejuz

Beginner

Posts: 10

  • Send private message

19

Tuesday, March 1st 2011, 1:07pm

Thanks for your suggestion, however my understanding of how to use this code is practically zero. Is there a possibility you might be able to give me a quick run down on what to do? I'd be most grateful.

regards,


Justin

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 110

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

20

Wednesday, March 2nd 2011, 6:36am

krpano wordpress plugin - PanoPress

hi justin -

look at the end of line 18 of the plugin, the blank rel="" & class="" , for lightview you could change it to rel="iframe" class="lightview" etc, check the docs for specifics with other clones, just keep reading it over and over and it eventually begins to make sense :)

otherwise

the NEW plugin is basically ready at this point, i am a bit behind on the documentation, the website is incomplete, but, for those who just cant wait -

http://www.panopress.org/

PanoPress will display panos created by the krpano tools droplets, works fine with multires, vtours, iphone, single-swf, etc

the xml generated by the droplets default config might need some path adjustments if using a global krpano swf & js file to display your panos, you can also choose to just have a separate swf + js in every pano folder and no adjustments should be needed, and of course its not an issue w single-swf panos

ill be making a more formal announcement shortly, once the site is a bit more presentable...

sam
Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org
  • 1
  • 2

Similar threads