How to implement 360 viewer

To implement a 360 sphere viewer on Squarespace, follow these steps below to create and use animated sprites.

Preparing the Images

1. Create Sprites: Prepare the individual images for your animation and combine them into a single spritesheet.

2. Insert Image: Use the Image block to add the viewer to your page.

3. Attach Spriteify URLs: Attach link to Image block in order to activate the view

Single sprite

40 Frames spritesheet

Spriteify URLs

A Spriteify URL is a special link with reserved parameters that configure how the viewer plays a spritesheet animation. URL parameters begin with a question mark (?). The parameters are joined using an ampersand (&) and follow the format parameter=value.

Supported parameters

Parameter	Required/Optional	Description	Values	Default Value
spriteify	Required	Turns the image into a spritesheet animation.	true/false or 1/0	1
width	Optional	Specifies the width of the sprite.	Any valid pixel value	Image block width
height	Optional	Specifies the height of the sprite.	Any valid pixel value	Image block height
frames	Required	Specifies the total number of frames in the merged sprite image.	Any positive integer	N/A
framesX	Required	Specifies the number of columns in the merged sprite.	Any positive integer	N/A
responsive	Optional	Determines whether the viewer dimensions change when resizing.	true/false or 1/0	1
animate	Optional	Determines whether the viewer auto-rotates on load.	true/false or 1/0	1
loop	Optional	Determines whether the viewer loops when animate is true.	true/false or 1/0	0
sense	Optional	Specifies the direction of the animation.	1 or -1	N/A

Example URL

For example, given a spritesheet with 40 frames and 6 frames per row, the URL might look like this:

https://images.squarespace-cdn.com/content/660f72446b381f5933e3f1c9/48950111-b977-4fff-bf15-9c4611af8091/Heart-40-Frames-min.jpg?spriteify=true&frames=40&framesX=6&responsive=true&animate=true&loop=false

Before ?: The Image URL

• https://images.squarespace-cdn.com/content/660f72446b381f5933e3f1c9/48950111-b977-4fff-bf15-9c4611af8091/Heart-40-Frames-min.jpg

  This part of the URL points to the actual image file. It is a direct link to the image hosted on Squarespace's CDN (Content Delivery Network).

?: The URL Parameter Separator

• The question mark (?) indicates the beginning of the URL parameters. These parameters are used to configure how the image should be processed or displayed.

URL Parameters and Their Values

1. spriteify=true: This required parameter activates the spritesheet animation feature. Setting it to true enables the image to be treated as a spritesheet.

2. frames=40: Specifies the total number of frames in the merged sprite image. In this case, there are 40 frames.

3. framesX=6: Indicates the number of columns in the merged sprite image. This means there are 6 frames per row in the spritesheet.

4. responsive=true: Determines whether the viewer dimensions change when resizing. Setting it to true makes the viewer responsive to different screen sizes.

5. animate=true: Specifies whether the viewer should auto-rotate the spritesheet on load. Setting it to true means the animation will start automatically when the viewer loads.

6. loop=false: Determines whether the viewer should loop the animation when animate is set to true. Setting it to false ensures that the animation play just once.

Image Spriteify URL params

Detail Instructions

1. Insert Image Block: Add the image block to your page.

2. Add Sprite Image: Upload the first sprite image.

3. Upload Spritesheet to Asset Library and get its URL to create the spriteify URLs

4. Attach Link: Click on "Attach link" and use the spriteify URLs.

5. Save the Page: Save your changes.

10 STEPS

1. Edit your page and insert an Image block

2. Click Image

3. Click Add an Image

4. Click Upload File

5. Click Attach Link

6. Paste the Spriteify URL

7. Save the Image changes

8. Click Save

9. Click Exit

10. That's it. You're done.

Here's an interactive tutorial

** Best experienced in Full Screen (click the icon in the top right corner before you begin) **

Next step

Takeaway

• Image Width Limitation: Since Squarespace limits image width to 2500px, create a maximum of 2-column spritesheets to ensure the highest quality.

• Use this online tool to merge the spritesheet, MacOS users can use Combine Images Shortcut