Virtual Reality and 360 degree photos have taken the world by a storm in 2016. We have seen flood of 360 degree photos and videos on Facebook and YouTube. You must be one of those wondering how can I add 360 photo to website. Or may be you want to know an easier option of doing the same without uploading your 360 videos and photos to some third party site. You have come to the right place. Today we will show you, how to add 360 photo to website or blog. As we at VRCherries always do, this will be the easiest that you have seen.
Do you want to add 360 photo to website as shown below?
Impressive, isn’t it? Well, it can be done in 5 minutes flat with zero technical knowledge of Virtual Reality. Using the following method you can easily add 360 photo to website.
Create a website or enhance your existing website to host a gallery of 360 photos and videos, sorted by various categories and menus using these simple steps.
However, you may want to update or refresh on the followings before we add 360 photo to website or blog.
Relevant Read: What is Virtual Reality?
Relevant Read: How to Capture 360 Photo Using Smartphone?
What you need to add 360 photo on website?
- A 360 degree photo or video captured using Streetview or similar app or using a 360 degree camera
- WordPress hosted site.
In this post, we consider WordPress sites. WordPress is the most popular and easy to use CMS. By some estimate, it powers 25% of websites across the world. Hence, we thought of taking this as the first example. There will be posts in future that will discuss how to add 360 photo to website. Those posts will be little bit more technical in nature. So let’s get started on how to add 360 photo to website, as well as 360 videos.
Check Compatibility for Virtual Reality and 360 photos
Currently, 360 photos/videos are supported only by certain versions of the browsers. If you are viewing it on mobile, you need to check if it has Gyroscope and Accelerometer as the least. We have already explained the compatibility in our earlier post on What is Virtual Reality?
Following versions of browsers support immersive experiences.
- Chrome on Windows, Android, iOS, Mac OSX and Linux
- Safari for iOS, Mac OSX
- Firebox for Windows, Linux and Mac OSX
- Internet Explorer 11 and Edge on Windows
When viewing it on desktop versions, you will not get complete immersive or cardboard experience but simply a 360 degree panoramic view. You can drag the image with your mouse and view the panorama from all angles.
Steps to follow to add 360 photo to website.
Install and Activate the WP-VR-VIEW Plugin.
Before you start using the WP-VR-VIEW plugin, make sure that the 360 degree photo or video is uploaded in your media library.
Go to Media Library and select the uploaded 360 degree photo to view the details. Once opened, copy the image URL. You will need it when you want to use the WP-VR-VIEW plugin.
Next is to add a new post. Go to New–> Post. If you have successfully installed the WP-VR-VIEW plugin, you will see the following new icons in your toolbar. One is for the VR or 360 degree photo and the other for 360 degree video files.
For this post we have already added a 360 degree photo. Let’s continue with that. Add the details as shown in the picture below and click Insert.
It will add a small code related to the plugin WP-VR-VIEW that we installed earlier. Hit preview and your first post of 360 photo to website is ready to be viewed.
This is how it appears once you follow the above process.
You can click on the small square in the bottom-right corner to make it full screen. When viewed on a VR Compatible mobile, you will see a small cardboard icon.
Click on it. Turn your mobile to landscape mode/horizontal and your first Google Cardboard ready Virtual Reality view is ready.
So, if you want to create a web page with a gallery of 360 degree photos and videos, you can do it without any technical knowledge. Finally, I would love to see if you could add 360 photo to website that you own using above method.
Stay tuned as we explain in our next post how to create Virtual Reality app for Android as well as iOS in a day?
Until next time….