YoTricks.com is a yo-yo trick video website. Unlike most websites that rely on words to convey their content, YoTricks.com uses video. This presented several unique challenges in web design.

The first challenge is search engine optimization; more specifically, how do you make a site that relies on video search-able to text-based search engines. This problem was overcome by adding SWFObject alternate content to each of the videos and by including video transcripts on each page. In general, few yo-yo players would be interested in reading the video transcripts so they are discreetly concealed using a javascript drop down mechanism. This way the page is still attractive and functional while being eminently search-able.

The second challenge is site organization. Each trick needed to be arranged by trick category and in order of difficulty. Arranging tricks by category was easy because the functionality is built into wordpress. The sub-arrangement of difficulty was achieved by adding a hidden meta-number to each post that quantifies each trick’s difficulty. This way, within each category, the tricks can be arranged numerically.

Finally, to make the site easy to use any trick can be played from the main post or from the sidebar. This means the user need click on fewer links and open fewer pages to find and view the trick videos. Combine this with superior video quality and expert content and you have one of the best yo-yo trick video websites online.

It was pretty straightforward up until this point, but I had a few problems.

1. In the description text I wanted to display a link to the website the screenshot was taken from.

2. When I clicked on the image in the ImageFlow it displayed the image in the browser instead of going to the website the image represented.

The first problem was easily overcome. The ImageFlow plugin uses the “Alt & Title Text / Description” text associated with the image in the NextGEN gallery you have created. For each picture I added a brief title along with a hyperlink to the page. So:

Personal Blog <a href=http://theyomen.com target=”_blank”>http://theyomen.com</a>

You will notice that for the href tag I left the quotation marks out. This enabled the ImageFlow plugin to display the hyperlink properly. Unfortunately, this had an unintended consequence. Since this text in this box is used for the title tag whenever I moused over an image on the ImageFlow it would reveal all code. Ugly. To correct this I went to the plugins directory and found nextgen-imageflow/lib/functions.php. On line 102 you’ll find:

alt=”‘.apply_filters(’the_title’, $picture->description).’” title=”‘.apply_filters(’the_title’, $picture->description).’”

I changed this line to:

alt=”‘.apply_filters(’the_title’, $picture->description).’” title=”"

This eliminated the mouse over problem.

The second problem was also easily overcome. I simply eliminated the link information in the onClick statement in the java script file. The file is found at nextgen-imageflow/imageflow/imageflow.js and line 61 can be changed from:

function() { document.location = this.url; }   /* Onclick behaviour */

to:

onClick:            function() {}   /* Onclick behaviour */

This change stopped anything from happening when an image is clicked. The result is a nice coverflow method for viewing a website portfolio.

This was done using NextGEN Gallery 1.02 and NextGEN ImageFlow 1.1