Not too long ago, I decided to experiment with Adobe's AJAX Framework, Spry. And I have to say I love it. Its surprisingly easy to use and implement and I cant wait for version 1.6 where they hope to address some of the accessibility issues that have been plaguing the framework. Being an owner of MX Kollecton, I wanted to be able to combine Spry and MX Kollection/ADDT together. First order of business was being able to getting ADDT to generate image thumbnails dynamically on upload so as to remove the need of doing this manually. After putting a solid few days into this, the following solution is what I have come up with. Bare in mind that some of the code I cant take credit for some of the code I am going to use here. I have however modified them for the purposes of this tutorial.
If you are using MX Kollection / ADDT, I will simply assume you know how to use the Upload and Resize Image server behavior in order to upload files. I will be writing a series of tutorials on using ADDT as soon as I get a few things sorted. Anyway, if you have you file upload form in MXK8/ADDT ready, open it up in Dreamweaver. Make you have applied the Upload and Resize Image behavior. Now we will need to ADD a custom trigger. From the Server Behaviors panel, click on (+) > Developer Toolbox (MX Kollection if you use DW8) > Forms > Custom Trigger.
This should bring up the Custom Trigger dialog box.

This is the code you need to copy and paste:
// CREATE THUMBS ON FILE UPLOAD USING ADDT & MX KOLLECTION
// Your Image
$imgID = $tNG->getPrimaryKeyValue();
$dest = $tNG->getColumnValue("id_file");
$file = $tNG->getColumnValue("name_file");
$imgSrc = "images/$file";
// Get image dimensions
$image_info = getimagesize($imgSrc);
$image_width = $image_info[0];
$image_height = $image_info[1];
$image_type = $image_info['mime'];
// Get image size
$bytes = filesize($imgSrc);
$bytes2 = filesize($imgSrc);
if( is_numeric( $bytes ) ) {
$position = 0;
$units = array( " Bytes", " KB", " MB", " GB", " TB" );
while( $bytes >= 1024 && ( $bytes / 1024 ) >= 1 ) {
$bytes /= 1024;
$position ;
}
$image_size = round( $bytes, $decimal ) . $units[$position];
} else {
$image_size = "0 Bytes";
}
// Save the image into memory (for manipulation with GD Library)
// and determine MIME type
switch ($image_type) {
case 'image/jpeg':
$myImage = imagecreatefromjpeg($imgSrc);
break;
case 'image/gif':
$myImage = imagecreatefromgif($imgSrc);
break;
case 'image/png':
$myImage = imagecreatefrompng($imgSrc);
break;
}
///--------------------------------------------------------
/// Setting the crop size
///--------------------------------------------------------
if($image_width > $image_height) { $biggestSide = $image_width; }
else { $biggestSide = $image_height; }
//The crop size will be half that of the largest side
$cropPercent = .6;
$cropWidth = $biggestSide*$cropPercent;
$cropHeight = $biggestSide*$cropPercent;
//getting the top left coordinate
$c1 = array("x"=>($image_width - $cropWidth)/2, "y"=>20);
//--------------------------------------------------------
// Creating the thumbnail
//--------------------------------------------------------
$thumbSize = $size;
$thumb1 = imagecreatetruecolor(90, 90);
imagecopyresampled($thumb1, $myImage, 0, 0, $c1['x'], $c1['y'], 90, 90, $cropWidth, $cropHeight);
// Update database with Image Height & Width info.
$query = "UPDATE files SET size_file = '$image_size', size_file_bytes='$bytes2', height_file='$image_height', width_file='$image_width', filetype_file='$image_type' WHERE id_file='$imgID'";
$result = mysql_query($query) or die("Update has failed!");
//final output
header('(anti-spam-(anti-spam-(anti-spam-(anti-spam-content-type:)))) ' . $image_info['mime'] . '');
imagejpeg($thumb1, "images/thumbnails/". "thumb_". $file, 100);
imagedestroy($thumb1);
Once you have pasted the code in to the Basic tab, click on the Advanced tab. Set the priority type to END and click the OK button to close the Custom Trigger dialog box.

This is the table structure I used in this tutorial:
CREATE TABLE `files` (
`id_file` int(11) unsigned NOT NULL auto_increment,
`name_file` varchar(50) NOT NULL default '',
`size_file` varchar(20) default NULL,
`height_file` int(11) default NULL,
`width_file` int(11) default NULL,
`filetype_file` varchar(30) default NULL,
`size_file_bytes` int(11) default NULL,
PRIMARY KEY (`id_file`)
) TYPE=MyISAM;
Hope this helps anyone who is looking to generate thumbnails automatically when uploading files with ADDT for use in Spry.
« Previous Article Next Article »

