Embedding Second Life 360 images directly into WordPress

I recently covered the promotion of the Second Life 360º Capture viewer to de facto release status (see: 360º Capture viewer now de facto SL release viewer), in which I referenced uploading images to platforms such as Flickr. Since that article, I’ve received questions on embedding images from the viewer into blogging platforms such as WordPress or viewing.

While I cannot speak to other platforms, it is possible to directly display 360º images (including those produced via the Second Life viewer and TPVs) directly into WordPress posts / pages. There are actually two ways of doing so:

• If you are using Automattic’s own platform / hosting via WordPress.com, you can use dedicated shortcode created by Automattic.
• If you are self-hosting and using WordPress.org, you can either use a dedicated WordPress.org plug-in such as Algori 360 Image, or try the shortcode option (which I believe should work, although I cannot verify, being a WordPress.com user).

For the purposes of this article, I’ll be covering the use of Automattic’s shortcode option. The key points of this approach are:

• It works with both of the WordPress editors, Classic and Guttenberg (the “block” editor).
• It supports any suitable 360º image with a .jpg file extension (not just those created with the SL viewer, although the notes below assume you are using the 360º viewer to initially create your 360º image(s).
• It allows images to be viewed when embedded in a post / page, and has an option to display them in a full-screen mode and returning you to the post / page in which they appear when done.
• As it works with URLs, it can be used to display 360º images you have uploaded to other platforms, such as Flickr (which I’ve also covered below).
• It defaults all images to a single image size rather than a more usual equirectangular aspect ratio (2:1), which can look overly large within a post or page, depending on the theme you are using, as per the example below:

Embedding a 360º Image Uploaded to WordPress via the Classic Editor

1. Use the 360º viewer to take your image.
2. Upload the image to your WordPress Media Library.
3. Edit the image via your Media Library, and copy the URL as it is given.

4. Edit the post in which you wish to embed the 360º image and position the cursor when you wish the image to appear.
5. Switch to the Text view (click the tab at the top right of the WordPress text editor), and enter the following shortcode:

Where “path-to-photo” is the 360º image URL.

6. Switch back to Visual (click the tab at the top right of the WordPress text editor), the shortcode should appear as you’ve typed it.
7. Go to Checking Your Results, below.

Embedding a 360º Image Uploaded to WordPress via the Guttenberg Editor

1. Use the 360º viewer to take your image.
2. Upload the image to your WordPress Media Library.
3. Edit the image via your Media Library, and copy the URL as it is given.
4. Create a Shortcode block, and within it type:

Where “path-to-photo” is the 360º image URL.

Checking Your Results

Once you have created the 360º image shortcode:

• Use the WordPress Preview option to check the layout of your post / page and that the image is properly displayed.
• Use the Full Screen toggle option in the bottom right corner of the image to expand it to a full screen view and then click the icon again to return to the post / page view.
• If you see a message similar to “Enter valid URL” or “failed to load the VR scene”, check to made sure you have added the shortcode and / or image URL correctly.

Embedding a 360 image uploaded to Flickr

As noted above, you can also use the WordPress shortcode option to display360º images you’ve uploaded to Flickr directly into your WordPress posts / pages, where they will play when clicked. Here’s how:

1. Upload a 360º image you’ve captured to your Flickr photo stream.
2. Click on the image in Flickr to display it.
3. Click the Share Photo arrow icon at the bottom right of the screen.
4. This will open a floater with a series of share options. Click on BBCode.
5. The floater will display URL information. click on the information to highlight it, then paste it into a suitable editor. It will look like the example below.

6. Trim the URL to just leave the part highlighted in yellow that starts with “https://live.static” and ends with “jpg”.
7. Follow the instructions above to create the 360º image shortcode using either the Classic or Guttenberg editor, replacing “path to photo” with the Flickr image URL from the BBCode.

The image below is an example of a 360º image uploaded to Flickr and embedded into this page using the above method, and which can also be seen here.

And that’s it! For any additional information, see: Embedding 360° Photos and Virtual Reality (VR) Content via WordPress.