Users running a non-download version of Vanilla (pulled from github), on branch release/2019.016 or master from the last 2 weeks should upgrade to release/2019.017 or latest master for security reasons. Downloaded official open sources releases are not affected.
Please upgrade here. These earlier versions are no longer being updated and have security issues.

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.

<?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')); ?>

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.


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