boardom Forum Index boardom
b2 message board
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

In process: Image upload, resize, thumbnail, popup to large
Goto page 1, 2, 3  Next
 
Post new topic   Reply to topic    boardom Forum Index -> Hacks
View previous topic :: View next topic  
Author Message
imeridian



Joined: 12 Feb 2002
Posts: 191
PostPosted: Tue May 07, 2002 5:02 am    Post subject: In process: Image upload, resize, thumbnail, popup to large Reply with quote
Explanation:

I want to be able to generate a thumbnail of all images uploaded (if you'd choose to) so that you could include a thumbnail in your post versus the full sized image (very useful for those with narrow layouts like me). This thumbnail would then link to the larger image - a sized popup would be best.

I've been looking through the source code to gallery (gallery.sourceforge.net) as it uses netpbm binaries to do some pretty excellent image manipulation.... unfortunately the code is rather complicated (to me) and very modularized, so it's difficult to see how things link together.

The other option I was considering would be to use php's own GD, as almost everyone would be able to use it that way. We could use the getimagesize function and then ImageCopyResized, etc....

or more along the lines like this:

Code:
<?php

function imagereduction($imagepath) {
        // Returns an associative array with height and width attributes of
        // Of a resized image.
        // picsize variable control the maximum size of the height/width
        // Function keeps proportions the same
        $picsize = 320;

        $size = getimagesize($imagepath);
        $dim[height] = $size[1]; $dim[width] = $size[0];

        while($dim[width] > $picsize){
                $dim[width] = $dim[width] * .5;
                $widthreduce++; }
        for($heightreduce = 0; $heightreduce < $widthreduce; $heightreduce++){
                $dim[height] = $dim[height] * .5;}
        while($dim[height] > $picsize){
                $dim[height] = $dim[height] * .5;
                $heightreduce++; }
        for($widthreduce=$widthreduce; $widthreduce < $heightreduce; $widthreduce++){
                $dim[width] = $dim[width] * .5;}

        $dim[height] = (int)$dim[height]; $dim[width] = (int)$dim[width];

        return $dim;
}
?>


This is mostly just a concept... I'm personally very far away from figuring out how to get it to work exactly... but I'm posting for the benefit of discussion and also possible suggestions.
Back to top
View user's profile Send private message Visit poster's website
nessahead



Joined: 12 Mar 2002
Posts: 312
Location: Los Angeles, CA
PostPosted: Tue May 07, 2002 5:51 am    Post subject: Reply with quote
I wish I could help out with this since I'd *love* it for my page but I don't really know anything important about php Razz Sorry!
_________________
raar!
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
imeridian



Joined: 12 Feb 2002
Posts: 191
PostPosted: Tue May 07, 2002 6:25 am    Post subject: Reply with quote
I'm not particularly qualified to really code it, well, at least I don't feel that I am.

I'm going to use this as a corkboard for ideas, provided Michel doesn't mind... ;)

Here's something else that might be useful, but only for jpegs:

Code:

 function makethumb($file)
{

if (!file_exists("thumbs/thumb_$file")) { //see if we already have a thumb there
     $src = ImageCreateFromJPEG($file);

     $filesize = filesize($file);
     $org_h = imagesy($src);
     $org_w = imagesx($src);

print "$org_h - $org_w
";

     if ($org_h > $org_w) { //see if image is horizontal or vertical
          $cfg->height = 160;  //max thumb size
          $cfg->width  = floor ($cfg->height * $org_w / $org_h);
     } else {
          $cfg->width = 160;
          $cfg->height = floor ($cfg->width * $org_h / $org_w);
     }

     $img = ImageCreate($cfg->width,$cfg->height);

     ImageCopyResized ($img, $src, 0, 0, 0, 0, $cfg->width, $cfg->height, $org_w, $org_h );

     ImageJPEG($img, "thumbs/thumb_$file", 80); //save file with 80 quality
     print "thumb generated and saved
";
     
     ImageDestroy ($img); //free resources from the image
     ImageDestroy ($src);
} else print "thumb file exists already
"; //check if its same file

}
Back to top
View user's profile Send private message Visit poster's website
michel v
Site Admin


Joined: 25 Jan 2002
Posts: 799
Location: Corsica
PostPosted: Tue May 07, 2002 7:26 pm    Post subject: Reply with quote
It's not 'only for jpeg' actually. If you replace 'imagecreatefromjpeg' with 'imagecreatefrompng', and 'imagejpeg' with 'imagepng', same code works for PNG.

That's the real idiocy of these functions. They should make some generic imagecreatefrom() and image() functions that would take as required argument the format of the file, instead of making 6 different functions (2 of them obsolete on most hosts today: imagecreatefromgif and imagegif)...

So here's pointers for you:
Find out the format of the image file, then make a function imagecreatefrom(), that would take for first argument the format of the file. Then do either imagecreatefromjpeg or imagecreatefrompng depending on the first argument ("jpeg", "jpg" or "png").
Then make a function named image() or imagecreate() that would take for first argument the format of the image, and would switch between imagejpeg and imagepng.
The rest of these functions arguments would be similar to PHP's already defined and redundant functions.
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger
Nodecam



Joined: 05 Apr 2002
Posts: 66
Location: Saskatoon, Saskatchewan, Canada
PostPosted: Tue May 07, 2002 7:31 pm    Post subject: Reply with quote
I looked at doing this, but my current PHP configuration doesn't have GD baked in, so I obviously couldn't do it.

Seems to me that it's not that difficult to do the tumbnailing (looks like you've basically got that covered) so long as GD is available.

Seems to me there was a quality issue with the ImageCopyResized() call that you might want to look into - the comments on php.net's documentation should walk you through a better way to do it.

Good luck! (Hopefully I'll get around to compiling GD into my PHP soon, then I can play with it too Smile)
Back to top
View user's profile Send private message Visit poster's website
Benjy



Joined: 25 Jan 2002
Posts: 108
Location: Paris, France
PostPosted: Wed May 08, 2002 11:21 am    Post subject: My 2 cents... Reply with quote
Following is a function I used in a Pic Of The Day PHP Script, to generate the thumbnail of an image. Use it as follows:
Code:
RatioResizeImgGD($src_file, $dest_file, $newWidth);


Code:
function RatioResizeImgGD($src_file, $dest_file, $newWidth) {
   // find the image size & type
   if(!function_exists('imagecreate')){return $src_file;}

   $imginfo = @getimagesize($src_file);
   switch($imginfo[2]) {
      case 1: $type = IMG_GIF; break;
      case 2: $type = IMG_JPG; break;
      case 3: $type = IMG_PNG; break;
      case 4: $type = IMG_WBMP; break;
      default: return $src_file; break;
   }
   
   switch($type) {
      case IMG_GIF:
         if(!function_exists('imagecreatefromgif')){return $src_file;}
         $srcImage = @imagecreatefromgif("$src_file");
         break;
      case IMG_JPG:
         if(!function_exists('imagecreatefromjpeg')){return $src_file;}
         $srcImage = @ImageCreateFromJpeg($src_file);
         break;
      case IMG_PNG:
         if(!function_exists('imagecreatefrompng')){return $src_file;}
         $srcImage = @imagecreatefrompng("$src_file");
         break;
      case IMG_WBMP:
         if(!function_exists('imagecreatefromwbmp')){return $src_file;}
         $srcImage = @imagecreatefromwbmp("$src_file");
         break;
      default: return $src_file;
   }
   
   if($srcImage){
      // height/width
      $srcWidth = $imginfo[0];
      $srcHeight = $imginfo[1];
      $ratioWidth = $srcWidth/$newWidth;
      $destWidth = $newWidth;
      $destHeight = $srcHeight / $ratioWidth;
      // resize
      $destImage = @imagecreate($destWidth, $destHeight);
      imagecopyresized($destImage, $srcImage, 0, 0, 0, 0, $destWidth, $destHeight, $srcWidth, $srcHeight);
      // create and save final picture
      
      switch($type){
         case IMG_GIF: @imagegif($destImage, "$dest_file"); break;
         case IMG_JPG: @imagejpeg($destImage, "$dest_file"); break;
         case IMG_PNG: @imagepng($destImage, "$dest_file"); break;
         case IMG_WBMP: @imagewbmp($destImage, "$dest_file"); break;
      }

      // free the memory
      @imagedestroy($srcImage);
      @imagedestroy($destImage);

      return $dest_file;
   }
   else
   {
      return $src_file;
   }
}
Back to top
View user's profile Send private message Visit poster's website MSN Messenger
sven



Joined: 08 May 2002
Posts: 30
Location: Central Valley Cali
PostPosted: Fri May 17, 2002 12:37 am    Post subject: Reply with quote
Cool example but where do I put it? In the Upload PHP code?
_________________
<><sven><>
Back to top
View user's profile Send private message Send e-mail Visit poster's website Yahoo Messenger
Benjy



Joined: 25 Jan 2002
Posts: 108
Location: Paris, France
PostPosted: Fri May 17, 2002 3:50 pm    Post subject: Man... another hack Reply with quote
*GD Required*

So, I'll begin by describing the problems generated by such a code:
- the link generated won't be compatible with a file that is not an image, as it's a "click on the thumb to open the image in a popup" link
- errr, that's all in fact, cuz the script is intelligent enough not to try to thumbnailize a file it cannot Razz

So what you have to do is replacing, in b2upload.php:
Code:
<?php  //Makes sure they choose a file
if ($img1_name != "") {

   $imgtype = explode(".",$img1_name);
   $imgtype = " ".$imgtype[count($imgtype)-1]." ";

   if (!ereg($imgtype, $fileupload_allowedtypes)) {
      die("This file type $imgtype is not allowed by the admin of this blog.");
   }
   $pathtofile = $fileupload_realpath."/".$img1_name;
   copy("$img1" , "$pathtofile") //Path to your images directory, chmod the dir to 777
   or die("Couldn't Upload Your File to $pathtofile.");

}

$piece_of_code = "<img src="$fileupload_url/$img1_name" border="0" alt="" />";
?>
with:
Code:
<?php  //Makes sure they choose a file

function RatioResizeImgGD($src_file, $dest_file, $newWidth) {
   // find the image size & type
   if(!function_exists('imagecreate')){return $src_file;}

   $imginfo = @getimagesize($src_file);
   switch($imginfo[2]) {
      case 1: $type = IMG_GIF; break;
      case 2: $type = IMG_JPG; break;
      case 3: $type = IMG_PNG; break;
      case 4: $type = IMG_WBMP; break;
      default: return $src_file; break;
   }
   
   switch($type) {
      case IMG_GIF:
         if(!function_exists('imagecreatefromgif')){return $src_file;}
         $srcImage = @imagecreatefromgif("$src_file");
         break;
      case IMG_JPG:
         if(!function_exists('imagecreatefromjpeg')){return $src_file;}
         $srcImage = @ImageCreateFromJpeg($src_file);
         break;
      case IMG_PNG:
         if(!function_exists('imagecreatefrompng')){return $src_file;}
         $srcImage = @imagecreatefrompng("$src_file");
         break;
      case IMG_WBMP:
         if(!function_exists('imagecreatefromwbmp')){return $src_file;}
         $srcImage = @imagecreatefromwbmp("$src_file");
         break;
      default: return $src_file;
   }
   
   if($srcImage){
      // height/width
      $srcWidth = $imginfo[0];
      $srcHeight = $imginfo[1];
      $ratioWidth = $srcWidth/$newWidth;
      $destWidth = $newWidth;
      $destHeight = $srcHeight / $ratioWidth;
      // resize
      $destImage = @imagecreate($destWidth, $destHeight);
      imagecopyresized($destImage, $srcImage, 0, 0, 0, 0, $destWidth, $destHeight, $srcWidth, $srcHeight);
      // create and save final picture
       
      switch($type){
         case IMG_GIF: @imagegif($destImage, "$dest_file"); break;
         case IMG_JPG: @imagejpeg($destImage, "$dest_file"); break;
         case IMG_PNG: @imagepng($destImage, "$dest_file"); break;
         case IMG_WBMP: @imagewbmp($destImage, "$dest_file"); break;
      }

      // free the memory
      @imagedestroy($srcImage);
      @imagedestroy($destImage);

      return $dest_file;
   }
   else
   {
      return $src_file;
   }
}

if ($img1_name != "") {

   $imgtype = explode(".",$img1_name);
   $imgtype = " ".$imgtype[count($imgtype)-1]." ";

   if (!ereg($imgtype, $fileupload_allowedtypes)) {
      die("This file type $imgtype is not allowed by the admin of this blog.");
   }
   $pathtofile = $fileupload_realpath."/".$img1_name;
   $pathtothumb = $fileupload_realpath."/tn_".$img1_name;
   $newWidth = 100; //Thumbnail's width
   copy("$img1" , "$pathtofile") //Path to your images directory, chmod the dir to 777
   or die("Couldn't Upload Your File to $pathtofile.");
   RatioResizeImgGD($img1, $pathtothumb, $newWidth);

}

$img_info = @getimagesize($img1);
$img_width = $img_info[0] + 14;
$img_height = $img_info[1] + 32;
$piece_of_code = "<a href="#" onClick="window.open(\'$fileupload_url/$img1_name\',\'b2Image\',\'width=$img_width,height=$img_height,location=0,menubar=0,resizable=1,scrollbars=yes,status=0,toolbar=0\')"><img src="$fileupload_url/tn_$img1_name" border="0" alt="" /></a>";

?>


By default, $newWidth is set to 100, change it to suit your needs.
And I also hope you didn't forget to CHMOD 777 your image dir!

Benjy.

Last edited by Benjy on Thu May 30, 2002 10:05 am; edited 5 times in total
Back to top
View user's profile Send private message Visit poster's website MSN Messenger
imeridian



Joined: 12 Feb 2002
Posts: 191
PostPosted: Fri May 17, 2002 5:15 pm    Post subject: Reply with quote
I appreciate you finishing this up! :) So far so good with it, one question though, why did you have it increase the window size by 40 width and height?
Back to top
View user's profile Send private message Visit poster's website
sven



Joined: 08 May 2002
Posts: 30
Location: Central Valley Cali
PostPosted: Fri May 17, 2002 6:33 pm    Post subject: Reply with quote
Benjy, I changed the file and it works like a charm, link and all! So, I don't get when you say the link won't work with the file as mine does.

I did note that b2config.php is case sensitive for the file names (jpg or JPG needs to specified for both to work.) Otherwise, I had no problems. Thanx for a sweet hack!
_________________
<><sven><>
Back to top
View user's profile Send private message Send e-mail Visit poster's website Yahoo Messenger
Benjy



Joined: 25 Jan 2002
Posts: 108
Location: Paris, France
PostPosted: Fri May 17, 2002 6:43 pm    Post subject: Reply with quote
imeridian wrote:
I appreciate you finishing this up! Smile So far so good with it, one question though, why did you have it increase the window size by 40 width and height?
Because the size of a window includes the borders & scrollbars. I must admit I released this hack after almost no test, so perhaps it's 20 height and 30 width... btw it's browser dependant so 40 seemed good to me
sven wrote:
Benjy, I changed the file and it works like a charm, link and all! So, I don't get when you say the link won't work with the file as mine does.
I said 'file' for a file that is not an image file... Razz

Benjy.
Back to top
View user's profile Send private message Visit poster's website MSN Messenger
imeridian



Joined: 12 Feb 2002
Posts: 191
PostPosted: Fri May 17, 2002 6:50 pm    Post subject: Reply with quote
AHh, okay, was just curious ;)

The way you had originally worded it not working with non-image files was also a bit confusing to me... though I had no idea what you were talking about I knew the code would work fine for images and wouldn't work for something that gd couldn't process :-D
Back to top
View user's profile Send private message Visit poster's website
tricky



Joined: 22 May 2002
Posts: 7
PostPosted: Sun May 26, 2002 10:11 pm    Post subject: Hey There Reply with quote
Is there a way to find out if we have GD? A line we can use in telnet, ect?

If we don't have it, is there anyway we could install it and then call it into the script?

Thanks,
Liz
Back to top
View user's profile Send private message Send e-mail AIM Address
imeridian



Joined: 12 Feb 2002
Posts: 191
PostPosted: Sun May 26, 2002 10:31 pm    Post subject: Reply with quote
You can do a little php info page... .it'll show you if gd is compiled into php.


Only the server admin could install it; most servers should have it though.
Back to top
View user's profile Send private message Visit poster's website
tricky



Joined: 22 May 2002
Posts: 7
PostPosted: Sun May 26, 2002 11:56 pm    Post subject: Reply with quote
I checked with my server, and GD is installed and enabled, but for some reason, I keep geting a parsing error on line 125, which is this line:

Code:
function RatioResizeImgGD($src_file, $dest_file, $newWidth) {


I just copied and pasted directly from the post to the place I was supposed to, so I don't know why I'm getting this error since there has no other problems.

Thanks,
Liz
Back to top
View user's profile Send private message Send e-mail AIM Address
Display posts from previous:   
Post new topic   Reply to topic    boardom Forum Index -> Hacks All times are GMT + 1 Hour
Goto page 1, 2, 3  Next
Page 1 of 3

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB 2 © 2001, 2002 phpBB Group