Show Thread Enhancements - Dynamic Picture Resize for [IMG] tag

If an image submited by a user (using the [IMG] bbcode tag) is to big, chances are that it will break your current vBulletin style. This hack will dynamically resize that image to acceptable dimensions, that you previously specified. It will do it for pictures inserted into postbit or user signature.

The code modifications listed below were tested into a clean installed vBulletin board. They work 100%.

Installation
In order to perform an efficient modification of your files, I recommend you to use Komodo Edit or Textpad.
Both editors will allow you to complete all steps without any coding errors.

You will need to make one small change for each of the following files:

? vbulletin_global.js (folder /clientscript)
? class_bbcode.php (folder /includes)

Make sure you modify, save and upload one file at the time to your server.
Then, simply run the product-dynamicpic.xml file.

Once the product installed, don't forget to enable it.
Go to your vBulletin Options, click on Dynamic Picture Resize setting group and set all your options.
If you encounter any problems, feel free to post in the support thread.

Learn how to open the image into a new tab/window.
But you should stop using the target tag, since it will be deprecated soon.
There is a reason why all browsers have now the Shift and CTRL options to open a new tab/window with the link you click on.

[Pocket Aces]

There's already a image resizer mod, but 1 thing i dont want about it is it still loads the image. Is this the same as that? Would be good if this mod will just load the thumbnail, then the user may click the thumbnail to load the actual image size.
Same principle as attached images.

[jawatkin]

I've got it resizing and am playing with the options, but I'm not understanding the lightbox/thickbox outlined a few posts above. Admittedly, I am awful at Javascript. I'm using this thickbox hack for attachments and am wondering how to have the 'clicked' image open the thickbox. I know it's easy, but... not for me :P

[kontrabass]

Most excellent hack, installed on 3.6.8 no prob. Love the javascript approach.

[TECK]

Originally Posted by Pocket Aces

There's already a image resizer mod, but 1 thing i dont want about it is it still loads the image. Is this the same as that? Would be good if this mod will just load the thumbnail, then the user may click the thumbnail to load the actual image size.
Same principle as attached images.

My hack will load the image... but at the desired size directly. The other hack will load the image at it's full size, then shrink it... which ruins all the hack purpose because you see a huge image then it becomes all of the sudden small, once loaded.

Also, Lizard King reported that the above hack you mentioned does not work with vB Blog.
My hack works with it.

[Pocket Aces]

Originally Posted by TECK

My hack will load the image... but at the desired size directly. The other hack will load the image at it's full size, then shrink it... which ruins all the hack purpose because you see a huge image then it becomes all of the sudden small, once loaded.

Also, Lizard King reported that the above hack you mentioned does not work with vB Blog.
My hack works with it.

Sounds good. Im installing it right now and see how it works. [s]*installed* *ncode unistalled*[/s]

edit:
Just the same, i was hoping the loading time of resized images is less but it still loads the actual filesize.

[Lizard King]

Just the same, i was hoping the loading time of resized images is less but it still loads the actual filesize

There is no way to decrease the file size of external images on fly.

[ncangler]

I installed this with no problem at all. However it is cropping images instead of resizing them. Did I miss something or is there a way to have it resize linked images rather than cropping them? Thanks!

[rapidphim]

Teck, can you please let me know if your hack comes with or working with lightbox when click on the images?

[TECK]

Originally Posted by ncangler

I installed this with no problem at all. However it is cropping images instead of resizing them. Did I miss something or is there a way to have it resize linked images rather than cropping them? Thanks!

The image will not be resized using ImageMagick or GD.
You don't want to kill your server for an externally hosted image, right?
This hack with resize the displayed image using only JavaScript techniques and user's browser, without putting any stress on the server.

Originally Posted by rapidphim

Teck, can you please let me know if your hack comes with or working with lightbox when click on the images?

Yes it is working, one of the users managed to do it very easy.
Start reading from this post, then ask him to post his instructions here.

[rapidphim]

Originally Posted by Acers

TECK, great hack m8,
just wondering though, when the javascript detects a image is greater than specified, can't the link window be somehow set to say rel="lightbox" and then the final image opens up in a new lightbox window?

EDIT: Never mind, i got the lightbox working with this code. Works brilliantly now.

Acers,
Can you please post the instruction on how to intergrate the lightbox with this code? Thanks!

Teck,
Can you please let me know if the image host on imageshack work with this mod? Or it HAS to be uploaded/attached?