HOW TO: 360º PHOTOSPHERE EMBED ON SQUARESPACE

Bridging the gap between the real world and the best approximation using digital media can be difficult and ever changing.

I have found that 360º photospheres are pretty awesome. Better than wide angle, superior to hyper landscapes. However, like some basic things, it is hard to get such a 360º onto your Squarespace site.

There are a few paid options. However, it’s all just code right? Might there be a free and open source method of achieving this type of media?

Luckily there is! After searching high and low I have found a really great option and am here to share how it works!

Special thanks to the awesome work from A-Frame for making the code available and easy to use!

1) Find yourself a 360º photosphere image that is “flat”. Like the one below.

2) Right click and “Open Image in New Tab”.

3) Grab the URL from the image.

4) Remove any arguments for low res at the end so the URL ends in .jpeg. Example below.

https://images.squarespace-cdn.com/content/v1/59653bbabebafb41a1c6b513/0b3b8018-e191-4b47-87a4-c30b4ec8d197/image-asset.jpeg

5) Create an “Embed Block” on your page. This works for free sites. You can also use a “Code Block”.

6) Paste in the code from the GitHub and replace the URL with the one you grabbed above.

7) Paste it all in the block and view the page from a normal browser window.

8) Good to go you should be able to click and drag your way around the 360º scene!