Wide image automatic resize for html and vB tags in posts - fixes template problems

Having trouble with large images in [img] or <img src> tags in your posts causing your templates to go too wide causing a horizontal scroll bar for all posts? I have many users that attach large images to their posts either through vB img or html img src tags. In vB2 it wasn't that much of an issue because it only caused their post to go wide causing a horizontal scroll bar. In vB3 it causes all the posts on that thread to go to that width.

This hack uses the img src width="xx" tag to resize the picture to whatever max size you wish. It also adds a link to the full size image in it's original location and retains any extra formatting the user puts in the tag. In addition it checks to see if the picture actually exists and if not show "Image link is broken" where the picture would have been. Please click install if you install it and please give feedback so I can go full release with it if it's bug free.

Updated on 07/30/2004 - R0.9
Updated on 08/06/2004 - R1.0 - Identical to R.9, no need to upgrade just changing to full release from beta
Updated on 08/10/2004 - R1.1 - Added max_imgsize to the 2nd section of code (and removed global max_imgsize line from both), some users had problems with the code grabbing the max_imgsize from the first section - this fixes that.
Updated on 09/09/2004 - R1.2 - fixed problem with duplicating the resize notice when using wysiwyg editor

[Bryan Ex]

Sounds perfect! I'll get it added to my board later today to try it out.

[Aurous]

Well written code, but pages load really slow! Not good for a big site.

Heres what Ive done, which works on client-side:

PHP Code:

 
//replace (around line 1015) in includes/functions_bbcodeparse.php
 
 
return '<img src="' . $link . '" border="0" alt="" />';
 
 
//with
 
 
return '<img src="' .  $link . '" alt="" OnLoad="if(this.width > 500) {this.width=500; this.style.cursor=\'hand\'; this.title=\'Click Here to open the image in a new window\';}" onClick="javascript:window.open(\'' . $link . '\',\'\',\'scrollbars=1,toolbar=0,resizable=1,menubar=0,directories=0,status=0\')" border="0" />'; 


Thats it. It works fine, but if the images load from your cache, this fails! If theres something that can be done to cached images, this code will work perfectly!

[Steve St.Lauren]

I guess I'll find out because our site hits peaks of 800 users online, over 1,000,000 hits per day, and 900,000 posts. It's the best option I've come up with. I just loaded a page with 30 posts on it and 17 large linked images and the page generated in 4.8 seconds with 10 queries. We have very few threads with that many pictures in them. Most of the time it's one or two pictures. A thread with 1 picture generated in .635 seconds with 9 queries.

[Aurous]

Our site is on a xeon server with over 3.5 million hits per day, therefore anything that adds more server load will be a disaster for us at the moment. I'd like these image size checks to be done on client side and not server side. Wasting server resources on images is just not useful for our site. But anyways, I am sure a lot of other sites will find this hack useful. Good work and I hope to see more improvements in the future.

Aurous

what would be the most efficient is to have a third image generated, between the thumbnail size and the original... like in photopost or other galleries... so no need to resize the images each time they are displayed...

[Intex]

Steve - looks good. Have it been tested with 3.0.1?

[Steve St.Lauren]

No it hasn't been test on 3.0.1 because I'm running 3.03 but I don't see any reason why it wouldn't work. If you try it please report back. It would be easy to roll it back because there is only one line of original code that's deleted and I have that line of code in a comment in the new code.

nexialys - I agree that would be the most efficient but there are problems with doing that. If the user changed the image after the fact your "large thumbnail" wouldn't update. A user could use this to post a link to a picture that you wouldn't want to have on your site. The only way around that would be to store the entire image and the large thumbnail on your server but then your taking the entire bandwidth bill onto your hands for potentially very large images but it could be done.

[Steve St.Lauren]

Well, I found a problem tonight. If the remote server that the image is on is down then fopen stalls when looking for the file. I'm looking for a workaround for that now. If anyone has any ideas help would be appreciated.

[Natch]

There might be a solution in the code in the Links Database hack ...