Rioch Theta 360 degree images in WordPress

Here is my very first experiment with the Rioch Theta 360 degree camera implemented in a WordPress post. As you can see the experiment was a success.

About the Image

The image was shot in the Old Town city museum in Aarhus with the Rioch Theta 360 degree camera. The camera was handheld during dark conditions. Hence the blur. Obviously I should have used a tripod / monopod.

Vis større kort

Panellum

As the 350-degree image viewer I used code from the Panellum JavaScript library, see here.

In WordPress

• The image from the camera was simply uploaded to the media library in the Dashboard.
• Then the url to the image was copyed and inserted in the code as the const img.
• Note that you cannot have blank lines in the JavaScript. If you have blank lines WordPress will insert <p> tags – which will ruin the script totally.

Here is the code I used:

<!--  Add what you see below to a post or page
      the link to the image should be the link to the image
      either on your WordPress or server -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css">
<div id="panorama" style="width:600;height:400px;border:3px solid black;margin:auto;"></div>
<p><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
<script>
  window.onload = function() {
    const author = "Per Thykjaer Jensen"
    const img = "https://multimusen.dk/wp-content/uploads/R0010030-scaled.jpg";
    pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": img,
      "title": "The Old Town - dec. 17th. 2021, Aarhus",
      "author": author,
      "autoLoad": true
    });
  } // document ready
</script></p>

Get the code on Github

• https://github.com/asathoor/360degreeImg