Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

FileUpload: Thumbnails instead of just scaling full sized images

edited May 2011 in Vanilla 2.0 - 2.8
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/')); } $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.


  • Options
    I am going to try this when I get a chance. Thanks for contributing.
Sign In or Register to comment.