Migration from Magic Touch
Migrate from Magic Touch to Sirv
On 1st January 2015, Magic Touch was retired.
It's successor is Sirv, a full-blown dynamic image service that applies real-time resizing, cropping, watermarking and other effects to your images.
Sirv was designed for the modern web - responsive imaging for pixel-perfect images regardless of screen size; 360 degree spin for an immersive online shopping experience; deep zoom into huge images for fast, intricate detail.
Demo
We didn't just port Magic Touch technology to Sirv - we gave it a huge upgrade. After migrating, you'll enjoy:
- Faster loading
- Smoother zooming
- Easy file management
- Blink-of-an-eye processing
- Responsive design for a great mobile experience
Migration requires 2 steps:
1. Upload your images
Unlike Magic Touch, Sirv does not fetch images from your server. Instead, you upload your images directly to Sirv.
With Sirv being a dynamic image service, you don't need to resize, crop or optimize images. Just upload your original hi-res images and Sirv will output them at whatever size, quality, shape you need.
We recommend using FTP to upload images for easy, fast, mass uploading. You can also upload images directly through the browser in your Sirv account.
It is not possible to copy your images from your Magic Touch account as the originals are not stored. The original images are located only on your server.
Please login to your Sirv account by FTP and upload your images:
- FTP server: ftp.sirv.com
We recommend using folders for effective organisation. If you already have all your product images stored in a systematic way, its just a case of dragging them into FTP to upload them.
If you don't have a logical file structure already, now is a good time to get organised. A logical folder / file name structure will not only help you manage your files, it will also allow your site template to automatically fetch the correct images for each page on your site.
Let's consider a possible filing method for a site that has an SKU for each product:
- http://example.sirv.com/products/105763/view-1.jpg
- http://example.sirv.com/products/105763/view-2.jpg
- http://example.sirv.com/products/105763/view-3.jpg
- http://example.sirv.com/products/105763/view-4.jpg
Here is the breakdown of each part of those URLs:
- http://example.sirv.com/ is your unique subdomain on Sirv.
- products/ is a folder where you store all your product images.
- 105763/ is the folder with the SKU (unique product ID) of your product.
- view-1.jpg and view-2.jpg etc. are the names of your images.
You could simplify the system by not having a products folder:
- http://example.sirv.com/105763/view-1.jpg
- http://example.sirv.com/105763/view-2.jpg
- http://example.sirv.com/105763/view-3.jpg
- http://example.sirv.com/105763/view-4.jpg
In either of those examples above, the predictability of URLs mean you can update your page template (using PHP/ASP/JavaScript/Perl or other) to automatically fetch the correct images for all pages across your store. You don't need to manually reference each image one-by-one.
You might want to use Sirv for all your websites, now and in the future, so consider using a folder per site:
- http://example.sirv.com/widgets2u/the-mega-widget/image 1.jpg
- http://example.sirv.com/widgets2u/the-mega-widget/image 2.jpg
- http://example.sirv.com/johns-blog/2013/yosemite with claire and dave.jpg
- http://example.sirv.com/johns-blog/2013/yosemite party.jpg
- http://example.sirv.com/theframingshop/frames/ornate-gold-6cm.jpg
- http://example.sirv.com/theframingshop/paintings/Thomas Brent/The-Fields-001.jpg
2. Replace your Magic Touch code
After uploading your images, update the code in your HTML pages/templates.
First, replace your magictouch.js file reference - it looks something like this:
<script src="http://www.magictoolbox.com/mt/XYZ123/magictouch.js" type="text/javascript"></script>
with this reference to sirv.js:
<script src="https://scripts.sirv.com/sirv.js"></script>
Next, replace the reference to your zoomable image e.g.
<a href="large.jpg" class="MagicTouch"><img src="small.jpg"/></a>
with the reference for that image in your Sirv account e.g.
<div class="Sirv" data-effect="zoom">
<img data-src="//sirv.sirv.com/Examples/test-canon.jpg"/>
</div>
The code for your image zoom is shown in your Sirv account. Click the "Embed" button and you'll see the code for embedding a zoomable image:
To swap between multiple images, please refer to the Documentation. Here's a demo.
If you added custom Magic Touch settings to the code of your page, delete those too.
On Sirv, all the settings are saved in a Profile. Go to your Profiles folder and create a new profile. Choose the settings you wish to apply to your zooms. Then apply that profile to as many zooms as you wish by attaching ?profile=yourprofile to the end of the URL.
For example:
<div class="Sirv" data-effect="zoom">
<img data-src="//sirv.sirv.com/Examples/test-canon.jpg?profile=yourprofile"/>
</div>
You can create as many profiles as you wish. They make it quick to apply a set of options to many images. Profiles also permit you to update all those images at any point in the future simply by changing the profile settings. No changes to your code.
If you want to achieve a particular layout or style, please email us your questions.
Expert help
Let us help you switch to Sirv, contact the Sirv support team.
