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

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

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

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


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!

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.

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...

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

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.

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.

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

Damn. This is awesome. I am going to test it out. Thanks so much for this hack. :D

sounds great, im definitly gonna use this

I just uploaded a new version that fixes the server down problem. It now checks to see if the server is up first. If it cannot connect to the server after 5 seconds it returns "Image server is down" so the users know why it took longer to generate the page. This was the best solution I could come up with for this. I also added a release # in the title and end of the hack lines of code to keep track of where it's at. Right now this is R0.9 - the original had no release number. Please update to the latest version.

Let me know how it's working for you too, please.

Using R0.9 on a vb3.0.1 board with no problems ( did a couple of comestic changes, the font size, opening the oversized image in a new window, and the table for displaying image link broken or server down )

Good job Steve ! :D

awesome hack!

anyone have a live demo setup? :)

<a href="http://www.runaked.com/forums/showpost.php?p=83416&postcount=76" target="_blank">Link for Live Demo</a>

You can use the demo I just posted!

I appreciate this a lot!

Odd, but it seems to work on some images but not on others.
For eg, i set the width max at 480

An image that is 500x300 is resized but not a 800x600 linked image.

Any clues as to why this might occur ?

Do you have a link for that 800x600 image so I can look at it? It would have to be a problem with the getimagesize command in php and that specific file. Perhaps it was done in a program that has something non-standard in the way the files are written? If you can get me the link to the file I'll take a look at it and see what I can figure out. So far it's working on all the images users have posted on our site.

Install was a piece of cake........ thanks for the hack and install is clicked.

It looks like cinq's image problem is a bug in the version of php he's running. I linked to the same images on our site and they worked fine. We are running php v4.2.1 . Not sure yet what he's running.

I'm running PHP 4.2.3 and it only works on some images, not all of them.

Like here this thread

But it did work on an image in this thread

Jolten - That picture is an attachment, it's not using vB IMG or html IMG SRC tags. You can limit the size of attachments through the vbulletin setting in your admin control panel. This hack deals with images that are linked from other servers via tags.

ahh. okay.. Sorry My bad. So the reduce image only works for directly linked images. Great! Thanks Steve.

Okay, its really finde , i installed it.
I would like to do a change: How can i change it to target=_blank?

Thank you.

You would add it into these lines:

in the first part:

$bbtag = '<table><tr><td align="center"><a href="' . $link . '"><img src="' . $link . '" width="'.$max_imgsize.'" border="0"'.substr($bbtag,$linkclose+1,strlen($bbt ag)-$linkclose+1).'<br>Picture has been resized, click for full size pic</a></td></tr></table>';

would become:

$bbtag = '<table><tr><td align="center"><a href="' . $link . '" target="_blank"><img src="' . $link . '" width="'.$max_imgsize.'" border="0"'.substr($bbtag,$linkclose+1,strlen($bbt ag)-$linkclose+1).'<br>Picture has been resized, click for full size pic</a></td></tr></table>';

and in the second section:

$biglink = '<table><tr><td align="center"><a href="' . $link . '" ><img src="' . $link . '" width="'.$max_imgsize.'" border="0" alt=""><br>Picture has been resized, click for full size pic</a></td></tr></table>';

would become:

$biglink = '<table><tr><td align="center"><a href="' . $link . '" target="_blank"><img src="' . $link . '" width="'.$max_imgsize.'" border="0" alt=""><br>Picture has been resized, click for full size pic</a></td></tr></table>';

Thank you very much. Done.

Excellent, I only had one snag. I had to add to the second part as well, otherwise it was setting my width to zero. Adding that to the second section fixed it for me. Thanks Steve!

I hve somme Error

Fatal error: Call to undefined function: handle_bbcode_img_match() in /var/www/web1/html/vb3/includes/functions_bbcodeparse.php(1085) : regexp code on line 1


do i have the comlete Line and replace ist with
If I do this i become this error

Only replace the return line with that code - not all the lines you've shown. It is the very next line after those that you are replacing. I have that line commented out in the beginning of the hack so that you can roll back to it if you want to down the road. This is the line:

return '<img src="' . $link . '" border="0" alt="" />';

I've just updated this, btw - please use the new code. I only changed 3 lines due to problem a couple people had.

now it work fine. Big ThX !

But one more question.

If i chane the settings Max_Size to 800 all Pic over 800 are resize zu 800.
But i want that all Pic with a size over 800 resize to 560. Is there a way to do this ?

Sure, in the hack text file on line 74 you would replace this:

. $link . '" width="'.$max_imgsize.'" border="0"'.substr($bbtag,$linkclose+1,strlen($bbt ag)-$linkclose+1).'<br>Picture has been resized, click for full size pic</a></td></tr></table>';

with:

. $link . '" width="560" border="0"'.substr($bbtag,$linkclose+1,strlen($bbt ag)-$linkclose+1).'<br>Picture has been resized, click for full size pic</a></td></tr></table>';

and on line 149 replace this:

. $link . '" width="'.$max_imgsize.'" border="0" alt=""><br>Picture has been resized, click for full size pic</a></td></tr></table>';

with:

. $link . '" width="560" border="0" alt=""><br>Picture has been resized, click for full size pic</a></td></tr></table>';

O.K. Big Thx for help !!!

This hack is great but it works sometimes slowly.
Is there a way to make it faster ?

On some Pics i wait over 12 sec. an than open the thread.

One mor problem.

If a user post a thread with this Code
an the image that link to the Page from this Member is bigger as the size i have determined thats a problem. The Hack resize the Image an shows ist smaler.
http://pics.celebritymarkt.de/images/privat/misc/1.jpg
But if I click on the Image i dont brows to the URL :( separate it appears nur das Bild in his real size.http://pics.celebritymarkt.de/images/privat/misc/2.jpg
But normally I should brows to his Page and not to the realsize image.
http://pics.celebritymarkt.de/images/privat/misc/3.jpg

I hope you understand, my english is not the best.

here some Pics.

I see what you mean but I'm not sure I'll be able to come up with a fix. If you point at it the status bar shows the url given in the url link like it should but once you click on it goes to the large image size. There are two a href statements - one is the url link and sits outside a table and the 2nd is inside the table and is generated by the hack. If anyone has a solution please let me know.

As to the speed of it there really isn't anything that can be done for that. I've never had a single picture take anywhere near that amount of time. The more pictures on a page the longer it's going to take. Up towards the top of this thread there's a javascript that does this on the client side which wouldn't have the delay. But it doesn't work if the page is loaded out of the users cache. If the server is down that an image is linked to there will be a 5 second delay with this too - do you have an image like that on your page?

Great hack.. installed on vb3.0.3 ... thanks

Once the URL/IMG thing is fixed I am installing this! :)

Thanks for this hack!! I needed this! :up:

One small problem I had was that the text link under the image was being duplicated when editing a post with the WYSIWYG editor. So if you edited the post once there would be two text links, edit it again and there are three links, etc. To solve this for now, I just removed the links from the code so only the reduced size image will link. Any idea what would cause this?

I still cannot get this working right ( even with the latest version of this hack ).

ok, found somewhat of an error. if a user goes in and edits their post. it adds another "Picture has been resized, click for full size pic" Link and if you preview it and changes something in the post, it does it again.

Is there anyway of fixing this??????