A quick look at hosting 360˚ panorama files on Amazon S3 and then publishing them to Squarespace via a <code> block
As an increasing number of 360˚ Panorama photographers are hosting their final project files on the Amazon S3 platform. I've written a tutorial that provides step-by-step instructions on how configure, upload and publish Pano2VR or Krpano project folders on S3.
Configure S3 for 360˚ Panoramas: https://tonyredhead.com/amazon-s3/configure-s3-360
From there on a project published on S3 can be displayed in Squarespace using the following iframe code in the code block.
Note: Squarespace recently changed a number of options and the code block is only available as a Premium feature in the current Website Business plan and higher:
Available in: All Business and Commerce plansAvailable in: Legacy Personal plan (no longer available for new subscriptions)
Not available in: Current Personal plan
Trial: Available during a trial
Adding the Virtual Tour
So in order to add a Virtual Tour like the one above it’s very simple.
1. Hover and click in your page to open the Content Block window (Figure #1)
Figure #1: Content Block Window
2. Scroll down until you come to the ‘More’ section and click on the ‘Code’ Content Block (Figure #2)
Figure #2: Scroll down to locate ‘Code’ content block
Note: if you don’t see the Code block then it means you will need to upgrade the type of website you are building.
3. Clicking on the Code block inserts a block into your page and displays the Code window (Figure #3)
Figure #3: Code block and Code window
4. Paste the following iFrame code into the Code window and replace the https url with your own url. This will automatically load the virtual tour. Select ‘Apply’ to confirm the configuration. (Figure #4)
<iframe src="https://s3-ap-southeast-2.amazonaws.com/360panoramas/FR-Abbey-Saint-Junien/index.html" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
Figure #4: iFrame code added
5. Save the page and the Virtual Tour is now displayed in your page.
Note: the settings I use in my iFrame code, width=100% and height=450 work well in both desktop and mobile situations. However you can modify the iFrame code and add or change several parameters.
