The game was realized as a Flash movie/Actionscript hybrid (Compared to a pure Actionscript class) with heavy lean towards code and modularity.

jQuery(function() {
    var imagesize;
    var alttxt;
    var linkhref;

    jQuery('a[class^="tag-link-"]').each(function() {
        imagesize = jQuery(this).css('font-size');
        alttxt = jQuery(this).text();
        linkhref = jQuery(this).attr('href');

        jQuery(this).before(
            '<a title="tag: ' +alttxt+ '" href="' +linkhref+ '">
             <img src="path/to/your/image" class="tagcloudimage"
             style="width:'+imagesize+';height:'+imagesize+';"
             alt="'+alttxt+' icon" /></a>'
        );
    });
});

First a couple of variables are stated. Then the jQuery action is targeted to the links of certain class. The class names of the tag cloud begin with the string ‘tag-link-’ (and is followed by the id number of the tag in question). jQuery’s .each() function goes through each matched target.

Variables are filled with values from the link in question: the font-size, the visible link text and the link to the tag archive in the href attribute. After that completely new html is written before the tag link. In this case we create an image link and  fill it with corresponding variable values.

Function like this can be easily extended to further alter the outlook of the tag cloud; for instance make the text color change by the size value and so on. The script is best to place in the footer of your page (after the tag cloud anyway).

The downside of using the WordPress gallery is that it injects its own CSS and predefined HTML tags around the images. To get rid of the default CSS a function needs to be added to the the theme’s function.php.

add_filter (
   'gallery_style', create_function (
      '$a',
      'return preg_replace("%<style type=\'text/css\'>(.*?)</style>%s", "", $a);'
   )
);

I’ve broken the lines of the code to make it fit here – it’s really a one liner but works like that too. Check out the styling that you need to add to your style.css to preserve the original gallery rule-set from sivel.net, where I found the above code.

But, that’s not enough. For the purpose I needed to be able to create the gallery from the scratch and control the HTML tags too. First a new page need to be created with an image gallery. The page will act as the invisible reservoir of images. The page can be set to be private and it need not to be visible in any way. To shorten the story a bit I will now present the code to grab the images and echo the gallery in PHP. I used this WP outfitter blog post as a base.

<?php
 echo '<div class="gallery">';
 $images = get_children(array( 'post_type' => 'attachment',
                               'numberposts' => 6,
                               'orderby' => 'rand',
                               'post_status' => null,
                               'post_parent' => 104,
                               'post_mime_type' => 'image'
                            ));
 if ($images) {
    $k=1;
    foreach ( $images as $image ) {
       $img_title = $image->post_title;
       $img_url = wp_get_attachment_url($image->ID);
       $img_thumb = wp_get_attachment_thumb_url($image->ID);

       echo '<dl id="image_'.$k.'"><dt>';
       echo '<a href="'.$img_url.'"><img src="'.$img_thumb.
            '" alt="'.$img_title.'" /> </a>';
       echo '</dt></dl>';
       $k++;
    }
 }
 echo '</div>';
 ?>

That code will get 6 random image attachments from the post number 104, which is our invisible gallery holder page in my case. It will then get TITLE, URL of the original image and URL of the thumbnail of the six images one by one and store the values to variables. The code is supposed to be placed in the template .php file where you want your gallery to materialize.

I have here used echo to display the same HTML tags as in the original WordPress gallery along with variables in their right places. With the code above a gallery can be wrapped with the HTML tags your liking. The variable $k is interesting, because it’s used to add unique counting ID to an image: first image has id=”image_01″ and so on. This is important for our next step, because the images need to be identified by jQuery. The following code should be placed just after the above PHP block.

<script>
jQuery(document).ready(function() {
    jQuery('#image_1,#image_2,#image_3').wrapAll('<div id="upperrow" />');
    jQuery('#image_4,#image_5').wrapAll('<div id="middlerow" />');
    jQuery('#image_6').wrapAll('<div id="bottomrow" />');
});
</script>

What happens here is that jQuery picks up images of certain ID’s and wraps them with corresponding DIVs. This could have probably been done with PHP only, but that’s out of my league and jQuery has the right tools straight out from the box. All of the rows have the same CSS rules of  {float:left;clear:both}.

The finished gallery is viewable on The Haven of Yacht Club Records. By constructing loops and counters in the jQuery part and modifying the original number of images it’s possible to create quite large image/icon or attachment galleries or random visual elements.

A few pieces from the soundtrack of Anni, a Finnish indie feature film. The songs have been written, performed and produced by Simo Salo, and they are presented here as mix demos on my behalf. The tracks have not been mastered.

I needed to create a simple and easy to modify intranet database for certain project, and I now offer the setup as a complete working example. PHP and MySql are probably the most commonly used tools to organize information on the internet. The files have been derived from a couple of tutorials (about MySql database + PHP and .csv export), and I have compiled and commented the package from the ready job to an easily digestable form. The package is needlessly modular but I hope it provides building blocks for something of your own.

The example is meant to be studied in a localhost environment (Mamp (Mac) / Wamp (Win) / Xampp (Linux)). By using PhpMyAdmin or similar available tool a user named root with password root has to be created (Such user is generally preset in the environment). The user, password, host, database name and table are set in dbinfo.inc.php file. The main variables are then used throughout the example.

Next the browser needs to be directed to file createdatabase.php to create the database and table. The database creation should success with preset values at least. If there are problems check the host address and user handling from the environment help. Index.php is then to be opened with the browser. I will not review the files further, the functionality is pretty straightforward. HTML forms are used to relay data to PHP scripts, which create various MySql queries using the given variables. The method to order database data by clicking table headers is also provided.

I moved the ready job to a closed area by using .htaccess and .htpasswd files, and used .htaccess rules to protect some of the files individually from being downloaded and viewed. Especially dbinfo.inc.php needs to be protected from outsiders. If the aim is to create a public database the sql input strings need to be checked for injections. This example as such is vulnerable and open.

Download the example package: php_mysql_csv_example.zip

Sources:
http://www.freewebmasterhelp.com/tutorials/phpmysql
http://www.ineedtutorials.com/code/php/export-mysql-data-to-csv-php-tutorial
http://www.w3schools.com/php/php_mysql_intro.asp
http://stackoverflow.com/questions/2483379/order-by-column-name-help-via-link-in-html-table-view-php-mysql

Musical contributions for a Finnish Zeitgeist inspired documentary Ajan henki. Not all of the tracks on this reel were used. Besides music created for the occasion sarana live sets were employed for certain scenes.

I also created the Dolby Digital 3.1 mix for the final sound track and post-processed the sound.

Besides the film mix I also mixed and mastered the music and created a few original pieces using material from the composer (Simo Salo).

Anni uses samples and source material by Freesound.org contributors, who are listed below.

acclivity, adcbicycle, amszala, Anton, audible edge, Benboncan, bennychico11, Bram, boziav, csengeri, dobroide, dkristian, dommygee, Dynamicell, fonogeno, FreqMan, gadzooks, gelo papas, gezortenplotz, Glaneur de sons, hazure, hello flowers, HerbertBoland, homejrande, inchadney, ingeos, j1987, jasinski, jimblodget, juskiddink, LG, lonemonk, malexmedia, martian, miastodzwiekow, mikaelfernstrom, MRQZ, nathanprtII, pempi, pushtobreak, RHumphries, Robinhood76, rutgermuller, RZ 1, sagetyrtle, sandyrb, Schalkalwis, scarfield, Slanesh, slerner, stephsinger22, thealchemist12, THE bizniss, tigersound, Timbre, timofei, timtube, tmc zach, ToddBradley, Tomlija, ViaTorci, zebraphone, xef6, xyzr kx, YngvieM

The website consists of the main informational pages for organizers and interactive pages for children. The target group are children aged 6 to 12.

The site was realized with the WordPress CMS.

A selection of graphical works and image manipulations.

The related videos take you to a video series called TaigaStudio, which I also shot and edited.