Embed 360-degree photos and videos in WordPress sites

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.

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 the WP-Rocket plugin installed for caching in WordPress, you should set the pages with the panoramas to "never cache" because WP-Rocket seems to break the javascript code. I just noticed this while posting the article. :-(

Setup and use of DImage 360

Setting up the plugin is very simple: In the WordPress admin, go to the Plugins > Install section and then enter “DImage 360” in the search. You should then get the following message.

Word where I now see "Active" should be an "Install" button for you. 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 be queried later in the shortcode that we will include in the post. Unfortunately, WordPress does not show the attachment ID in the media library. But there is a trick to easily get them out anyway.

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

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

Another alternative: integration with URL instead of ID

Unfortunately, I only now read that you can also enter the URL of the photo instead of the ID in the shortcode. This is of course much easier. You can get the URL by clicking on "View" next to the photo in the media library and then looking in the browser's URL line. 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:

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.

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 determines whether the image should rotate automatically when called up. If you set "true" here, you can set the speed with "anim_speed". Default 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.

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, the "scroll 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 installed in WordPress, but basically you save a lot of traffic and relieve your own server if you first upload them to Youtube and use the embed Include function in WordPress. And finally, YouTube offers many technical features to show every visitor the clip in the best possible quality. That's why I'm only talking about the photos here.