THE VIVA ZOOM PLUGIN

For Wordpress 2.3+ and 2.5+

USER GUIDE
V1.0 – MAY 2008

© Copyright Information.

Viva Zoom is licensed for Single Site, Multi Site or Theme Developer use and should be used
within the terms of the license you purchased only. Information on the licenses can be found at
http://www.mediatricks.biz/demo/faq.

Resale of this plugin in any way, shape or form including inclusion (or code inclusion) in Pro
Themes is prohibited unless you have purchased the Theme Developer’s License.
 www.Mediatricks.biz © 2008

TABLE OF CONTENT

TABLE OF CONTENT 2

INSTALLATION AND SETUP 4

TUTORIAL – STEP 1 - UNDERSTANDING THE PROCESSING FILES 5

THE SHOW_IMAGE_.PHP FILES 5

TUTORIAL – STEP 2 – ADDING VIVA TO YOUR THEME. 7

A. VIVA ZOOM – IN LOOP 8
B. STANDARD VIVA THUMBS – THUMBNAIL WITHOUT ZOOM FEATURE. (IN LOOP) 10
C. VIVA ZOOM – OUTSIDE OF THE WP LOOP. 12

WHAT IS INTELLI-CROP? 13

FAQ 15

TUTORIAL - HELP WITH REVOLUTION THEMES 17

TUTORIAL – HELP WITH ‘UNSTANDARD’ THEME 19

SUPPORT 20
 www.Mediatricks.biz © 2008

The Viva Zoom Plugin – v1.5

Thumbnailing on the Fly with Dynamic Zoom Outs

In this pack you will find:

1x Viva Zoom Plugin folder

1 x viva.inc class file for processing images. (This is the file that does all the
work)

Sample showimage.php files containing thumbnail manipulation information.

(You can create as many of these as you like with custom settings for any image
sizings.)

Sample image file labeled for category 1. (You will replace this with your own
image and create extra ones for each category id in use in your blog.)

PLEASE READ THIS TUTORIAL DOCUMENT THOROUGHLY BEFORE

REQUESTING SUPPORT. IT IS HERE TO HELP YOU AND THOUGH IT MAY
LOOK DAUNTING IT IS REALLY STEP BY STEP SIMPLE.
 www.Mediatricks.biz © 2008

Installation and Setup

Five things you need to do first:

1. Create a default category image for each top level category used in
your blog.

Each image should be saved as categoryid.jpg (eg. 12.jpg – for category

12) and saved to the wp-content/uploads folder (or your default uploads
folder)

(Recommended size is 640 x 480 – or images that are at least 400px wide
or tall depending on their orientation. Some samples are included in this
package.)

2. Upload all the files from this zip (including your new default category
images) to your blog directory and set the permissions as given below.

->Blog Root

All the sample show_image_.php files included in this zip

viva.inc.php

->wp-content
->plugins

The Viva Zoom folder and all files inside it. (DON’T RENAME IT!)

->uploads (create if it doesn’t exist and CHMOD 777)

All your images created above

->cache (create if it doesn’t exist and CHMOD 777)

4. Make sure your theme files (in wp-content/themes/ your_theme/) are

writable (CHMOD 666) so that you can edit them through the WordPress
Admin area (Admin>Presentation > Theme Editor) or open the theme files
in an editing software to upload to your site later via ftp.

5. Activate the Viva-Zoom Plugin – uploaded above – from the Plugins

page.
 www.Mediatricks.biz © 2008

TUTORIAL – STEP 1 - UNDERSTANDING THE PROCESSING

FILES
The Show_Image_.php Files

Every VIVA call in your theme first creates a check to see if a thumbnail has
already been created and exists in the cache folder. If no cache file exists for the
current image, Viva runs a php script that takes the source image, resamples it to
a required size and then displays it.

The files that do this work are called the PROCESSING File.

Your site needs to have a Processing file for each location in your theme where
a thumbnail of a specific size is required, e.g. sidebar, featured article, homepage
left, homepage right. In other words, if you are going to use 5 different sized
thumbnails on your site – you will have 5 different PROCESSING files and in
your theme code you will have to tell VIVA which one to use at each point.

There are 12 variables you need to edit at the top of each show_image_.php file
you create. These are all annotated in the sample php files and most changes
are as simple as setting a value to 0 or 1 for OFF or ON.

Let’s take a look at the settings in show_image_sidebar.php.

$filesuffix='sidebar'; //The last part of the file name -

ie. the ‘PROCESSOR name that you enter in a Viva call.
(this filename is show_image_sidebar.php)

$newwidth=120; //The width of the thumbnail this file will

create

$newheight=100; //The height for the thumbnail this file

will create

$caching=0; // File caching on/off – This saves server

resources and improves page loading speed. (Set to 0 while
testing and then change it to 1 after you are happy with
your Viva crop and resize settings.)

$jpgcompression=80; //Jpg compression setting. The default

is 80%. This affects the display and save quality of the
thumbnails

$reflect=0; //reflection on or off. 1 = on, 0 = off

 www.Mediatricks.biz © 2008
$reflectheight=40; //Height in pixels of the reflection (if
$reflect is set to 1.

$border=1; //Border on (1) or off (0). This setting only

works if $reflect is set to 1 (On) (You can set
$reflectheight to 0 to have a border but no reflection
depth)

$intellicrop=1; //Intelligent cropping on (1) or off (0)

OFF means the image is cropped from the top left corner,
not the logical centre

$onlyresize=0; //Dont crop just resize the image. This

preserves the original image and means only the newwidth or
newheight attribute is used to keep the image in
proportion/ 1=ON, 0=OFF

$onlywhat=’width’; //If onlyresize is ON (1) then you must

say which dimension to use w or h (width or height) This
ensures the image stays in proportion.

The last two settings can probably be left as is for most

users unless you are using a different path for your
uploaded media.

$uploadspath="wp-content/uploads"; //edit this to your

folder path from blog root to where WP stores your uploads
(most users can leave this as is)

$cachepath="cache"; //This is the folder under the above

folder that will store the image thumbnails Viva creates.

To create a new Processing file just create a copy of an existing one, change the
suffix of the filename and update the settings above. Put the file in your blog root
and then you can use it in a Viva Function call.

TOP TIP:
The most common mistake is NOT setting the first variable to match the name of
your show_image file.

If you create a show_image file called show_image_sidebox.php make sure to

set $filesuffix=“sidebox”; in the settings of that file.
 www.Mediatricks.biz © 2008

TUTORIAL – STEP 2 – Adding VIVA to your theme.

There are three core functions available with Viva Zoom.

A. Generate a thumbnail that links to a dynamic Zoom Out larger image –

from inside the loop. The image url and caption info is identified from the
post data

B. Generate a thumbnail only – from inside the loop. The image url and
caption info is identified from the post data

C. Generate a thumbnail that links to a Zoom Out larger image – from outside
the loop - the image url and caption info is specified in the function call.

The way to enter each of these functions into your theme is quite straightforward
and detailed in the following pages.
 www.Mediatricks.biz © 2008

A. Viva Zoom – In Loop

Use the following function to create a Zoom-out thumbnail from within the
wordpress loop.

<?php vz_inloop($processor-file, $default-cat, $Read-more-text); ?>

There are three variables to complete in this function

$processor – The suffix of the PROCESSOR file that sets the size and style of
the thumb for this location in your theme.
$default-cat = The number of the category image to display if no image is found
attached to the post
$Read-more-text = The text to display with a link to the full article.

EXAMPLE:

I am displaying posts in my sidebar from category 7 of my site. I want Viva Zoom

to generate a thumbnail image linked to a Zoom Out for each article in the loop
and display the default 7.jpg (category image) if the article has no linked images.

In my theme I enter this:

<?php vz_inloop(sidebar,7,’Read This Article’); ?>

Viva Zoom first checks to see if the post has a custom field called thumbnail. If so
the image path referenced in this field will be used for the thumbnail image.

If there is no custom field Viva checks the WP database to see if any images
were uploaded with the post. If so, it takes the first image and uses this to create
the thumbnail

The other information used in the ZoomOut windoe comes from the WP
database also:

The image alt text (for mouseover the thumb) is taken from the Image Title
The Image caption and description (entered while in the upload media screen on
WP) are used to create the caption box under the zoom-out image.

If the image doesn’t have any caption or description information Viva enters the
Post Title below the image in the Zoom-Out. With a link to the full article using
your READ MORE text.
 www.Mediatricks.biz © 2008

Viva Zoom-Outs use information stored with the image in the WP database.

The image
title is used
as the alt text
for the
thumbnail.

The image caption and

description are put in a div
tag below the Zoom Out
Image. (If this info is
missing the Post Title is
displayed.) A Read More
link is also added linked to
the post’s permalink.
 www.Mediatricks.biz © 2008

B. Standard Viva Thumbs – Thumbnail Without Zoom Feature. (In

Loop)

Wherever you want a static thumbnail image on your homepage or sidebar Viva
Zoom can help out. All you need to do is put this Viva code inside an image
src=" " call within your theme pages.

Eg. <img src="<?php viva('A','1'); ?> " alt="My image" etc etc. />

NB: For static Thumbnails – the VIVA function goes INSIDE the img tag’s
src=“ “ value.

In the above example A is the suffix of the PROCESSOR file that you have
uploaded to your blog root. And 1 is the category number for that section of your
site. This number is used to pull a category image if there is no image attached to
the post.

So - for example. You might have a PROCESSOR file called

show_image_sidebar.php.

The code in this file tells viva to resize the source image to 100x100px

On your homepage you want to display a 100px x 100px thumbnail with the posts
in your sidebar that are from category 5.

So, your viva code looks like this

<img src="<?php viva('sidebar','5'); ?>

When you load your page - Viva will look for an image attached to the post at this
point in the WP loop and thumbnail it to 100x100.

If there is no image it will look in wp-content/uploads and display 5.jpg (your

default image for category 5.)

If 5.jpg does not exist then Viva will try one last time to avoid displaying a broken
image and fill the gap in your theme with the file 1.jpg (which is used where all
else fails! So be sure that you have uploaded a file called 1.jpg to your default
uploads folder.)
 www.Mediatricks.biz © 2008

TOP TIP:
If in your sidebar you are calling ALL recent posts (not a specific category) Viva
can identify the default category image for posts that don’t have an image
attached. To do that your viva call would be:

<img src="<?php viva('sidebar',''); ?> //category number left empty

Here if Viva finds a post from cat 3 without an attached image it will display a
thumbnail of 3.jpg

If another post from cat 5 has no image Viva will thumbnail 5.jpg

This is the best method of using Viva where you do not need to FORCE the
default image to match a specific category.

It's really very easy to implement Viva if you follow this logic.
 www.Mediatricks.biz © 2008

C. VIVA ZOOM – Outside of the WP Loop.

Finally, what if you want to easily create Zooming Thumbnails using images on
your theme that are outside of the WP loop. Well, even that is easy in Viva Zoom.

<?php vz_noloop($processor-file, $url, $nameid, $alt, $caption); ?>

Enter the above function call and edit the 5 variables as follows:

$processor-file = The suffix of the Processor file that sets the thumb size and
type

$url = The full url to your image file. (NB – The image MUST be inside your
default uploads location.)

$namid = A unique name for this Viva Zoom image so it can be used to make a
cache of the new thumbnail sizes.

$alt = The alt text for mouseover of the thumbnail

$caption – The caption to be displayed under the image in the Zoom Window.
(Captions can contain html such as links etc.)

EXAMPLE USAGE:

My site has a 125x125 ad box which I want to link to a Zoom Out with a caption
that has more detail about the advertiser. I have uploaded my original image to
mysite.com/wp-content/uploads/ad.jpg. In my home.php I enter:

<?php vz_noloop(

Adbox,
‘http://mysite.com/wp-content/uploads/ad.jpg’,
ad1,
’Click here To Learn More’,
’This advertiser is great! Check out there website <a
href=“http://www.Adweb.com”> HERE <a/>’

); ?>

I have broken each item onto a new line above just for ease of understanding.

NB – Any variables that are longer than a single word or number should be
enclosed in single quote marks.
 www.Mediatricks.biz © 2008

What is INTELLI-CROP?

Intelli-crop® is a maths algorithm that helps Viva crop the most logical part of the
image. It does this by identifying the image dimensions and then, based on the
new size attributes using the Photogrpaher’s Eye rule to ascertain the image
centre.

The key to getting good Crop results using Intelli-Crop is to choose well framed
images i.e Images where the content is well centered with adequate border.

TOP TIP:
A well shot photograph will be cropped superbly by Intelli-crop. Intelli-crop prefers
images that are NOT pre-cropped. I.e. Are portrait or landscape with a 4:3 ratio –
as most original photographs are.

Here are some visual examples of how intelli-crop sets the crop area on your
images:

LANDSCAPE IMAGE.
 www.Mediatricks.biz © 2008

PORTRAIT or SQUARE IMAGE

Images that are pre-cropped (i.e. already very tall or long and thin), or those that
are not well ‘framed’ will not acheive good auto-crop results as a computer
cannot ’see’ the image. Therefore, choosing the right images to use with your
post is the one responsibility that you are left with - VIVA will do all the work after
that!
 www.Mediatricks.biz © 2008

FAQ

I want to use a different folder for my uploaded images and cache files

If you want to store your image files in a directory other than wp-content/uploads which
is the default WP location then you should edit lines 21-24 of the Viva-Zoom.php plugin
file setting the path to your folders. The directory must be within your WP installation.

The same path information must be entered on lines 25,26 of each Show_image file you
use.

I want to display a different thumbnail on my homepage than the image

uploaded and included in the post body.

There are two ways to do this. By default VIVA will use the FIRST image
uploaded to a post as the thumbnail image. So you could upload one image to
use a thumbnail and NOT insert it into your post body. (This will be used by
VIVA) Then upload a second image and insert it into the post. Or use the method
below.

I want to link to an image already uploaded.

If you want to link to a pre-uploaded image as the thumbnail you will need to add
a single custom field to the post.

Add the Custom Field with a KEY called “thumbnail” (all lowercase – no quotes)
and in the VALUE field enter the relative path to the image from you uploads
folder.

I.e. if the image is at http://www.me.com/blog/wp-

content/uploads/2008/04/test.jpg

Then in the VALUE field only enter /2008/04/test.jpg

Be sure to start the relative url with a forward slash!

I uploaded an image but the default category (or default) image is

displaying.

If you are not seeing the image that you uploaded FIRST with your post as the
thumbnail check that:

The image is a jpg, gif or png file. (BMP and TIFF are not supported.)
 www.Mediatricks.biz © 2008
The image has no spaces in its filename
The image is correctly uploaded and is in a directory under the wp-
content/uploads folder

Clear your wp-content/uploads/cache folder and refresh your page.

For other support and FAQ check out our support forum at
http://www.mediatricks.biz/support
 www.Mediatricks.biz © 2008

Tutorial - Help With Revolution Themes

In your Revolution theme files you need to update each line of code that calls for
a thumbnail. These appear in home.php, sidebar_hom.php, tabber.php and other
pages depending on your theme.

For this example we are going to use the STATIC thumbnail – No Zoom
option.

We are going to replace the img src field with a call to the Viva Plugin. The
actual call will be modified depending on which size thumbnail we require at that
point in the theme, and which default category should be displayed (if no image
exists)

To Do This:

Find an img src in your theme code. It will look something like this:

<img src="<?php echo get_post_meta($post->ID, "Thumbnail", true); ?>"

alt="<?php echo get_post_meta($post->ID, "Theme Name", true); ?> Thumbnail"
/>

Replace all code within the img src call (highlighted in blue) with the following.
(Make sure it is placed inside the quote marks of the src tag.)

<?php viva('processor','category'); ?>

Customising the tag:

a) Calling the Correct Processing File

Update the word processor to call the correct manipulation file (Use the suffix of
the manipulation file).

I.e. if you are updating the tabber.php and are going to call the
show_image_tabber.php manipulation file that we uploaded to our blog root we
would edit the Viva call to be:

<?php viva('tabber','category'); ?>

Simply enter the last word of the manipulation file that is set up to create the
correct size image for that location in your theme.
 www.Mediatricks.biz © 2008
b) Setting the Default Category

Next we must update the default category. This is to tell Viva which default
category image to display if there is no image attached to the post.

If Viva should display any category linked to the post then you can leave this
empty:

<?php viva('tabber',''); ?>

If you want to fix the display image to a certain category regardless of the post’s
category (useful for some areas of your site such as the tabber.php in the
Revolution Pro theme) then just enter the category number inside the quotes.

<?php viva('tabber','7'); ?>

Your new img code in the theme will look like this:

<img src="<?php viva('tabber','7'); ?>" alt="<?php echo get_post_meta($post-

>ID, "Theme Name", true); ?> Thumbnail" />

Repeat this process for any location in your theme files where you need to
automate the Revolution Thumbnails.

ZOOM INSTEAD OF STATIC:

If we wanted to use VIVA ZOOM instead of plain Static Viva on this example we
would simply replace the whole img tag and any surrounding <a> tags with
<?php vz_inloop(tabber,7,’Read More’); ?>
 www.Mediatricks.biz © 2008

TUTORIAL – HELP WITH ‘UNSTANDARD’ THEME

The Unstandard theme is really easy to customize using Viva as there are just
two calls in the home.php that need to be updated.

For file edits for Unstandard theme check out this link:

http://www.mediatricks.biz/support/unstandard.zip

TAKING VIVA ZOOM FURTHER

Viva Zoom can be used to create Zoom Outs for just about anything. Flash pop
ups, HTML windows, I frames, Ajax boxes and we will soon be releasing a new
e-book on developing your site further with the Power of Viva Zoom.

Keep an eye on our website for more details and Welcome to The Viva Zoom
Family.
 www.Mediatricks.biz © 2008

SUPPORT

I know at first read this all sounds pretty complicated but it’s not. If you look
through the tutorial again and then look at your theme files you should find it is
relatively easy to get VIVA ZOOM working on our theme.

If you do need support on the installation or are facing any problems with the
plugin please check out the support forum at http://www.mediatricks.biz/support
where many FAQ’s are answered.

You can also email me directly on Mediatricks@gmail.com and I will get back to
you ASAP to help you out. (Please include your site url, your Clickbank receipt
number and if possible a temporary admin login so I can help you out.)

Wishing you all the best with the new VIVA ZOOM plugin.

Tim Waddell

© 2008 www.Mediatricks.biz