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.

[TECK]

rapidphim, this hack will work great with files uploaded to the imageshack.us site.
Simply use the direct image link (last option on their list).

[rapidphim]

I always used the direct image link but sometime the images did not resize itself. So... just want to make sure.

[urstorm.com]

i did not under stand this ... explain pls

Main CSS: Additional CSS Definitions
Insert into the second text area, the following CSS code:

.resizeimage { max-width: 800px; }
* html .resizeimage { width: expression((this.width > 799) ? '800px' : 'auto'); }

[rapidphim]

Go to your admincp, styles & templates, style manager, at the style that you want to make the edit, click on the drop down menu on the right, select Main CSS, scroll down all the way to the bottom, on the second box of the Additional CSS Definitions, copy and paste the above code to the end of the second box. That's it.

[begore]

Superb mod dude, installed!

[rapidphim]

Can anyone let me know how to apply the lightbox to this hack? Also, how are you going to center the image automatically? Thanks.

[Fabikus]

I think there is a little bug on Internet Explorer 7 with this script, it works good but when i click in my forum home page, where there is last message, and i click on thread title (showthread.php?goto=newpost&t=2) if the thread has a resized IMG it gives an error when make the redirect to showthread.php?p=355#post355

If i disable IMG resizer it works correctly.

[TECK]

Should not do this, at all. There is no relation to it.

[kevcj]

Thank you for this wonder add on - BUT, I was confused where the

Main CSS: Additional CSS Definitions
Insert into the second text area, the following CSS code:

was at?

Could some more detailed instructions please be provided in the zip file?

Marks installed, finally.

[yoyoyoyo]

Originally Posted by kevcj

Thank you for this wonder add on - BUT, I was confused where the



was at?

Could some more detailed instructions please be provided in the zip file?

Marks installed, finally.

Admin Control Panel -> Styles & Templates -> Style Manager -> Main CSS
at the bottom of the page you will see a box that says: Additional CSS Definitions

paste the code supplied in to the second box