In the spirit of sharing back to the community, I thought I would share my adaptation to the ImageGallery widget to facilitate rendering out an interactive 360 pano image using Google's VR for Web.

To complete the project you might want to install the Spectrum.Color Picker. Alternatively you can use the built in Umbraco color picker, however its rather limited and I recommend using the Spectrum but its not absolutely required.

1: Download required Google scripts Download the Google VR web scripts from https://github.com/googlevr/vrview This is required because the vrview scripts should be hosted on your own site due to XSS security issues. Due to XSS, many browsers won't properly render the pano if the scripts come from google but the image is referenced on your site.

2: Install the google scripts: In your /Scripts folder create a "vr" folder. Into that, place the index.html and style.css files from the google zip file. You can also use index-minified.html but you need to rename it to index.html on your server. It uses the -min scripts instead of the full ones. Also copy the "images", "script"s and "build" folders from the google download into the new vr folder.

3: Edit ImageGalleryItem Document type: You will need to add a new tab with three new properties to the ImageGalleryItem Document type. The adds are seen here:

The details of the dropdown are here:

This adds a checkbox to indicate its a 360 image, an image rendering position (needed for images that are not perfectly 2:1 ratio such as those from the 360fly camera), and a color fill which is used for images that don't match the 2:1 ratio required for google vrview. If your images are all 2:1 ratio the pad nor the color will ever be evident on the page.

4: Edit siteTemplate: You need to add a snippit of code to the bottom of your siteTemplate:

    @Html.RenderJsHere();




<script>
    $(document).ready(function(){
        $(".cbox-gallary360").colorbox({iframe:true, width:"90%", height:"90%"});
    });
</script>




    @Html.Raw(configPage.ScriptBeforeBodyEnd)

You will find the two @Html lines already at the bottom. Add the Script between them.

This tells color box to render that specific class as an iframe rather than an image. You can adjust the % sizes to suit your site's layout though this remains responsive by using % instead of fixed pixel sizes. The google renderer will also adapt to the iframe size within the color box.

5: Generate Models: Generate your models using the model builder on the dev tab.

6: Edit SectionImageGallery Partial: Edit your "SectionImageGallery" partial. Add this using:

@using Umbraco.Web.Models;

7: Further edit SectionImageGallery Partial: Also within "SectionImageGallery" partial, alter this section of code:

                //TODO: Get image from media and image cropped correctly

                bool is360 = item.Is360Image;

                IPublishedContent mediaItem = Umbraco.TypedMedia(item.ImageFromMedia);

                imageThumb = (masonry) ? mediaItem.GetCropUrl() : mediaItem.GetCropUrl(600, 350);
                imageFull = mediaItem.GetCropUrl(width: 1280, height: 1024, imageCropMode: global::Umbraco.Web.Models.ImageCropMode.Max, upScale: upscaleImages);

                if (!string.IsNullOrEmpty(item.ImageFromMedia)) // || item.HasValue("imageCropped"))
                {   
                        string imageClass = "item-container";
                        string anchorClass = "cbox-gallary1";
                        string anchorHREF = imageFull;
                        if (is360){
                            string FillColor = item.ImagePadColor.ToString().Replace("#","");
                            if (FillColor == ""){FillColor = "000";}
                            imageClass += " image360Thumb";
                            anchorClass = "cbox-gallary360";
                            imageThumb = imageThumb.Replace("&rnd=", "&overlay=panorama-icon-17926.png&overlay.position=20,20&overlay.size=120,120&overlay.opacity=75&rnd=");
                            anchorHREF = "/Scripts/vr/index.html?image=" + @Url.Encode(mediaItem.GetCropUrl(propertyAlias: "umbracoFile", width:3840, height:1920, upScale: true, imageCropMode: ImageCropMode.Pad, furtherOptions: "&anchor=" + item.ImagePadPosition + "&bgcolor=" + FillColor +""));
                        }
                    counter++;
                    <div class="nf-item @itemCategoriesNoCommas @spacingClass">
                        <div class="item-box">
                            <a class="@anchorClass" href="@anchorHREF" title="@item.Name">
                                <img class="@imageClass" src="@imageThumb" alt="@counter" />
                                <div class="item-mask">
                                    <div class="item-caption">
                                        <h5 class="white">@item.Name</h5>
                                        @if (mustShowCategories)
                                        {
                                        <p class="white">@categoryNames</p>
                                        }
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>

The "// TODO" line was present in my partial and I have included it here as a marker for you to locate the proper section of the partial.

What this section of code does is check if the 360 checkbox was checked (bool variable).

It then sets up a few strings with the default values used before so normal images render as they did before.

If its a 360 image, instead of the stock links and classes, it generates a new link to the index.html renderer along with the appropriate GetCropUrl URL to generate the new image. It adds "image360Thumb" class to the image in case you wanted to use CSS to alter its appearance in the gallery. You can, of course, target it also by using the "cbox-gallary360" which is applied to the anchor wrapping it.

Note the resize dimensions in the url. Mine are set for the default size of my 360fly camera's output which is slightly under 4k. The output size must be a 2:1 ratio or the google vr renderer will not apply it to the sphere correctly. This is the reason for the pad and the fill color as my camera produces a 360 horizontal by 270 vertical view not 360 x 360. So if your camera produces a 360 by 360 view, your width is 4096 , your height needs to be 2048 in the url above (or whatever your maximum resolution is on your camera).

I have not included any stereo or other options on the iframe url. See https://developers.google.com/vr/concepts/vrview for additional options available.

The code above also includes an overlay image as part of the new URL. You will need to enable image overlay in your imageprocessor config file and provide a PNG overlay icon. If you do not wish to use the overlay, simply comment out that line of code so you will have it as reference should you wish to re-enable it later.

I used a public free image for my initial testing. You can see the icon overlay on the last two images here:

If your entire gallery is all 360 panos, the overlay is pointless. But if you have normal images mixed with 360 panos, the user might like to see the 360 icon as an indicator on the thumbnail. It is, of course, your option whether to add the overlay or not, its not required to make this work.

8: Test: Add a 360 image from the /examples/gallery folder from the google download. Check the 360 checkbox and publish. It should render as an interactive pano. Now you can experiment with your own panos!

You can alter the index.html and style.css in your vr folder to suit your site's styling and requirements. It should work out of the box and get you going.

Hopefully I didn't miss anything :)