Published on March 7th 2019 - last updated on March 13th 2019 - Listed in PHP

As I'm programming my new blog, I am also renewing the admin section. When I created the first version with the "article" system, I always had to create an article first and then later upload pictures to the article.

In the new version this can be done while I write the initial article. I've been using Xinha as editor since 2011 and was always happy with it. I was ready to ditch Xinha for another editor (e.g. tinymce) because what was really missing was a direct file uploader. Looks like Xinha got this now with the plugin MootoolsFileManager.

Once I got the plugin to work, I had yet to figure out a way how thumbnails would be created and would be saved besides the original name with a "_tn", right before the file suffix.

In the MootoolsFileManager plugin folder, there is a file "mootools-filemanager/Assets/Connector/FileManager.php". This particular file is in charge for the image uploads and resizing. Although there is resizing involved, it basically only resizes the uploaded picture if it's larger than a defined height and width. This is handled by the following part of the PHP script:

if (FileManagerUtility::startsWith($mime, 'image/'))
{
if (!empty($resize_imgs))
{
$img = new Image($file);
$size = $img->getSize();
// Image::resize() takes care to maintain the proper aspect ratio, so this is easy
// (default quality is 100% for JPEG so we get the cleanest resized images here)
$img->resize($this->options['maxImageDimension']['width'], $this->options['maxImageDimension']['height'])->save();
unset($img);

To create the thumbnail, I decided to use the PHP extension "Imagemagick" and use the $file value. To create a thumbnail, there is a dedicated function available: thumbnailImage. However I read the comment from user "Jarrod" and decided to use his code for the resizing and compression.

First define the size of the thumbnail, followed by creating a new Imagick object. This uses the already defined $file value.After this the resizing and compression happens: