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]

Originally Posted by kambiz

hmmm is it possible to show a message (or alert ) on the top of the picture to indicate the picture has been resized?

Everything is possible. If many other users request it, I will do it... is that fair?
I wanted a solution that is very clean and it does not modify the way vBulletin behaves originally.

Originally Posted by valdet

This feature is similar to this hack..
https://vborg.vbsupport.ru/showthread.php?t=125500

There are many hacks out there that do a similar thing. That does not mean they are written properly.
I want you to tell me what is wrong with the above hack, because there is something wrong with it.

[NeutralizeR]

Thank you TECK, installing and testing it now

Edit: I'm grateful for all your effors and help! No matter if this hack does whatever i want or not.

If you check my post at that thread you can understand what i need:
https://vborg.vbsupport.ru/showpost....4&postcount=15

Dynamic resizing won't help us much as we have many big images on a single page so the layout will be broken till it completely loads all of the images.

PHP Code:

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


If we can find a way to wrap oversized images with "<a href="$link">...</a>" it'll be done.

The method on vbulletin.org does what i'm asking for but they denied to help me and it's ok

Best Regards to Floren Munteanu

[TECK]

Aha, so you basically don't want to open the enlarged picture, when you click on it?
Please be more specific. And you cannot resize an image with JavaScript, before is loaded. It would not know the actual picture dimensions, in order to resize it properly.

In other words, this is the process:
1. Picture is loaded, for the first time. (it will show the full size)
2. Picture size is detected.
3. Picture is formatted to new dimensions.

[NeutralizeR]

Originally Posted by TECK

Aha, so you basically don't want to open the enlarged picture, when you click on it?
Please be more specific. And you cannot resize an image with JavaScript, before is loaded. It would not know the actual picture dimensions, in order to resize it properly.

In other words, this is the process:
1. Picture is loaded, for the first time. (it will show the full size)
2. Picture size is detected.
3. Picture is formatted to new dimensions.

I want it to be resized before the picture is loaded and have the link to the original picture I know javascript can't do it.

I need an advanced version of this hack with the clickable url of the resized picture:
https://vborg.vbsupport.ru/showpost....4&postcount=15

[kambiz]

Originally Posted by TECK

Everything is possible. If many other users request it, I will do it... is that fair?
I wanted a solution that is very clean and it does not modify the way vBulletin behaves originally.

yeah sure.

[TECK]

Originally Posted by NeutralizeR

I want it to be resized before the picture is loaded and have the link to the original picture I know javascript can't do it.

You definitely do not want that... because it will ruin your server performance in no time.
There are many hacks on Google that will do this, but from my tests, they will skyrocket the server load, like really really high. And you can do it with JavaScript if you really want to do it like that.

So what you want is to have like a thumbnail displaying a link to the original picture.
That's what it does right now the hack (except the resizing before loading, which I really don't recommend). You cannot see it on your example because the file is very small and it loads instantly. The hack I have listed here is identical to the vBulletin.org one. And I wrapped the [IMG] with a link, like you showed in the example above. If you click on the image, it will show the image... but if you right-click it and open it on a new tab/window with the actual link, not the image.

I recommend you to disable the [IMG] bbcode tag and attach always images. It will do what exactly you need. In the other hand you lose space on your disk. If you go with your desired method, you will kill your server. Is up to you what you want, it is your server.

I forgot to mention one important thing. The way this hack is written now, it will work with all browsers. Altering the code to add features will reduce or completely render it unusable.

[TECK]

Hmm, after reading again your post, I noticed that you have many large images on a single page. So you definitely need a resizing option, or somehow to hide the image, before is loaded. The problem with this is that it will render the hack unusable in IE6 and below.

I will think of a clean way to do it, I get the clear picture now related to what you need exactly.
However, I want you post here an example where you have many large images on the same page. I would like to see the effect it does.

Also, the link wrapping... you want that to be done automatically?
If yes, it will mess your signature pictures. Let me know.

[Lizard King]

I was using ncode image resizer however that wasnot working with vB Blog. This one works perfectly. Demo for vb blog http://www.ayyas.com/blog.php?b=787
Thanks Floren

[NeutralizeR]

The method i've been using for a while has nothing to do with the server loads as it resize the images with CSS (instead of javascript) and it resize them before the page completely loads.

Only missing thing is the automatic linking to the original image dimensions. Check this page for example:
http://www.msxlabs.org/forum/fantazi...tml#post682559

The picture in the first post is resized (actually shrunk) to 728px width. It's actual width is 1024px.

[NeutralizeR]

I did it thanks to TECK.

vbulletin_global.js:

/**
* Function to resize an image used with the [IMG] bbcode tag
*
* @param    string    Image object
* @param    string    Image link
* @param    integer    Image max width
*/
function resize_image(obj, link, maxwidth)
{
    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.location.href = link;
            return false;
        };
    }
}

/**
* Function to emulate document.getElementById

CSS:

.resize {
max-width: 728px; width: expression(this.width > 728 ? 728: true);
}

class_bbcode.php:

PHP Code:

return '<img class="resize" src="' .  $link . '" border="0" alt="" onload="resize_image(this, \'' .  $link . '\', 727);" />'; 


But unfortunately automatic linking to the original dimensions only work for IE and Opera. I at least need it for Firefox, too.

Test page:
http://www.msxlabs.org/forum/fantazi...r-2-a-202.html