Embed 360-degree photos and videos in WordPress sites

Instructions: Install VR in Wordpress

The recordings from 360-degree cameras are fascinating. Of course one would like to show such photographs to the rest of the world. But how can you take 360-degree photographs, for example with the Insta360 OneX in a WordPress post or in a WordPress site. I explain exactly how this works in this guide.

Example of a 360 degree photo that I took with my Insta360 One X (Photo: Sir Apfelot).

Example of a 360 degree photo that I took with my Insta360 OneX (Photo: Sir Apfelot).

A photo like the one shown above is basically the starting material for a 360-degree panorama. So that this is not displayed as a simple graphic, but as a VR image that you can view with your Mac, iPad or iPhone in VR mode, you need a bit of programming code, which you can easily integrate with a plugin. That means, you just insert a shortcut in the post and the plugin tinkers the appropriate code from it so that you get the 360-degree VR view in the browser.

A reader wrote to me that I should include a 360-degree picture further up so that one has something to look at. Here we go:

[dimage url = "https://www.sir-apfelot.de/wp-content/uploads/2019/03/beispiel-360-grad-foto-2.jpg" control = true auto-rotate = false zoom_level = " 0 ″ anim_speed = "- 1 ″ default-position =" 180 ″ allow_scroll_to_zoom = false]

Dimage 360 ​​Plugin GDPR Compatible?

A reader asked me today whether the Dimage 360 ​​plugin can be used if you want to comply with the GDPR. She has concerns that data could flow to third parties as a result of the integration.

I'm not a lawyer and I'm not a security researcher either. For this reason I cannot make a legally binding statement here. What I see in the source code: The integration is not done via iframe, as you know it from YouTube, but takes place locally on your own server.

However, a Javascript is called, which is also part of the plug-in, which takes over the control and display of the panorama. It could theoretically be that data is being sent to third parties at some point here, but I think that is relatively unlikely.

Which plugin should I use?

I have found various plugins that help to integrate a 360-degree panorama into WordPress. Here are the top candidates I've identified:

  • WP VR View from Alexander Tumanov: Definitely easy to use, but no zoom function and small dropouts when used with my iPhone. Last update 7 months ago… Still an advantage: VR mode is activated directly with the plug-in: This means that visitors with an iPad or iPhone can control which image area they want to see directly by moving the iPhone / iPad. And there is a button in the WordPress editor that incorporates the shortcode, which is quite convenient.
  • DImage 360 from D'arteweb: A little less intuitive when installing the shortcode, but provided with more functions. The plugin was last updated a week ago. So someone here cares. Small disadvantage: Unfortunately, you first have to activate the VR mode as a viewer with a button.
  • PanoPress by Omer Calev & Sam Rohn: It worked for me on the Mac, but sometimes nothing was displayed on the iPhone. The plugin hasn't been developed for 2 years, which is not a good sign.

My recommendation or my choice fell on that DImage 360 ​​pluginas it is kept up to date and works relatively smoothly with my iOS devices. The installation of the shortcode is not rocket science and once you understand it, the plugin simply offers the better user interface for the viewer.

It was also important to me not to use Flash. Some plugins use this changing security gap as a viewer for the panoramas. But I don't think about that. That being said, Flash doesn't run on any iOS device, which would affect quite a few people. All of these reasons together led me to DImage 360.

Incidentally, I have deliberately not listed a web service such as 360cities.net or Momento360.com here, where you have to upload your 360-degree panoramic images in order to then integrate them via code. I prefer to host my recordings myself and have more control over what happens to them.

All plugins bitch with iOS devices

I looked at various pages on the Internet that used plugins for displaying 360 degree photos. None of them run really smoothly with my iPhone or iPad. Some plugins, such as the WP-VR-view, do strange things, for example, that when zooming with a pinch gesture, the picture disappears completely or partially shifts to a corner.

Of all the quirks I found, the one of the DImage 360 ​​plug-in was the one I found the most difficult to get over. What doesn't work here are the following for me:

  • A click on the box at the bottom right usually calls up full-screen mode. It works on my iPad and Mac, but nothing happens on the iPhone when I click there.
  • If you are not in VR mode, you can move your finger back and forth or up and down in the picture. While right / left works perfectly, my iPad and iPhone always want to scroll the page when moving up and down, which is a bit annoying.

HEADS-UP: If you have installed the WP-Rocket plugin for caching in WordPress, you should set the pages with the panoramas to "never cache", because WP-Rocket seems to make the Javascript code unusable. I just noticed it while publishing the article. :-(

Setup and use of DImage 360

Setting up the plugin is very easy: Go to the Plugins> Install area in the WordPress admin and then search for "DImage 360". You should then get the following ad.

DImage 360 ​​plugin for displaying 360 degree spherical panoramas and VR videos in WordPress.

DImage 360 ​​plugin for displaying 360 degree spherical panoramas and VR videos in WordPress.

Word where I now read "Active", you should have an "Install" button. You press it. When the plugin is loaded, an "Activate" button appears, which I also press.

Installation of the panorama picture with a shortcode

If the plugin is activated, you first have to upload the panorama photo to the WordPress media library. Once this is done, we still need the "Attachment ID" of the photo. This ID will then be queried in the shortcode that we will include in the post. Unfortunately, WordPress does not display the attachment ID in the media library. But there is a trick to get this out easily anyway.

If you call up the media library, there is an "Edit" button for each image. If you keep the mouse pointer over this button, the URL that would be called appears at the bottom of the browser. The ID is also mentioned there as a number. In my screenshot you can see how to find them:

This is how you can find out the attachment ID of a photo in the media library.

This is how you can find out the attachment ID of a photo in the media library.

If all of this is too cumbersome for you, you can also use the plugin "Reveal ID's"Install. After activation, this will show you the IDs of the photos in the media library.

Another alternative: integration with URL instead of ID

Unfortunately, I'm only now reading that you can also specify the URL of the photo instead of the ID in the shortcode. This is of course much easier. The URL can be obtained by clicking on "View" for the photo in the media library and then looking in the URL line of the browser. You can copy and paste the address directly into the shortcode.

This is what the shortcode looks like

So here are the two options for the shortcode, which you then copy into the post:

Example of the two shortcodes that can be used to display a 360-degree photo.

Example of the two shortcodes that can be used to display a 360-degree photo.

Unfortunately, I was only able to include the shortcode as a graphic, as I couldn't prevent WordPress from converting it directly to the panorama view, since the plugin is also running on me. If you want a shortcode that can be fetched by copy and paste, then you will find this one here on the plugin page.

View with two pictures for cardboards and VR glasses. Sorry for the bad resolution. The picture is actually sharp, but something went wrong with the screenshot.

Also possible with DImage 360: A view with two images for cardboards and VR glasses. Sorry for the bad resolution. The picture is actually sharp, but something went wrong with the screenshot.

More options of the plugin for the shortcode

In addition to the ID or the URL for the source of the photo, there are a few other setting options that can be used in the shortcode. However, these are optional. The shortcode also works if you only enter the URL or ID.

  • control {true / false}: With this option you can determine whether control buttons are displayed or not. The standard setting is: true.
  • auto-rotate {true / false}: This option specifies whether the image should rotate automatically when it is called up. If you set "true" here, you can set the speed with "anim_speed". The standard setting is: true.
  • zoom_level: Here you can specify with values ​​from 0 to 100 whether you want to zoom into the picture right at the beginning. The standard setting is: 0.
  • anime_speed: This setting determines how fast the panorama rotates when auto-rotate is activated. Values ​​from -100 to 100 are possible. The standard setting is: 2. My recommendation: -1.
  • default_position: Specifies which section of the image should be the start. You have to try something here. I couldn't determine whether the values ​​from 0 to 100 or from 0 to 360 are possible. The standard setting is: 0.
  • allow_scroll_to_zoom {true / false}: This determines whether you can zoom into the image on the Mac / PC using the scroll wheel. The standard setting is: true. My recommendation: false.
Here is an explanation of the controls you will find on your smartphone when viewing an image with DImage 360. The gyroscope control is of course not available on Macs, but only on devices that also have a built-in gyroscope.

Here is an explanation of the controls you will find on your smartphone when viewing an image with DImage 360. The gyroscope control is of course not available on Macs, but only on devices that also have a built-in gyroscope. An error in the graphic: The left button does not reset the zoom.

Update: No 360 degree picture in the blog post

I had previously used the Dimage plugin, but then realized that I only had a single 360 ​​degree picture in the blog. That was a bit too much for me, because each plugin increases the loading time of the entire blog. So I went on an austerity course and removed the plugin and with it this 360 degree image. I hope you don't hold it against me ...

I entered the following options in the example above:

control = true auto-rotate = true zoom_level = "0" anim_speed = "- 1" default-position = "180" allow_scroll_to_zoom = true

With me on the Mac and also on the iPhone, "scrolling to zoom" is annoying. For that reason I would rather turn it off. So that you can try it out, I left it activated above.

Note on 360-degree videos

For 360-degree videos, I would generally trust YouTube. With the "WP-VR-view" plugin, locally hosted videos with a 360 degree feature can also be integrated into WordPress, but in principle you save a lot of traffic and relieve your own server if you first upload them to YouTube and use the embedding Function in WordPress. And finally, Youtube offers many technical features to show every visitor the clip in the best possible quality. For this reason I have only dealt with the photos here.

 

-

Did you like the article and did the instructions on the blog help you? Then I would be happy if you the blog via a Steady Membership or at Patreon would support.

3 comments

  1. Hamud says:

    Hi,
    I would insert the result of the working 360 degree image above, then you would have more desire to scroll further.
    greets

  2. Heiko Matting says:

    Dankeschön!

Leave a Comment

Your e-mail address will not be published.