Generate thumbnails automatically for uploaded images on OpenWYSIWYG

Mahmoud M. Abdel-Fattah — Sat, 02 May 2009 17:18:56 +0000

We wrote this post specially to integrate openWYSIWYG with jQuery Lightbox, so we recommend you to read this article too http://www.hdeya.com/blog/2009/05/generates-lightbox-on-the-fly-using-jquery/

OpenWYSIWYG is a free & Open source WYSIWYG “rich text editor”, and it has a php add-on for images upload. In this post we’ll describe how to generate thumbnails automatically on images upload.

1. Download OpenWYSIWYG, and create a new folder called thumbs inside your uploads folder.

2. Edit /addons/imagelibrary/insert_image.php, add the following code after line 44 :

function createThumbnail($imageDirectory, $imageName, $thumbDirectory, $thumbWidth)
   {
      $srcImg = imagecreatefromjpeg("$imageDirectory/$imageName");
      $origWidth = imagesx($srcImg);
      $origHeight = imagesy($srcImg);
      $ratio = $thumbWidth/$origWidth;
      $thumbHeight = $origHeight * $ratio;
 
      $thumbImg = ImageCreateTrueColor($thumbWidth, $thumbHeight);
      imagecopyresized($thumbImg, $srcImg, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $origWidth, $origHeight);
      $temp_file_name = explode(".", $imageName);
      array_pop($temp_file_name);
      $temp_file_name = implode("", $temp_file_name);
      $thumbImgName = $temp_file_name. "_thumb.jpg";
 
      imagejpeg($thumbImg, "$thumbDirectory/$thumbImgName");
      imagedestroy($thumbImg);
   }

3. search for :

if($upload) {
	move_uploaded_file($_FILES['file']['tmp_name'], $leadon . $_FILES['file']['name']);
	$thumbs_directory = $leadon . "thumbs/";

then add the following code after :

	createThumbnail($leadon, $_FILES['file']['name'], $thumbs_directory, '120');

Finally, open your browser, and try to insert-image through your OpenWYSIWYG, you’ll find your image uploaded successfully & a generated thumbnail for it found on /thumbs folder.

Hdeya team blog » automatically

Generate thumbnails automatically for uploaded images on OpenWYSIWYG