Categories
Multimedia Design

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

By Per Thykjaer Jensen

Per is the WordPress expert at Business Academy Aarhus. Senior Lecturer at the Multimedia Design Programme. His background is in the Arts: MA Literature History and BA Art History. Later he added a MA in IT, interaction and Multimedia. And he is a wicked Linux user.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.