How to embed 360 degree Ricoh Theta S images into WordPress
After I got Ricoh’s Theta S 360 degree spherical camera I’m eager to test the ability to embed the images into my wordpress blog. It would be awesome to capture 360 degree scenery alongside the images I make on my travels.
A huge amount of websites run on WordPress and 360 degree images are becoming more and more common. Below are the steps I made to embed a 360 degree image in a WordPress post
360 degree cooking with the Theta S 😉 - Spherical Image - RICOH THETA
The first thing I did was to install the Code Embed Plugin
Go to the Ricoh Theta website where your original image (theta S or theta SC) is stored and click on the Embed button for the code.
At the bottom of your new page there should be the option to add extra fields.
Make a new field named “CODE1” and paste the code from Ricoh’s website into this value.
To get the image to display you just need to pop in the shortcode into a text box.
Simple as that!
Another option is to load the images onto your own drive and use the WordPress plugin called Cardboard
Ricoh Theta (S) Images will be hosted on your own site AND can be viewed full screen on your wordpress site. (See below, me and a Pentax K-1 full frame in the field)
(Currently full frame is not supported anymore due to various wordpress updates).
A new kid on the block is a new plug-in WP-VR-View
This seems to give even better results. Disadvantage is that it isn’t completely integrated with the Media Library. Rather than just clicking on an item, you have to look up the full URL of the image and paste it into a dialog. The advantage of this is that you can embed both images from your blog’s Media Library *and* external 360° images.
Button to add VR image
tornadolphin
No full-screen option with this code though unless you view directly on Theta’s website. Any workaround on this?
Mike Muizebelt
Not from the Theta site as far as I know. For movies you may want to upload to Youtube and use one of the Youtube plugins that are available for wordpress.
Mike Muizebelt
Blog post is updated and a full-screen option is added!
Paul Kirtley
Seems simple enough, but I was not aware that my images were being stored on a Theta website. I know they are on my computer…just looking for simple step-by-step instructions on how to get them, features and all, on to a WordPress site. Thanks!
Mike Muizebelt
Hi Paul,
I just updated the post with a new possibility. You can now upload the image to your own wordpress website and make it available as a 360 degree image by means of a plugin called “cardboard”.
This should help you out I think as it allows the image to be viewed full screen
Francis
No fullscreen here using the Theta site. Another option we are using is to upload it to https://seekbeak.com and use their embed code. Then you get fullscreen, phone accelerometer navigation and hotspots too.
Mike Muizebelt
Indeed Francis, though the Theta site no full screen, but with the Cardboard plugin you do. Benefit for some that the images are hosted on your own domain. And of course it’s free….
Thanks for your (beta/paid) suggestion!
Phil
hmm, not seeing the extra field area after instilling the plugin. Any help?
Mike Muizebelt
Hi Phil,
First idea that comes to mind is: Did you activate the plugin?
Meghann
What about getting an embed code via iPad? I don’t travel w my computer and I can’t seem to get embed code when using my iPad – have tried on both safari and chrome. Any thoughts?
Mike Muizebelt
Hi Meghan,
I don’t own an ipad so I’m afraid I can’t help you out there!
Gimmy
Cardboard full screen feature worked for me for a while and then it stopped working. I cannot see full screen with your picture either. 🙁
Mike Muizebelt
Unfortunately the same is true for me. There seem to be compatibility issues
Jake Redman
Cardboard full screen seems to take me to an empty page. Any workaround for this?
Mike Muizebelt
At the moment not I’m afraid, it seems the cardboard plug-in is no longer functioning under the new WordPress version. Let’s hope for an update!