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.

[Alibass]

Nice little hack and it works well on 3.7.0 b3 for me also. **Installed**

[gforce75]

Awesome hack. Should be in vb by default.

[gforce75]

hmm, it messed up vb. The .js modificatiom made my chatbox stop working. The img sized rework. Just make sure u pay attention to this.

[Alien]

Has this been resolved yet?

Originally Posted by mask31

hi Teck, the images are not uploaded into database. like i said i set it to 600 x200 max for images in signatures, using the bbcode tag [img]. and it was running fine before inserting your hack, but now we don't get the error when it's bigger than 600 x 200, it's just resizing it.
so no , images are not uploaded into database.

thanks , i'll wait for your help on this

[CCV_Pinto]

teck,

do you know if is easy to modificate your javascript to do enlarge the image inside the post, like this mod:

https://vborg.vbsupport.ru/showthrea...118048&page=49

(see the javascript attached at the mod)

what I want to do is use my mod of your mod (quoted below)

but with this functionality of enlargement

I know that for the javascript work properly it has to:

1. when loading the images, add an "identifier" to each one that exceeds the max width and saving the original width (and it would be good to add the warning like the link above)


2. if the user click on the image, just restore the original size (and changing the warning text)

3. if the user click it again, then resize it again


I think this can be easy.. and it would be less "destructive" than the mod which I posted the link... and I have seen that all javascript is done on that post... and it make exactly what I have said... i just dont know how it manages the identifier of the images..

Originally Posted by CCV_Pinto

hi..
great work here..

but I would like to resize the images depending of the user resolution...

i thinked about setting a maximum width like a percentage of the resolution or the width like the resolution - K (where K is a constant that I want configure through admin cp)

i choosed the second option... because its better at my case...

so, I did this modification at vbulletin_global.js

function resize_image(obj, link, k)
{

    var browserwidth = window.document.body.clientWidth;
    var maxwidth = browserwidth - k; 

	if (obj.width > maxwidth)
	{
		obj.style.cursor = 'pointer';
		obj.style.width = maxwidth + 'px';
		obj.style.height = parseInt(obj.height * maxwidth / obj.width) + 'px';
		obj.onclick = function()
		{
			window.open(link, '_blank');
			return false;
		};
	}
}

I think this will work fine.. i am posting before trying...

but I dont know why I have to modify the CSS... thats for resizing when javascript is disabled?

I will try to make my mod and use it without the CSS mods... then I post here the results... but if someone knows the answer then can help me...

thnks

ps: it worked fine!
but I am curious about what that css will do... i think thats because of javascript desabled.. or that avoid to load the image and then resize it.... but i am not sure...

[ParsianSat_Net]

Please
give me screen hosts

[TECK]

Originally Posted by Alien

Has this been resolved yet?

See post 108.

[kiennt718]

I've tried this mod, thanks TECK, it works well.

But I need some enhancements, pls help !

In my forum, users send a lot of image in posts, and I want the images have better layout:

1. Don't touch the small in-line image like this one
2. For the image that larger than 200 px wide, I would like to have them center-aligned,

so i did some modifications in the code

PHP Code:

$dynimage = '';
        if ($this->registry->options['dynamicpic_enabled'])
        {
            $dynwidth = intval($this->registry->options['dynamicpic_width']) - 1;
            $dynimage = ($dynwidth > 0) ? 'class="resizeimage" onload="resize_image(this, \'' .  $link . '\', ' .  $dynwidth . ');" ' : '';
            list($width, $height, $type, $attr) = getimagesize($link);
         }
      if ($width >200) 
      {
      
       return '<div align="center"><img src="' .  $link . '" style="border: 12px solid #EBEBEB" alt="" ' . $dynimage . '/></div>';
      }
         else
     {
     return '<img src="' .  $link . '" border="0" alt="" ' . $dynimage . '/>';
     } 


Live demo at: http://forum.vietpet.com/showthread.php?p=3198#post3198

But here, I used php getimagesize(), which connects to remote server to get actual width of the image. It slows the page load EXTREMELY.

May be CSS can help? But I don't know how to modify CSS

CAN YOU GIVE A SOLUTION?

Thanks a lot in advance

Kien, NT

[Chevy II]

I have one skin that does not resize the images, I made the same changes to all skins. What could the problem be?

Thanks for your assistance!

[kiennt718]

Originally Posted by Chevy II

I have one skin that does not resize the images, I made the same changes to all skins. What could the problem be?

Thanks for your assistance!

May be, you install the skin AFTER the mod has been installed? Do import product again, overwrite = YES