Upload picture with real thumbnail

1 vv12 Jul 13, 2004 05:24

I learnt where the code should be modified and make a little mod myself by following this link:
http://forums.b2evolution.net/viewtopic.php?t=1287

And I checked google for php thumbnail create method and these 2 links gives great idea:
http://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=1075&lngWId=8
http://www.wastedyouth.org/tutorials/tutorial%20(172)/

Now heres the mod for uploading picture with a real thumb instead using the width and height control of <IMG> tag.

Locate the following file
/admin/b2upload.php
at around line 150 (line 155 in 0.9.0.11d-2004-09-22), you will see the original code like this:


if ( ereg('image/',$img1_type)) {
	$piece_of_code = "&lt;img src=&quot;$fileupload_url/$img1_name&quot; border=&quot;0&quot; alt=&quot;$imgdesc&quot; /&gt;"; 
} else {
	$piece_of_code = "&lt;a href=&quot;$fileupload_url/$img1_name&quot; title=&quot;$imgdesc&quot;&gt;$imgdesc&lt;/a&gt;"; 
}

delete or comment above and replacing with the following


if ( ereg('image/',$img1_type)) {
   $img_filename = $pathtofile;
   $img_dimensions = getimagesize($img_filename);
   $thumbwidth = 400;
   if ($img_dimensions[0]>$thumbwidth) {
   	   # Load image
   	   $img = null;
  	   $ext = strtolower(end(explode('.', $img1_name)));
	   if ($ext == 'jpg' || $ext == 'jpeg') {
       	  $img = @imagecreatefromjpeg($img_filename);
       } 
	   else if ($ext == 'png') {
          $img = @imagecreatefrompng($img_filename);
       # Only if your version of GD includes GIF support
       }
       else if ($ext == 'gif') {
          $img = @imagecreatefrompng($img_filename);
        }
	   
	   # If an image was successfully loaded, test the image for size
   	   if ($img) {
	      $new_width = $thumbwidth;
	      $new_height = round($img_dimensions[1]*$thumbwidth/$img_dimensions[0]);
		  
		  # Create a new temporary image
		  $tmp_img = imagecreatetruecolor($new_width, $new_height);
 		  
		  # Copy and resize old image into new image
          imagecopyresized($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $img_dimensions[0], $img_dimensions[1]);
          imagedestroy($img);
          $img = $tmp_img;
       }
       
       $thumb_name = substr($img1_name, 0, strlen($img1_name)-strlen($ext)-1)."_thumb.jpg";
       $thumb_path = "$fileupload_realpath/$thumb_name";
       imagejpeg($img, $thumb_path, 75);
       imagedestroy($img);
 	   
       $piece_of_code = "&lt;a href=&quot;$fileupload_url/$img1_name&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;$fileupload_url/$thumb_name&quot; alt=&quot;$imgdesc&quot; /&gt;&lt;br /&gt;Click to view original size&lt;br /&gt;&lt;/a&gt;";
   }
   else {
   	   $piece_of_code = "&lt;img src=&quot;$fileupload_url/$img1_name&quot; border=&quot;0&quot; alt=&quot;$imgdesc&quot; /&gt;"; 
   }
} 
else {
   $piece_of_code = "&lt;a href=&quot;$fileupload_url/$img1_name&quot; title=&quot;$imgdesc&quot; /&gt;$imgdesc&lt;/a&gt;";
};

Thats it.

Heres the nice comment by coffman(thx!), the second line can be altered in the following way:


if ( ereg('image/',$img1_type)) { 
   $img_filename = $pathtofile; 
   $img_dimensions = getimagesize($img_filename); 
......

Suggested by my evil twin's (really evil)popup idea, now you can open your image in a popup window instead of a normal window, heres the steps:

1, enable the "onclick" tag.
Read http://forums.b2evolution.net/viewtopic.php?t=3676&highlight=onclick for details if u want.

The following code is quote from the pose directly, thx ????? for sharing the idea!

open conf/_formatting.php, find a line that looks like :-

'a' => A_attrs.' charset type href hreflang rel rev shape coords target', // Transitional

and change it to :-

'a' => A_attrs.' charset type href hreflang rel rev shape coords target onclick', // Transitional

2. just replace 1 line of my code.
At the end of the code, u will see this


       $piece_of_code = "&lt;a href=&quot;$fileupload_url/$img1_name&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;$fileupload_url/$thumb_name&quot; alt=&quot;$imgdesc&quot; /&gt;&lt;br /&gt;Click to view original size&lt;br /&gt;&lt;/a&gt;";
   }
   else {
   	   $piece_of_code = "&lt;img src=&quot;$fileupload_url/$img1_name&quot; border=&quot;0&quot; alt=&quot;$imgdesc&quot; /&gt;"; 
   }
} 
else {
   $piece_of_code = "&lt;a href=&quot;$fileupload_url/$img1_name&quot; title=&quot;$imgdesc&quot; /&gt;$imgdesc&lt;/a&gt;";
};

replace the first line


	   $piece_of_code = "&lt;a href=&quot;$fileupload_url/$img1_name&quot; onclick=&quot;window.open(\'$fileupload_url/$img1_name\',\'Image\',\'width=$img_dimensions[0],height=$img_dimensions[1],scrollbars=no,resizalbe=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0\'); return false&quot;&gt;&lt;img src=&quot;$fileupload_url/$thumb_name&quot; alt=&quot;$imgdesc&quot; /&gt;&lt;br /&gt;Click to view original size&lt;br /&gt;&lt;/a&gt;";

just be aware of the "}" before the "else", donot delete it by mistake.

done. check it out.

U can also customize the properties of the popup window by changeing the relative field in the code.

All rite, enjoy.

2 dimitrisafarikas Jul 17, 2004 17:00

Great idea but I have some problems using it.

Could you be more accurate on the location where you must add this portion of code ? Must I replace :

if (!strlen($imgalt)) {
		move_uploaded_file($img1, $pathtofile) //Path to your images directory, chmod the dir to 777
		 or die( T_('Couldn\'t upload your file to:').' '.$pathtofile);
	} else {
		rename($img1, $pathtofile)
		or die( T_('Couldn\'t upload your file to:').' '.$pathtofile);
	}

Or just put it before/after ?

Thanks for the help ;)

3 vv12 Jul 19, 2004 17:52

I am still using b2evolution-0.9.0.8, I just downloaded 0.9.0.10, the place have changed

The file to mod is

admin\b2upload.php

and the location of the code is at line 155 at the latest version 0.9.0.10.
(line 145 at version 0.9.0.8),

you will see:


if ( ereg('image/',$img1_type)) {
	$piece_of_code = "&lt;img src=&quot;$fileupload_url/$img1_name&quot; border=&quot;0&quot; alt=&quot;$imgdesc&quot; /&gt;"; 
} else {
	$piece_of_code = "&lt;a href=&quot;$fileupload_url/$img1_name&quot; title=&quot;$imgdesc&quot; /&gt;$imgdesc&lt;/a&gt;"; 
};

just replace these serveral lines with the code I submitted, or u can keep the original lines by just commenting them using "//" at the beginning of each line.

4 dimitrisafarikas Jul 20, 2004 12:02

It seams that I still have some troubles...

I've found that I must download some libraries to help GD to convert images (thats a possibility). Another question, what is the purpose of this line :

$piece_of_code = $filepath[0];

Because it gives me a "undefined variable filepath at line 165" error when it's on.

Thanks for helping :)

[EDIT] OK, PROBLEM SOLVED ! I have deleted the line wich caused the problem and I simply activated the GD library (wich was not activated by default in the easyphp install)

5 vv12 Jul 20, 2004 14:39

So glad to hear that u solved the problem.

I have edited the 1st post to deleted those useless code.

these 3 line in the code at the beginning part should be deleted:
#$filepath = split("\.", $img_filename);
#$ext = $filepath[1];
$piece_of_code = $filepath[0];

I use the $piece_of_code to debug the code on the remote server.

6 staypuft Jul 22, 2004 12:58

Thanx for the mod VV12

Works peachy keen for me with reasonably sized JPGs, but when i try to upload huge JPGs (like dimensions over 2300 x 3000) or GIFs of any size, it successfully uploads the original image but it fails to generate a thumbnail.

I have a sneaking suspicion , however, that the problem is caused by my host's server and NOT by VV12's code, which like i said, works exactly as advertised with reasonably large JPGs.

[u]Does anybody else have this problem with GIFs or big@ssed JPGs? Is it a server thing?[/u]

EDIT: I just ran a "phpinfo" script on my server and it shows:

GIF Read Support - enabled
GIF Create Support - enabled
JPG Support - enabled
PNG Support - enabled

"image/png,image/jpeg,image/gif" are all listed as filetypes the server can "accept" and my "upload_max_filesize" is 20M. As far as i can tell, i should be able to create JPG thumbnails of GIFs.

7 vv12 Jul 22, 2004 15:14

I have tried a 3000x2250 image, no problem with my server.

U can try check 2 thing:
1) is the image too large? there's a setting for uploading in
conf/_admin.php
which constrain ur uploading size
$fileupload_maxk = '500';
/* I have changed to 500, the original is even smaller

2) is ur server gd2 support?
do a phpinfo and search for the gd block to check the following

GD Support enabled
GD Version 2.0 or higher

8 staypuft Jul 23, 2004 03:01

I've been using a $fileupload_maxk of 1024 and the phpinfo checks out fine:

GD Support enabled
GD Version 2.0 or higher

9 vv12 Jul 23, 2004 21:52

Ur right. I tried a 3000x4000 2.3m jpg today and it failed to created the thumb. It might be some of the php gd2 function failure. I am a c/c++ programmer so I dont know much about php and web server. I will try to setup a php environment later. Hope someone can help this out before I do that :lol: And at this stage just do urself a favor dont upload such a large pix to save ur bandwidth ;)

10 coffman Aug 10, 2004 02:53

hello ...
this code does not work for me because getimagesize() only accepts local images, not url, so i will change the seconf line of your code and it works :


if ( ereg('image/',$img1_type)) {
   $img_filename = $pathtofile;
   $img_dimensions = getimagesize($img_filename);
   $thumbwidth = 400;
   if ($img_dimensions[0]>$thumbwidth) {
....

nice work VV12

P.D: well i am reviewing documentation, and getimagesize() should work with a URL , but in my case i does not work, so for ppl on my situation here is the fix .

11 jpkeisala Mar 25, 2005 17:02

cool! thanks VV12 for great code!

12 luis Mar 26, 2005 07:07

please post a recopilation for the correct steps! please im bad for their language :-/

13 my_evil_twin Mar 30, 2005 23:30

this is nice, and it works great so far!

is it possible, to open up the real image in a pop-up, that takes the size of the image itself?
can anybody provide a code?

thank you.

14 vv12 Mar 31, 2005 07:31

So glad to see my post bumps up again. I made some change at the original post, hope this will helps.

The code generates a thumb of your upload if it is larger than your expected width, and comes with the thumb is the link to the real pic, so click the thumb in the blog will lead to the real image it self.

15 my_evil_twin Mar 31, 2005 18:26

thanks for the changes!

can you help me with my little problem?
i want the big image to open in a popup-window, not in target="_blank".
i just don't know how it works to make the popup the exact size of the big image.
sorry, my english might suck, do you understand what i try to describe?

thanks in advance.

16 vv12 Apr 01, 2005 17:54

Updated at the end of the post, try whether this is wut u need. have fun.

17 my_evil_twin Apr 01, 2005 22:27

it works great!

a million thanks to you!

18 my_evil_twin Apr 04, 2005 23:28

i now realized a really strange thing:

the code works perfectly in preview and in the entry-view-mode in the admin panel, but NOT on the blog site.
neither with internet explorer nor with firefox.
i have no pop-up-blockers installed.

if you want to test it:
http://fuck.open-minded.org
^^ the entry with the image of the skull.

that's strange, isn't it?
does anybody else have the same problem?

19 vv12 Apr 06, 2005 15:37

I tried your link, those pix comes out with no problem here. Something wrong with your browser? :roll:

Whats more, thats a problem for b2e encoding the apostrophe "'" in the upload page, so u might be expecting some troubles in doing the popup. I might try to do an alternative way later.

20 my_evil_twin Apr 06, 2005 21:13

hm, then there must be something wrong with both my firefox and my internet explorer... but if it works for you, it probably does for my visitors, and that's the main thing.

thanks!

21 eetaare Apr 08, 2005 13:58

Hi! Was just wondering if it's possible to resize the picture by percent?

22 vv12 Apr 12, 2005 05:26

to my evil twin: u might has disable the javascript of ur browser.

to eetaare: of cuz u can. The script i did determines the original picture's width, if its larger than your expected(400 in my script), then create a thumb. So u actually have the original pix size, u can create a new pic(in our case, a thumb) by resizing original pic's width and height a ratio.

original pic:
width $img_dimensions[0]
height $img_dimensions[1]

thumb pic:
$new_width
$new_height

search the scripts i mod for the line

	   # If an image was successfully loaded, test the image for size
   	   if ($img) 
   	   {
	      $new_width = $thumbwidth;
	      $new_height = round($img_dimensions[1]*$thumbwidth/$img_dimensions[0]);

change it in this way



  # If an image was successfully loaded, test the image for size
   	   if ($img) 
   	   {
         $new_img_ratio = 0.4;
	      $new_width = round($img_dimensions[0]*$new_img_ratio);
	      $new_height = round($img_dimensions[1]*$new_img_ratio);

I didnot test the code, i just supposed it might work, try it with a ratio u want(0.4 here), good luck.

23 highlanderbr Apr 19, 2005 10:00

It´s a great mod, but I have a problem.

Everything works, but, if I active the hotlink protection (by .htaccess), I get a Forbiden message.

Anyone have a solution?

24 kraemers May 09, 2005 05:40

This might be a dumb question, but is it possible to compress the image in addition to resizing it?

25 vv12 May 11, 2005 02:29

kraemers wrote:

This might be a dumb question, but is it possible to compress the image in addition to resizing it?

if your mean creating a jpeg image from other image format like bmp or png, then the answer is yes. Since the jpg format is compressed image. The way to create the thumbnail is just to dupe the original image with the resolution you decide. What you have to do is to change the resolution of your thumbnail to that of the original one's. However, why not just do it on desktop?

26 my_evil_twin May 26, 2005 22:10

huh......... it worked like a charm for weeks, but now, all over sudden, i get this message and the thumbnails isn't created.. oO

Warning: getimagesize(http://fuck.open-minded.org/media/handcollector.jpg): failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden in /home/www/netsh277/html/content/fuck/admin/b2upload.php on line 163

27 vv12 Jun 03, 2005 00:01

my evil twin wrote:

huh......... it worked like a charm for weeks, but now, all over sudden, i get this message and the thumbnails isn't created.. oO

Warning: getimagesize(http://fuck.open-minded.org/media/handcollector.jpg): failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden in /home/www/netsh277/html/content/fuck/admin/b2upload.php on line 163

Read coffman's suggestion.

I have changed the second line of the code in coffman's way, it makes more sense.

Hope this helps.

28 jmc297 Jun 28, 2005 20:56

The thumbnailing code works flawlessly and in a manner that is utterly transparent to the end user. Well done! My thanks!

29 gael Jun 29, 2005 01:24

Hello everybody, I know there is already a good "upload with thumbnail" system on this forum. But I just wanna create my personnal uploader. I do not want to do some competition, I just want to help the b2volution community :oops:

My script just add a checkbox in the upload window :

(X) Create Thumbnail if the size exceed (......) pixels

You can download the "b2upload.php" file here : http://www.memepasmal.net/b2hack/b2upload.zip (4 K)

Simply replace your "b2upload.php" (in "admin" directory) with this one.

I'm okay to discuss about my hack, but please don't use a too complicated english, it's not my mother's language ;)

edit : first post, first mistake, I wanna to post it in a new thread :-/

30 malakajoe Jul 27, 2005 23:19

I have taken this code and made changes that I really needed.
Here are some.

Resize original picture to dimesions specified. Thumbsize has a max width and height. This allows horizontal and vertical pictures to be resized to their original perspective. Rewrote a little of the code that outputs the href and img code. [/list:u] When I am completely done, I will share the code...I am still adding some things I like to it. BUT I am having one big issue I need help on. I am writing so that when the thumb is clicked, it triggers javascript to open the image in a window sized to the larger image size. If I copy the code into my post, works just fine. But the issue comes with the "Add this code to post" button. Since adding the code to the post uses javascript, I get in trouble sticking my javascript as text into this function. I have tried to turn everything into ascii, including the parans, but still doesn't work. So basically I would like to know how I can escape some of these characters and able to stick javascript within the function that adds the code to the post. Since it should just be text writing, I am guessing it is possible. I am pretty sure it is the parans that is screwing it up. I am at work right now, so I will so a sample of the javascript code I am trying to do. Thanks for any help.

31 vv12 Jul 29, 2005 04:11

Its the quotatino mark screws up. As u can see in my javascript mod, i use &quot and \' togather. I spent some time on it and thats the best result i could get, maybe something has to br changed in the core to make it more flexable in treating the quot in the post, but I am not into php, so i have no idea how to do it.

Anyway, the code is very easy to extend according to you own blog style if u know a little in coding ;)

Keep up and waiting for you code.

Cheers.

32 netmax Nov 11, 2005 09:10

Hi pasmal,

pasmal wrote:

My script just add a checkbox in the upload window :

(X) Create Thumbnail if the size exceed (......) pixels

You can download the "b2upload.php" file here : http://www.memepasmal.net/b2hack/b2upload.zip (4 K)

I worked it into the actual b2upload.php - it works perfect! Thanks a lot! ;)

33 bandzula May 26, 2006 20:47

pasmal wrote:

Hello everybody, I know there is already a good "upload with thumbnail" system on this forum. But I just wanna create my personnal uploader. I do not want to do some competition, I just want to help the b2volution community :oops:

My script just add a checkbox in the upload window :

(X) Create Thumbnail if the size exceed (......) pixels

You can download the "b2upload.php" file here : http://www.memepasmal.net/b2hack/b2upload.zip (4 K)

Simply replace your "b2upload.php" (in "admin" directory) with this one.

I'm okay to discuss about my hack, but please don't use a too complicated english, it's not my mother's language ;)

edit : first post, first mistake, I wanna to post it in a new thread :-/

works perfect!

I need this hack to version 1.6Alpha.
This ver. have file manager. (files.php)

34 balupton May 29, 2006 08:01

Well this topic is news to me.

You may want to take a look at my [url=http://forums.b2evolution.net//viewtopic.php?t=7880]Gallery Plugin[/url], it seems to be quite similiar.

35 bandzula May 30, 2006 06:21

balupton wrote:

Well this topic is news to me.

You may want to take a look at my [url=http://forums.b2evolution.net//viewtopic.php?t=7880]Gallery Plugin[/url], it seems to be quite similiar.

I also need floated images in text.

Form is loading...