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.

Generates lightbox on the fly using jQuery

Mahmoud M. Abdel-Fattah — Sat, 02 May 2009 15:22:03 +0000

This method requires you to have 2 copies of each image, the original size & thumbnail one. thumbnails MUST BE named as filename_thumb.jpg & stored in /thumbs. you must have the latest versions of jQuery & jQuery Light Box Plugin.

then add the following javascript code to you :

$(document).ready(function(){
    $("img").each(function() {
        var src_file = $(this).attr("src").split("/");
        var src_file_name = src_file.pop();
        var patt1 = /_thumb.jpg/;
        var original_file_name = "";
        if(src_file_name.search(patt1) != -1) {
            original_file_name = src_file_name.replace(/_thumb/gi, "");
            $(this).wrap("<a href=\"/uploads/"+original_file_name+"\" rel=\"lightbox\"></a>");
        }
    });
    $("a[rel*=lightbox]").lightBox();
});

Hdeya team blog » generate

Generate thumbnails automatically for uploaded images on OpenWYSIWYG

Generates lightbox on the fly using jQuery