How to create a 360 spin
Sirv automatically creates a spin file when you upload a sequence of images. This is a text file (in JSON) which references the images in your animation, plus any other settings you choose.
Rules
A spin file is generated when:
- The image names contain a sequence of ascending numerals.
- Between 8 and 1000 images make up the sequence.
- Numerals do not exceed the value 1024.
File names
Spin files are created with the file extension .spin, for example:
Example-Product.spin
The .spin file name is determined from either the folder or file name:
- Folder name - if there is one spin in a folder, it will take the name of the folder.
- File name - if there are multiple spins in a folder, they will take the name of the images.
When the folder name is used, the image names are disregarded. For example, if you upload this set of images to a folder named "black-dress":
/black-dress/index-01.jpg |
/black-dress/index-02.jpg |
/black-dress/index-03.jpg |
/black-dress/index-04.jpg |
/black-dress/index-05.jpg |
/black-dress/index-06.jpg |
/black-dress/index-07.jpg |
/black-dress/index-08.jpg |
/black-dress/index-09.jpg |
/black-dress/index-10.jpg |
/black-dress/index-11.jpg |
/black-dress/index-12.jpg |
/black-dress/black-dress.spin
When the spin file name is generated from the file name, the ascending digits in the file names are stripped from the .spin file name. For example, if you upload these 2 sets of images:
/dresses/black-dress-straight-01.jpg | /dresses/black-dress-frills-01.jpg |
/dresses/black-dress-straight-02.jpg | /dresses/black-dress-frills-02.jpg |
/dresses/black-dress-straight-03.jpg | /dresses/black-dress-frills-03.jpg |
/dresses/black-dress-straight-04.jpg | /dresses/black-dress-frills-04.jpg |
/dresses/black-dress-straight-05.jpg | /dresses/black-dress-frills-05.jpg |
/dresses/black-dress-straight-06.jpg | /dresses/black-dress-frills-06.jpg |
/dresses/black-dress-straight-07.jpg | /dresses/black-dress-frills-07.jpg |
/dresses/black-dress-straight-08.jpg | /dresses/black-dress-frills-08.jpg |
/dresses/black-dress-straight-09.jpg | /dresses/black-dress-frills-09.jpg |
/dresses/black-dress-straight-10.jpg | /dresses/black-dress-frills-10.jpg |
/dresses/black-dress-straight-11.jpg | /dresses/black-dress-frills-11.jpg |
/dresses/black-dress-straight-12.jpg | /dresses/black-dress-frills-12.jpg |
/dresses/black-dress-straight.spin
/dresses/black-dress-frills.spin
You can tell Sirv to use the image file names instead of the folder name. To do this, right-click the folder and choose "Folder settings". Change the "Spin file name" option to "Generate from file names":
Single row spin
The above example image names will create a single row spin - also known as a 360 spin. It can be dragged from left to right. It cannot be dragged up and down. Most spins are single row spins. Example:
Multi-row spin
Sirv can also generate multi-row spins - also known as 3D spins. They can be dragged up and down as well as left and right.
The first digits represent rows and the second represent columns. Drag this example up and down, as well as left to right:
Sirv always processes the first set of digits as the row and the second set as the column:
If you upload a sequence of images such as this:
/10582501/adidas-01-01.jpg |
/10582501/adidas-01-02.jpg |
/10582501/adidas-01-03.jpg |
/10582501/adidas-01-04.jpg |
/10582501/adidas-01-05.jpg |
/10582501/adidas-01-06.jpg |
/10582501/adidas-01-07.jpg |
/10582501/adidas-01-08.jpg |
/10582501/adidas-02-01.jpg |
/10582501/adidas-02-02.jpg |
/10582501/adidas-02-03.jpg |
/10582501/adidas-02-04.jpg |
/10582501/adidas-02-05.jpg |
/10582501/adidas-02-06.jpg |
/10582501/adidas-02-07.jpg |
/10582501/adidas-02-08.jpg |
/10582501/10582501.spin
Best-practice naming
Spins have lots of files so to help you manage them, we recommend placing C/c, R/r or S/s before each set of digits.
They signify:
R = Row
C = Column
S = Spin number
This naming rule may be useful for:
- Descriptive file names - R and C let you instantly know what each set of digits represent.
- Multiple product spins - S signifies when a single product/item has multiple spins (e.g. different colours of the same product).
- Better collaboration - other team members can quickly understand what the digits represent.
For example, if you upload these two multi-row spins:
/trainers/adidas-r01-c01-s01.jpg | /trainers/adidas-r01-c01-s02.jpg |
/trainers/adidas-r01-c02-s01.jpg | /trainers/adidas-r01-c02-s02.jpg |
/trainers/adidas-r01-c03-s01.jpg | /trainers/adidas-r01-c03-s02.jpg |
/trainers/adidas-r01-c04-s01.jpg | /trainers/adidas-r01-c04-s02.jpg |
/trainers/adidas-r01-c05-s01.jpg | /trainers/adidas-r01-c05-s02.jpg |
/trainers/adidas-r01-c06-s01.jpg | /trainers/adidas-r01-c06-s02.jpg |
/trainers/adidas-r01-c07-s01.jpg | /trainers/adidas-r01-c07-s02.jpg |
/trainers/adidas-r01-c08-s01.jpg | /trainers/adidas-r01-c08-s02.jpg |
/trainers/adidas-r02-c01-s01.jpg | /trainers/adidas-r02-c01-s02.jpg |
/trainers/adidas-r02-c02-s01.jpg | /trainers/adidas-r02-c02-s02.jpg |
/trainers/adidas-r02-c03-s01.jpg | /trainers/adidas-r02-c03-s02.jpg |
/trainers/adidas-r02-c04-s01.jpg | /trainers/adidas-r02-c04-s02.jpg |
/trainers/adidas-r02-c05-s01.jpg | /trainers/adidas-r02-c05-s02.jpg |
/trainers/adidas-r02-c06-s01.jpg | /trainers/adidas-r02-c06-s02.jpg |
/trainers/adidas-r02-c07-s01.jpg | /trainers/adidas-r02-c07-s02.jpg |
/trainers/adidas-r02-c08-s01.jpg | /trainers/adidas-r02-c08-s02.jpg |
/trainers/adidas-s01.spin
/trainers/adidas-s02.spin
If you apply R and C references to your images but there is only 1 row or 1 column, those digits won't change in your file names. Therefore, Sirv won't strip them from the file name.
For example, this 1-row spin:
adidas-R01-C01.jpg |
adidas-R01-C02.jpg |
adidas-R01-C03.jpg |
adidas-R01-C04.jpg |
adidas-R01-C05.jpg |
adidas-R01-C06.jpg |
adidas-R01-C07.jpg |
adidas-R01-C08.jpg |
adidas-R01-C09.jpg |
adidas-R01-C10.jpg |
adidas-R01-C11.jpg |
adidas-R01-C12.jpg |
adidas-R01.spin
If you wish to strip superfluous R01 or C01 entries in your .spin file names, either right-click and use "Rename" to change the name or contact Sirv support from your control panel and request for R01 or C01 to be automatically stripped.
Custom spin detection
If you use an image naming format that is not detected by default, Sirv offers custom spin detection algorithms for Enterprise accounts. Continue using your existing file naming convention and Sirv will be customized to fit that convention. Please contact support with your requirements.
Replacing images in a spin
If you upload one or more images with the same file name, the existing images will be overwritten and the cached spin images will be immediately invalidated. The next time the spin is requested through the browser, it will be recreated using the latest images.
Corrupt or missing images
A spin will be created even if one or more images are missing or corrupt.
Sirv will detect the missing or corrupt images and skip them when the spin rotates.
Corrupt files will display an error message in your control panel, recommending that you reupload them.