FileUpload: Thumbnails instead of just scaling full sized images

Nutt

Not a big fan of the way the plugin displays attachments by just putting a max-height and max-width in the CSS. Seems a waste to load that much data only to scale it down.

And since that was the only negative in an otherwise outstanding plugin, I messed around and got it working to scale the thumbnails to a max height and width of 200px and save the cached image so it only needs to convert it once.

First thing was to download phpThumb and upload it into /plugins/phpThumb/. It could go anywhere, but my code looks for it there.

Open up link_files.php and look for where the .FilePreview div starts. It's pretty short in the default. Below is what I changed it to. If you put phpThumb in a different folder you'll need to change that location. And if you want something different than 200px as the max you'll want to change that as well.

<div class="FilePreview"><?php
$Path = GetValue('Path', $Media);
$imageSize = getimagesize(PATH_UPLOADS.'/'.$Path);
if ($imageSize) {
if ($imageSize[0] > 200 || $imageSize[1] > 200) {
$pathInfo = pathinfo($Path);

// Get dimensions of thumb
$thumbDimensions = array('height' => $imageSize[1], 'width' => $imageSize[0]);
if ($thumbDimensions['height'] > 200) {
$thumbDimensions['height'] = 200;
$thumbDimensions['width'] = intval(($thumbDimensions['width']) * ($thumbDimensions['height'] / $imageSize[1]));
}
if ($thumbDimensions['width'] > 200) {
$thumbDimensions['width'] = 200;
$thumbDimensions['height'] = intval($imageSize[1] * ($thumbDimensions['width'] / $imageSize[0]));
}
$thumbPath = $pathInfo['dirname'].'/'.$pathInfo['filename'].'_'.$thumbDimensions['width'].'x'.$thumbDimensions['height'].'.'.$pathInfo['extension'];

if (file_exists(PATH_UPLOADS.'/'.$thumbPath)) {
$Path = $thumbPath;
}
else {
try {
if (!class_exists('PhpThumbFactory')) {
include(realpath(dirname(__FILE__).'/../../phpThumb/ThumbLib.inc.php'));
}
$thumb = PhpThumbFactory::create(PATH_UPLOADS.'/'.$Path);
$thumb->resize($thumbDimensions['width'], $thumbDimensions['height']);
$thumb->save(PATH_UPLOADS.'/'.$thumbPath, $pathInfo['extension']);
$Path = $thumbPath;
}
catch (Exception $e) { }
}


}
echo Img('uploads/'.$Path, array('class' => 'ImageThumbnail'));
}
else
echo Img('plugins/FileUpload/images/paperclip.png', array('class' => 'ImageThumbnail'));
?></div>

And you'll also need to edit the CSS so that the max-height and max-width are taken out, or changed to whatever your actual max is. I think it defaulted to 32px, and if I remember right I had to change it in 2 or 3 different places.

wsessoms

I am going to try this when I get a chance. Thanks for contributing.