In today's tutorial i'm going to show you
how to install Magic Touch in WordPress.
If you go to the main product page you'll
see the WordPress icon on the right hand side
which will take you to the Magic Touch for
WordPress page.
Magic Touch was created so you can zoom into
any size image you want.
In fact, the bigger the better.
Magic Touch slices the large image into smaller
images called tiles which makes the image
load as quickly as possible.
I'll talk more about this later in the video.
First, download the Magic Touch WordPress
plugin, and go to your WordPress admin area
and select Plugins.
Click Add New and then click Upload.
This will take you to the Upload page.
Browse your computer for the plugin you've
just downloaded, this will be a zip file called
mod wordpress magictouch.
And select Install Now.
Once that's done select Activate Plugin.
You can see under Plugins, Magic Touch is
now showing.
If you click on the Magic Touch Configuration,
you'll be taken to the Magic Touch Settings
page.
You can see there's an empty field for Unique
ID.
If you know your Magic Touch key, enter it
now.
If you don't know your Magic Touch key, you
can get the details from your Magic Touch
account page.
Go to the Sign In page on our website, and
enter your email address and password.
You'll be taken to your Magic Touch page and
part way down you'll see your Magic Touch
key.
Copy the Key and go back to the Magic Touch
Settings page in WordPress and paste your
Key into the field.
If you don't already have a Magic Touch account
you can create one for free.
Go back to the Magic Touch for WordPress page
and this time click Sign Up Now.
Enter the details you want to use to create
your account and when you've finished click
Create Account.
You can see a message letting me know a verification
email has been sent.
If I go to my email account you can see the
email is already there.
Simply open your message and click the activation
link.
You'll automatically be taken to the Welcome
page.
Go to the Magic Touch section and click Register.
This will take you to your new Magic Touch
account.
The first thing I want to do is add the website
domains where I'm going to use Magic Touch.
You can do this by clicking on Domains or
Integration on the left.
I've chosen Integration and I'll select Number
1, Add the Domains.
Simply enter the domain name.
In this case your WordPress website and click
Add Domain.
If I click Magic Touch i'm taken back to my
main account page and you can see the Magic
Touch Key shows part way down.
Copy your key and paste it into the Unique
ID field.
The next step is to add your Magic Touch images
to your WordPress Page or Post.
I'm going to add them to a Post I've already
created.
Make sure you're working in the HTML View.
For ease, I've entered the full url references
for each of my images in Notepad.
You'll need a small image and a large image.
The code we need to enter can be found on
our website.
Under Magic Touch, click the Integration link
and go to Number 1 Installation.
Under point 3 you can see I've highlighted
the code we're going to use.
Copy the code and paste it into your WordPress
Page or Post.
You can see there is a href which is where
I'll enter my large image reference.
I'll copy my large image and paste it over
big.jpg.
In the code you'll see a Magic Touch class
which we need for Magic Touch to work, and
finally the small image which will appear
on my web page.
So I'll copy and paste the small reference.
If you save what you've done so far and preview
it you can see my small image is showing on
the web page and the large image is loading.
This will take about twelve seconds.
It's because it's the first time Magic Touch
is being used on this page so what Magic Touch
does is it goes over to the server, fetches
the large image, it takes it over to the Magic
Touch platform, and slices it into hundreds
of images.
These are the tiles I mentioned earlier.
Once the image tiles have been created, the
zooms typically load in less than one second
for all future visitors.
The reason we're able to zoom so quickly is
because it only loads the tiles you actually
need in order to see the part of the image
that you're requesting.
The large camera image I used in my example
was approximately two and a half thousand
by eighteen hundred pixels in size.
The landscape image you can now see is nearly
five thousand pixels width by over seven thousand
pixels height.
Which is a huge image.
Normally, you couldn't have images this big
without slowing your website right down.
But with Magic Touch it's no problem.
The bigger the image the better.
You can see as I zoom into the image each
tile loads separately, so it's a fast and
clean process.
You're able to show any image on your website,
no matter what the size and achieve a nice
deep zoom.
Okay, now that you know how to install Magic
Touch I'm going to show you how to make changes.
First I'll show you how to change the level
of zoom.
Then we'll change the text under the image,
and lastly, I'll show you how to add a border
around your image.
To do this we need to go back to the WordPress
admin area.
Go to Plugins and select the Magic Touch Configuration.
So, if we scroll down to the Zoom section,
you can see the option Quantity of Zoom Levels.
You can set this from two to nine levels.
I'm going to choose three.
Just below in the Miscellaneous section you
can see the option Show Message Under Image?
If you didn't want any text to show, select
the 'X' option.
Underneath is the option Message Under Images.
By default it says Click to Zoom In, but I'm
going to change that.
And finally, scroll down to the Background,
Borders section.
The Border Color is defaulted to grey.
So if you want a different color change that
here.
I'm going to leave it as grey and change the
Border Width to five pixels.
Remember to always save your settings when
you make changes to this page.
Now, when I reload my web page you can see
the loading icon is showing.
This is because I've changed the level of
my zoom and so Magic Touch is re-slicing my
large image into three levels instead of four.
Again, this will only happen the first time
the page is visited.
Now that's done you can see my zoom levels
are set to three.
The text has changed under the image, and
the border is now grey.
You can see at the top of the image the Magic
Touch logo.
This is because I'm using the free zooms option.
If your website receives heavy traffic and
you want to buy zooms go back to your Magic
Touch account, click Buy Zooms on the left
hand side and choose how many zooms you want
to buy from the options listed.
If you're not sure how you want to display
your images, go to our Magic Touch Examples
page.
Whether you want to reposition your buttons
or activate full screen instantly this page
will give you some great ideas.
All the HTML code for our examples and more
can be found on the integration page.
And don't forget the Magic Touch Settings
page.
Try all the options and see what works best
for your WordPress website.
At the top of each page on our website is
a Contact Us link.
So if you have any questions about Magic Touch
or any of our other tools, just get in touch.
If we're not online when you send your message
through, we'll get back to you the very next
day.
And that brings us to the end of this tutorial.
Thanks for watching.
