Tip:
Highlight text to annotate it
X
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.