How can I embed interactive photo panoramas on my site/blog?
I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've taken a bunch now. But when I include them on my Web page or blog, they're long and skinny and, frankly, not very interesting. On another site I saw they had an interactive photo where you could zoom in or pan around. Awesome. How do I do that with the photo panoramas on my own blog?
You're opening up quite a can of worms with this one, though I too have been very curious what you can actually do with some of these fascinating panoramic photos that people are starting to post online. Indeed, on one industry blog, I saw they predicted that panoramas were going to be The Next Big Thing now that there are millions of iPhone 5's in the wild. Not sure about that, but it's pretty cool to see a wide shot of a scenic spot, whether it be a room full of friends or the edge of the Grand Canyon or Yosemite Valley!
Problem is, I've seen the same thing: people are posting filmstrips, which isn't too surprising when the original resolution of an iPhone panorama is 8640 x 1894. I mean, scale it down so it's only 600 pixels wide and that leaves you with a height of 131 pixels. That ain't much.
Fortunately, there are a few interactive panorama hosting companies and while some require you use their own panoramic software to produce the image, others are perfectly happy hosting your images even if they were taken with the new iOS 6 photo app.
I tapped their service to upload and host the fullsize version of the panorama that I show at the end of the article you read, and at the end of this article, you'll be able to see it in its high res, zoomable, pan-able glory. It's pretty darn slick.
To start, take a panoramic picture, then upload it to your Mac or PC. Either will work. Now, sign up for an account on Dermandar and log in.
Now the fun begins...
Click on the green "Create Your Panorama" button and it'll ask what kind of image you're uploading:
iOS 6 lets you take about 270-degree panoramas, not a full 360-degree circle, so click on "Wide Angle" to proceed.
Dermandar will open up a file selection dialog. Go ahead and select the image you just downloaded off your iPhone, and...
AUUGGH! Turns out that the iPhone panoramic photos are a bit too wide for the service at this point. Possibly by the time you try this it'll be fixed, but in the meantime I just used GraphicConverter to open up the massive file and resize it horizontally to be 8191 pixels. Total elapsed time, maybe 20 seconds.
I again selected "Wide Angle" then specified the image file in question. Now we get a bit further!
As you can see, it offers a preview of the image and basically gives you the option of either restarting, which tosses this away, hiding the image, which, as far as I can tell, does the same thing, or uploading the image by clicking on the big "Upload" button in the middle. Take the latter option, and it'll prompt for some information about the photo:
I found the location feature way too hard so skipped it, but a title, a few tags, a description, are always good to help others find your image. Why not?
Finish up, and click "Upload" in the lower right corner.
It'll confirm the information you've filled in:
All looks good! Click on "Confirm" and the upload will start!
I'm skeptical that their servers are located in Lebanon because it's way too fast: My big image only took a few seconds to upload.
Once it's done you'll get this rather confusing dialog box:
Don't click on "Close"!! Instead, click on the first "here" to close and ensure that the image is actually saved on the server.
Now to find the panoramic photo so you can test it out with zoom and pan features, then, of course, find how to get the embed code so you can add it to your own site!
To do that, click on "My Account" on the top right.
From this menu, choose "My Panoramas" and you'll see a page with everything you've uploaded to their server:
Click on your newly uploaded photograph and it'll show you a lot of different information on a page that looks like it's been inspired by the latest YouTube interface. Which is good!
There's obviously a lot to see here and the photo can indeed be zoomed and panned, but let's get the embed code instead. Do that by clicking on "Embed", and...
Tweak the code to meet your needs and it's good to go. Just copy and paste into a page like this one and here's what's produced:
Pretty slick, actually. Now, try it: double click anywhere in the image to zoom in. Double click again to zoom back out. click and drag left or right to scroll around too. Amazing, isn't it?
It's an admittedly complicated process with third party apps involved in resizing and lots of steps needed to host and list your panoramic photo, so you're probably not going to post a half-dozen of these every day. But when you do have one of these cool panoramas on your iPhone? Now you know exactly how to embed it as an interactive image on your own Web page or blog!
✔ How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....✔ Can I embed a Facebook search box on my blog site?
I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...✔ Can I use CSS for drop shadows on my blog?
I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....✔ How can I embed interactive photo panoramas on my site/blog?
I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...✔ How can I create a Twitter search URL shortcut?
I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...
Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
I do have a comment, now that you mention it!
Check This Out Too...
Look for Answers
All Our Categories
Apple iPad Help
Articles and Reviews
Auctions and Online Shopping
Blogs and Blogging
Building Web Site Traffic
Business and Management
Computer and Internet Basics
d) None of the Above
Google Gmail Help
Google Plus Help
Industry News and Trade Shows
iPhone and Cell Phone Help
iPod, Sony PSP and MP3 Player Help
Kindle Fire Help
Mac OS X Help
Pay Per Click (PPC) Advertising
Search Engine Optimization (SEO)
Shell Script Programming
Tech Support Video Help
The Writing Business
Twitter, LinkedIn and Social Network Help
Unix and Linux Help
Video Game Tips and Help
Windows PC Help
Find Me on Google+
ADT on G+