3 Comments   Saturday, 22nd September 2007

Spry, ADDT & PHP Dynamic Images

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.

ADDT Custom Trigger

This should bring up the Custom Trigger dialog box.

Custom Trigger Basic Tab

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.

Custom Trigger Advanced

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.

 
Filed In: ADDT (Kollection) Tutorials & Tips
Share |


« Previous Article Next Article »



Other Posts You Might Like


blog comments powered by Disqus

Archives

 
 

Latest Tweets

Recent Comments

Powered by Disqus

 


About Me

My name is Emmanuel Okorie. I am by profession a web designer who is trying to expand his expertise into other areas of media such as Digital Video, Photography and General Design.

You can read a bit more about me by visiting the About Me page.

 

 
[ Login ]