In 2019 we have launched PixRiot which is an optimized hosting service for 360 product views that relies on one of the largest CDN networks in the world. It provides simple drag & drop uploads and sharing using a variety of options, including iFrame. It can be used with all of our plugins and the standard SpotEditor output.
In this post we will quickly go through a specific WebRotate 360 Product Viewer PRO feature that seem to bring most questions or is just plainly not used as it's considered to be too complicated or not documented well enough.
In short, the CDN support which we had in the core 360 product viewer for a long time allows you to store your 360 product images on an external server or a commercial Content Delivery Network such as Amazon S3 / CloudFront or Rackspace Cloud Files (there are many more!).
There are several reasons why you would want to host stuff on CDN, but for your average ecommerce application this is done to speed up website loading through various file downloads as CDN providers usually have their content servers distributed geographically. Or in simple terms, these servers are often much closer to your web visitors and often have higher bandwidth than the one where your actual website is hosted. Another possible reason for using CDN / external image hosting is for 360 product photographers to keep all their photography work on their own server(s) such that they can manage the images for their clients as needed.
So let's start with a quick example.. Let's say you have your own website where you are planing to show a lot of 360 product spins and let's call it MyWebsite.com. Now imagine you have another server (or CDN) by the name of ImageServer.com where 360 images will be hosted for one reason or another. A simple rule with this setup / feature is that only the actual 360 images are stored on ImageServer.com, i.e 360 viewer config xml, scripts, css and the license all have to be hosted on MyWebsite.com.
So here's how this might look in terms of file location:
MyWebsite.com
- yourviewerfolder
+ imagerotator
license.lic
config.xml
ImageServer.com
- 360_assets
- product1
- images
image01.jpg
image02.jpg
...
image20.jpg
- product2
- images
image01.jpg
image02.jpg
...
image20.jpg
Now let's imagine that there're two webpages named product1.html and product2.html located somewhere on MyWebsite.com with an integrated webrotate 360 viewer. Here's what you would need to note when looking into the source of both files:
These script includes are the same for both product1.html and product2.html:
<link href="/yourviewerfolder/imagerotator/html/css/basic.css" rel="stylesheet"/>
<script src="/yourviewerfolder/imagerotator/html/js/jquery-1.8.3.min.js"></script>
<script src="/yourviewerfolder/imagerotator/html/js/imagerotator.js"></script>
product1.html:
<script language="javascript" type="text/javascript">
_imageRotator.settings.configFileURL = "/yourviewerfolder/config.xml";
_imageRotator.settings.graphicsPath = "/yourviewerfolder/imagerotator/html/img/basic";
_imageRotator.settings.rootPath = "http:/ImageServer.com/360_assets/product1/";
// ...
_imageRotator.runImageRotator("wr360PlayerId");
</script>
product2.html:
<script language="javascript" type="text/javascript">
_imageRotator.settings.configFileURL = "/yourviewerfolder/config.xml";
_imageRotator.settings.graphicsPath = "/yourviewerfolder/imagerotator/html/img/basic";
_imageRotator.settings.rootPath = "http:/ImageServer.com/360_assets/product2/";
//...
_imageRotator.runImageRotator("wr360PlayerId");
</script>
As you can see, we're referencing all scripts and xml from the same MyWebsite.com location where these pages are hosted (the preceding forward slash ie /yourviewerfolder just makes the path relative to the root of MyWebsite.com). Also in this setup we decided to reference a single (master) config.xml that we keep under yourviewerfolder folder on MyWebsite.com as well. This allows us to save all that time and efforts creating a bunch of webrotate xml configurations for all our products as we're using here just a single configuration xml and it's the same one that will be loaded for all our products!
Note that we don't have to do that but it surely helps with ecommerce setups with hundreds or thousands of 360 product views. With the master config you can now manage 360 viewer settings for all your products from one place. The only limitation is that since you are using one xml for all your 360 product views, the number of images under each product folder on ImageServer.com and their file names would have to be exactly the same. Lets see why this is a requirement.
Here's how your images are usually specified in your viewer config xml (SpotEditor tool will always use the relative path for all images inside the xml):
<image src="images/image01.jpg"/>
<image src="images/image02.jpg"/>
...
<image src="images/image20.jpg"/>
When we load this xml, the 360 viewer first checks for the rootPath parameter (which in our sample with product1.html is http:/ImageServer.com/360_assets/product1/) and what it simply does, if rootPath is available, is appending the relative image path from xml to the rootPath as configured, ie:
http:/ImageServer.com/360_assets/product1/images/image01.jpg
And so everything works for all products as long as the image names and their count in that master (single) config xml match your uploaded image folders on ImageServer.com. Note that you can still use rootPath even if you're not using CDN or an external server - just point it (rootPath) to the 360 image folders on your main website ftp to utilize the same benefits of the single master config xml file.
This may sound a bit complicated so some of our ecommerce plugins have this setup pre-configured and all you need to do is to upload your images on your CDN (e.g ImageServer.com) and reference your single Master Config in the module settings as well as the rootPath field for each product as per your 360 image folder setup.
This is currently supported out-of-the-box in Magento, OpenCart, PrestaShop and WordPress modules. The first three have a dedicated field for both Master Config and Root Path (please refer to corresponding module or add-on notes to see where these fields are configured) while our WordPress plugin has an extra short-code parameter called rootpath which you can point to your CDN / external server as per above.
PS: of course, the other option is to host your complete 360 views on an external server / CDN by just uploading SpotEditor output as-is and allow your clients embedding your product html pages (that have nothing else but 360 views) via iFrame. This has its own limitations and benefits (the full-screen function wouldn't work, for example). You can read more about our script that helps with the iFrame sharing in this post.
