Panoramas in this blog

November 4th, 2022 Leave a comment Go to comments

This post is also available in: Русский

A short video with a hint of the location of the checkbox for switching modes:

I use Pannellum to view panoramas in VR mode with my additional code as WordPress plug-in using PHP/JS. I made it possible to view panoramas one by one per post or many at once with carousel navigation. And with a checkbox at the bottom, you can switch the viewing mode: VR or Source. And I support two languages for titles.

Source code (updated on 2022.11.04 to support PHP8):

There are three plug-ins, you need to put them in a /wp-content/plugins/ folder. Why three – because in my blog in these files there are a lot of other functions, and here I am posting only those that is needed for panoramas. You can put everything into one file if you want.

vr36.php, vr36.css – main functions for panoramas.
image-caption.php, ic.css – functions for flat pictures with titles, used here to show source image files of the panoramas. You can delete this and just use <img>.
functions.php, functions.css – other helper functions, such as calculating the full path of the image with the name of the web site. The point is that I have a blog in two languages and for english posts there are “en” in path.
Pannellum – download it from the official site and put it in the root directory in pannellum folder.

How do I place my images:

I put everything in the common parent directory “p” and then a folder with a year and then a folder with a date. There is a JSON with description for each image in this directory.

Descriptions of each panorama inside json:

        "title":"Northern River Terminal, Moscow, Russia, 2020.09.06",
        "title_":"Northern River Terminal",
        "titleru":"Северный Речной Вокзал, Москва, Россия, 2020.09.06",
        "title_ru":"Северный Речной Вокзал",
        "x": 0,
        "y": 18,
        "hfov": 170
        "title":"Entrance from park, Northern River Terminal, Moscow, Russia, 2020.09.06",
        "title_":"Entrance from park",
        "titleru":"Вход с парка, Северный Речной Вокзал, Москва, Россия, 2020.09.06",
        "title_ru":"Вход с парка",
        "x": 0,
        "y": 0,
        "hfov": 170

The path to each image is relative to the top folder “p”. The title in Russian and English is written here in two versions: a long version for showing on a large picture and a short version for showing on a preview in a carousel.

How do I insert panoramas into a post:

For Russian:

[vr360carousel lng="ru"]2020/2020.09.06_360/carousel.json[/vr360carousel]

For Englich:


It is possible to insert one single panorama into a post:

[vr36 title="Патриаршие пруды. 2021.01.02"]2021/2021.01.02_360/IMG_20210102_135456_00_025.jpg[/vr36]


Parameters for vr36 shortcode and for each entry inside JSON for vr360carousel – shortcode:
title – title
titleru – title for [lng=ru], but if [lng=ru] and [titleru] is empty, then usual [title] will be used
hfov – initial field of view
x – horizontal angle for starting point
y – vertical angle for starting point
autoLoad – auto load [yes,true,no,false]
preview – preview image url OR [yes,true,no,false]
hotSpotDebug – [true,yes,no,false]
w,h – use to set custom size for html element. Not used for vr360carousel.
lng – [ru], language. EN if empty. Uses for [title/titleru], plus [title_/title_ru] for vr360carousel only

Additional parameters for vr360carousel shortcode:
index – [yes,no], default=no, insert text indexes of images (1 2 3 4 …)
titles – [yes,no], default=yes, insert titles over each slide in carousel
titlesi – [yes,no], default=yes, insert index additionally to title over each slide in carousel
hotSpotDebug – [true,yes,no,false]

Additional parameters for each entry inside JSON for vr360carousel – shortcode (which are absent in vr36):
color – ‘white’ by default, for title color
bgcolor – rgba(0, 0, 0, 0.5) by default, for title background color
titlepos – [top,bottom], [bottom] by default, position of title


Active Pannellum eats up a lot of RAM. Therefore, when about 5 active VR panoramas are located on one web page, the page will crash on a mobile browser, while on a desktop all next panoramas may simply not load. Actually, this was the last straw that pushed me to make a carousel. I assume such use: on one page there will be either a carousel with a list or a separate panorama, but not all together.