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.

[ahoogerhuis]

I'm looking for a hack like this, and it seems nice. I've read the thread and I wondered if it would be possible to make the code resize the IMG-embedded picture relative to the client's own screen resolution.

In other words, instead of having static max px height/width in the AdminCP, would it be possible to define my site's template overhead in number of pixles and then make this mod resize to the client's maximum width less the defined overhead?

This would allow people on small laptops, like me, to get images sized at 1024 - N px width, and desktop users with e.g. 1600px width will get it resized to fir their width automagically?

Also, I assume the mod will resize anything as long as the dimensions are largerthan the defined limits, so that it will not upsize anyting?

-A

[midweststreets]

Very nice.. it was just what i was looking for.

there was one thing i did however notice. that is sometimes when the images are in a spoiler tag, it will resize them, however it will not allow you to click on it to see it in its orginal size(in my case i have it open in a new window).

[mask31]

hi Teck, thanks, i just installed and it works great.
however i have an issue with my signatures. in Vbulletin i set the max image size to 600 x 200 for all usergroups for their signatures.

however on your hack i configured the max width to be 700.

the thing is, it's not considering my max allowed image size of 600 x 200 for signatures anymore.
usually it gives the user an error stating that their image is too big. i'm not getting that anymore, it's allowing all image size and it's reducing it to 700.
i don't want that for my signatures.

could you help me on this issue please?

thanks

[apiasto]

very useful hack,is there a way if you can make this to be moderated like attachments.so if anyone uses an [image] tag it will be moderated by admin before showing on the main forum.thanks

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

[TECK]

Originally Posted by apiasto

very useful hack,is there a way if you can make this to be moderated like attachments.so if anyone uses an [image] tag it will be moderated by admin before showing on the main forum.thanks

You cannot moderate BBCode.
Because that's what it is after all, a BBCode tag, used a little different.

[CCV_Pinto]

hey teck... can you explain me why do you use the css modification?

i think that css avoid loading the image before and then resize it.... but i am not sure...

I am asking because I wanna set the maxwidth to "resolution player - constant"... did you read my post? I just modified the javascript and it worked... but I wanna know if this css has another function...

thanks for the excellent mod and thanks for the support you are giving

regards

[TECK]

Originally Posted by mask31

In Vbulletin I set the max image size to 600 x 200 for all usergroups for their signatures...

This hack only interacts with the BBCcde tag [IMG], it has nothing to do with images attached into database. The max with error message you get it only for images uploaded into database, if I'm not wrong. I will check later on to make sure, can't remember.
Explain more if you think I missed something, but first, make sure the images are not uploaded into database.
If they are, the hack will not influence their format in any way.

Originally Posted by CCV_Pinto

hey teck... can you explain me why do you use the css modification?

The CSS is used to define from start the image size you want to display.

[Alfa1]

Can you please add highslide integration to you hack?

[mask31]

Originally Posted by TECK

This hack only interacts with the BBCcde tag [IMG], it has nothing to do with images attached into database. The max with error message you get it only for images uploaded into database, if I'm not wrong. I will check later on to make sure, can't remember.
Explain more if you think I missed something, but first, make sure the images are not uploaded into database.
If they are, the hack will not influence their format in any way.


The CSS is used to define from start the image size you want to display.

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