Generate thumbnails automatically for uploaded images on OpenWYSIWYG

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.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • MySpace
  • Netvibes
  • StumbleUpon

Tags: , , ,

One Response to “Generate thumbnails automatically for uploaded images on OpenWYSIWYG”

  1. Koualsky says:

    Silly question from newbie to pros:

    why do such editors like OpenWYSIWYG trim any whitespace in html view? Is it necessary to right operation in visual mode?

    Just asking because sometimes I used to insert ready html blocks with explicit styling classes from my external css, when there’s a need for html re-editing, it’s getting hard to move around such trimmed markup.

    Thanks & Greets

    ps. great blog! keep on developing it!

Leave a Reply