You are not logged in.

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.

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 109

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

1

Wednesday, October 6th 2010, 12:00pm

KRPano Wordpress Shortcode 2010 (old)

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

Jan 2011 - this code has been updated to a new version with iphone/ipad support, go here for the new code

this shortcode allows easy adding of individual krpano panoramas (not multi-pano tours) to a wordpress site by uploading 2 files, pano-name.jpg for a preview image & pano-name.mov for pano display via krpano.swf

the shortcode is used like this - [krpano file="pano-file-name" title="Panorama Title"]

all pano images are displayed using a single pano.php & a single pano.xml file, as the pano file name is specified in the shortcode and passed as a php var to the pano.php file for display

the "file" parameter is the name of the pano you wish to display, and these files should be named identically like apple.mov & apple.jpg - these files are uploaded via ftp as in the image below

or you could change your wordpress settings to allow upload directly to the pano folder via the wordpress post media upload box, make sure to turn off "organize files by date"

this will result in the jpg file being displayed on your wordpress page, and clicking on this jpg will open a page displaying the .mov file via krpano - the link is set to target="_blank" so the pano page will open in a new window, or you could change this to use one of the various lightbox clones, as i do on my site

here is an example of the result on my site - http://www.samrohn.com/360-panorama/audubon-terrace-nyc/

first, set up your directories inside wp-content like this -



pano.xml is your custom xml file which will be common to all panos, use this for nav buttons etc, but pano images will be specified by the shortcode, do not add them to the xml

create a new text file, name it pano.php, paste in the following and upload it to the directory you created earlier

this file will receive the file name var from the shortcode, and insert it into the qtvr .mov file name on line 19

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
<html>
<head>
<title>panorama</title>
<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/><b/r></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']; ?>.mov");
	swf.addVariable("setview", "true");
	swf.addVariable("progress.showwait", "none");
	swf.addVariable("progress.showload", "none");
	swf.embed("krpanoDIV");
</script>

</body>
</html>


then paste the following code into your wordpress installations functions.php file just after the opening <?php tag

note the " pano.php?pano='.$file.' " bit on line 11, this feeds the pano filename as a php var to the pano.php file

also note the target="blank" & empty class="" element on the same line, these can be altered to suit your site

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// KRPANO SHORTCODE 
// Sam Rohn http://www.samrohn.com
// 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.'" target="_blank" class="">
	<img class="pano" src="'.get_bloginfo('url').'/wp-content/panorama/pano/'.$file.'.jpg" alt="'.$title.'"/></a></div>
	<div align="center"><p>Click on Image to view 360° VR Panorama of '.$title.'</p></div>';
}
add_shortcode(krpano, 'panorama');

// END KRPANO SHORTCODE 


boom, thats it :)

adding other vars like pan tilt & zoom or custom xml per pano to all this is pretty simple

this works with the latest wordpress 3.0.1 & krpano 1.0.8.11 + swfkrpano.js

i still need to figure out iphone/ipad integration, thats up next -

enjoy :)

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 33 times, last edit by "Sam Rohn" (Aug 27th 2012, 10:32am)


Tuur

Sage

Posts: 3,113

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

2

Wednesday, October 6th 2010, 12:04pm

Great Sam,

a lot of people gonna love this.

Thanx for the input!!!

Cheers,

Tuur *thumbsup*

PS: not finished yet.. http://www.virtualtuur.com/tzigane/NY_TL/
http://www.virtualtuur.com
Skype:studiotuur

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 109

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

3

Wednesday, October 6th 2010, 12:28pm

thanks, i was previously using 3 separate wordpress plugins to accomplish this, and the existing wp-krpano plugin did not exactly suit my needs -

i still need to figure out how to specify the iphone/ipad images in the swf.addVariable section of the pano.php file, any idea how to specify child nodes in javascript ?

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

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 109

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

4

Thursday, November 11th 2010, 6:19am

i was asked a question about this code via PM, much better to ask in this thread so that others may benefit from the answers etc, please post any questions about this code here rather than PM or email - thanks :)

Quoted

I just picked up a copy of KRPano and thought I would take a try at your shortcode tutorial and I'm a bit stuck. Hope you don't mind helping out, I'm not so fluent with and serious coding, but I get the logic.

So far I have created 3 directories: panorama, pano and inc

Inside of Panorama I have the "inc" and "pano" directories, and two loose files: pano.php (copied content from your post), and ?????pano.xml???? where do I get this?

Inside of the inc directory I have placed the the example.jpg, example.mov files I created in Pano2VR.

Inside of the pano folder, I have put my krpano.license, and swfkrpano.js (from my copy of KRPano), and ?????krpano.swf???? I tried the one found in Panotools folder?

I found the location of my wordpress installations functions.php but when trying to add the code you suggest to add to the functions.php file, it breaks the installation due to this line

add_shortcode(krpano, 'panorama');

I guess there are three main things I don't understand. 1) where the pano.xml file comes from or what it should contain. 2) the proper edit procedures to the functions.php file (3) in the beginning of your post, you state "the shortcode is used like this - [krpano file="pano-name" title="Panorama Title"]" yet I'm not sure where I should use this code??

I am using a Wordpress installation that I don't care much about so I can rip and tear at it!!


some proficiency with using & coding krpano & customizing wordpress etc is probably required for making this work, prob a good idea to go through some basic tutorials on setting up the krpano xml file and customizing wordpress functions.php to start

the pano.xml file is for defining startup parameters, nav buttons, etc, see the krpano documentation for info on how to create the xml file

krpano.swf is part of the standard krpano install that you downloaded form this site

editing a wordpress functions.php file requires putting the code in the proper place in the file, that is inside the php tags, and not inside another function, else these other functions might cause conflicts, i havent tested this out on any site but my own, but you might also want to start by disabling any plugins that might cause a conflict, test with a simple theme, etc

look through some other themes function.php for examples on correct code placement, search google for tutorials, i'm self taught with all this stuff, so i don't really know what the "rules" are, but if you post your functions.php code to this thread ill have a look

the shortcode is just text inserted into a post, nothing fancy there

btw, ive updated this code to work with iphone js, it is working on my site now, but i want to check it with the new krpano 1.0.8.12 iphone code before posting the update here...

there is also the wordpress krpano plugin which is much simpler to use, and may better suit your needs, but it is not as easily customized as 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 5 times, last edit by "Sam Rohn" (Nov 11th 2010, 7:51am)


5

Thursday, November 11th 2010, 4:30pm

NT, bookmarked for later reference.

tommo77funk

Intermediate

Posts: 153

Location: London

Occupation: Photographer

  • Send private message

6

Wednesday, November 17th 2010, 6:23pm

Hi Sam,

This is really helpful, thanks :) I too am self taught - so kudos respect for this great code.

I adjusted it a bit more to fit my needs, which was to have the panorama fit in the post, rather than a page that is linked too. I just changed functions code

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// KRPANO SHORTCODE 
// Sam Rohn http://www.samrohn.com
// usage: [krpano file="pano-name" title="Pano Title"] 

function panorama($attributes, $content='') {
	extract(shortcode_atts(array(
		'file' => '',
		'title' => ''
	), $attributes));

	return '<div id="test"><iframe src="'.get_bloginfo('url').'/wp-content/panorama/pano.php?pano='.$file.'"  marginheight="0" width="100%" height="100%" marginwidth="0" frameborder="0" class="iframe" scrolling="no"></iframe>
</div>
';
}
add_shortcode(krpano, 'panorama');


// END KRPANO SHORTCODE



and adjusted the pano.php too, as dropdown menus were appearing under the pano, and fullscreen would not work - I just added this bit

Source code

1
2
    swf.addParam("allowFullScreen","true");
    swf.addParam("wmode","transparent");


Please let us know when you have an iphone solution - i am not sure how it would work cos this system relies on uploading MOV files.

Anyway thanks again for great code implementation for WP.

best,

tom

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 109

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

7

Saturday, November 20th 2010, 1:59am

krpano wordpress shortcode w/ iphone support PREVIEW

hey tom, thanks for verifying that this in working for others :)

yep, i had to break out the cube faces for iphone, i suppose they could be auto extracted from movs somehow, i like the movs opening at a specific view without coding the pan/tilt/zoom per pano, but for now, this works :)

and sorry for the delay, i've been a little busy lately so i haven't had time to prepare a proper new post with complete instructions, and i'm still working out a few different ideas, playing w dynamic xml, fb embedding, etc, plus need to make sure code is compatible w latest krpano 1.0.8.12 update features...

anyway, add this code into the pano.php file, you will also of course need to add the krpano iphone js & license files to your site, etc, note that the path structure is now slightly different than the original code

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
in head section add this  -

	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />


add these to swf vars -

	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");


have fun, let me know if this is working ok for you

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 2 times, last edit by "Sam Rohn" (Nov 20th 2010, 4:35am)


elcaze

Beginner

Posts: 1

Location: France

Occupation: Journalism, photography, webmastering

  • Send private message

8

Saturday, November 27th 2010, 11:18am

Thanks so much, Sam ! Brilliant Work !!!

9

Wednesday, December 1st 2010, 3:02pm

Hello,

Sam (or someone else *smile* ), can you tell me exactly how to get the .mov file?
Thank you for this help.
Regards.
Boris.

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 109

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

10

Thursday, December 2nd 2010, 9:56pm

hi boris -

this is just a standard qtvr .mov file, this can be exported from ptgui, pano2vr, etc

search the krpano docs for more info on qtvr support

the code could easily be altered to support cube face files or other formats as well, similar to the iphone code i posted above

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

11

Friday, December 3rd 2010, 9:24am

Hi sam,

Thank you for your answer.
In fact I have already a virtual tour made with Vtour droplet and I would like to embed this tour in wordpress and also it works on Ipad.
I am not used to code, so if you could give me some ideas it would be great...
Regards.
Boris.

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 109

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

12

Sunday, December 5th 2010, 7:20am

this code is made for embedding individual panos, not tours, although it could be modified to do so by someone so inclined -

the easiest solution for embedding your tour in a wp page is probably just using an iframe or lightbox overlay to call a static page with the tour, search the forum for more info on these terms

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

13

Friday, January 7th 2011, 5:25pm

Hello Sam,

I success to embed a virtual tour made with Vtour drople (so not a .mov but a .swf), but now I would like to embed several tours ( in differents posts). But for every tour I want to embed it is always the same xml loaded, so it is always the same tour I can see for all the posts. How can I load different XML with your Wordpress Shortcode?
Thank you for your help.
Regards.
Boris.

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 109

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

14

Wednesday, January 12th 2011, 3:15pm

hi boris

to add a new value to the shortcode, you would need to alter the shortcode something like below

note - this is untested code, and is basically just an example of how to add a new value to the shortcode

the new XML shortcode in your post would look like this -

Quoted

[krpano file="pano-file-name" title="Panorama Title" xml="path/my-custom-xml.xml"]


and something like this in your functions.php -

Quoted

// KRPANO XML SHORTCODE TEST
// Sam Rohn http://www.samrohn.com
// usage: [krpano file="pano-name" title="Pano Title"]

function panorama($attributes, $content='') {
extract(shortcode_atts(array(
'file' => '',
'title' => ''
'xml' => 'my-default-xml.xml'
), $attributes));

return '<div id="test"><iframe src="'.get_bloginfo('url').'/wp-content/panorama/pano.php?pano='.$file.'&xml='.$xml.'" marginheight="0" width="100%" height="100%" marginwidth="0" frameborder="0" class="iframe" scrolling="no"></iframe>
</div>
';
}
add_shortcode(krpano, 'panorama');


// END KRPANO XML SHORTCODE TEST


in pano.php, change line 18 to

Quoted

swf.addVariable("xml", "<?php echo $_GET['xml']; ?>");


note the changed bits in red about XML, if no value for xml='' is specified in the posted shortcode, the default will be used - you will probably need to further alter the pano.php template and/or otherwise alter the returned html within the shortcode to display your tour as you wish, and probably tweak this code a bit to make it work with your set up, a lot of that depends on your sites file structure...

sorry, i don't really work with tours & this is untested code, but it should get you going in the right direction, good luck :)

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 12 times, last edit by "Sam Rohn" (Jan 13th 2011, 4:01am)


15

Thursday, January 20th 2011, 4:37pm

Hi Sam,

If I leave this code fragment: add_shortcode(krpano, 'panorama'); outside of the close function bracket in the functions.php file my entire WP site is blank. Any suggestions ?

Matthew Rogers
360Precision
http://www.360precision.com

tommo77funk

Intermediate

Posts: 153

Location: London

Occupation: Photographer

  • Send private message

16

Thursday, January 20th 2011, 6:34pm

Hi Mathew,

Yes, take it out. Shortcode is meant for post admin description box only. You can use in other template files but not the functions.php that will result in a blank screen for sure.

If you want to hard code into your single.php come back and I will try help for that.

best,

tom

Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 109

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

17

Thursday, January 20th 2011, 6:49pm

hi matt -

i kind of hobbled this together without a real understanding of proper coding, but the function may be conflicting with another function in your file, or you may have accidentally copied some invisible character mucking up the code, etc

have you tried inserting the entire block at a different point in your functions.php ?

have you tried it with a different theme ?

also make sure to disable the wp krpano plugin if you are using it, it may cause a conflict

let me know if you cant get it working, we'll get it sorted -

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" (Jan 20th 2011, 7:10pm)


Sam Rohn

Trainee

  • "Sam Rohn" started this thread

Posts: 109

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

18

Thursday, January 20th 2011, 6:53pm

hmm, crosspost w tom, now i'm confused -

i think matt was having probs w the code for functions.php ?

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

tommo77funk

Intermediate

Posts: 153

Location: London

Occupation: Photographer

  • Send private message

19

Thursday, January 20th 2011, 7:19pm

oh I see, yeah sorry I thought he was talking about this [krpano file="pano-name" title="Pano Title"] - loooong day :)

Matthew: do as sam, says - something has broken there, sorry for confusion

best,

tom

20

Thursday, January 20th 2011, 7:20pm

As a C++ and Coldfusion programmer I've not got my head around the PHP/WP set-up yet.

If I remove the add_shortcode line then the page simply outputs the the shortcode as text. I understand what the function is doing but I don't see where it goes and why it actually works where Sam has it ?

Having it outside of the fucntion on the functions.php makes no sense neither does removing it. It has to go somewhere for the shortcode to actually work.

Matthew Rogers
360Precision
http://www.360precision.com