Dynamic Picture Resize for [IMG] tag

[TECK]

If an image submited by a user (using the 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 [I]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 (https://vborg.vbsupport.ru/showpost.php?p=1334053&postcount=6) 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]

For a quick look, visit this vBulletin Blog entry (http://www.ayyas.com/blog.php?b=787) on Lizard King's server.
As you notice, my hack works on the vBulletin forum and blog. :)

[Hornstar]

Thanks, when I get a chance I will take a look at this for sure. thanks.

[TECK]

NeutralizeR was begging the site administration guys to help him with the hack, but nobody wanted to (https://vborg.vbsupport.ru/showthread.php?p=1331477#post1331477).
It took me 10min to write and implement the hack and one hour to make the readme file. Go figure...

Honestly, I felt bad because nobody wanted to help him. NeutralizeR, my new friend... there are people who still care. Enjoy the hack, I did it especially for you.

[Njm]

thanx man ..

but is there any problom in my site 4 load server same the other products that resizer the image

another que can u edit the product soo the image may open in new Window

thanx agin ...

njm

[TECK]

Njm, my hack will not generate any server load. The process is completed through JavaScript.
In other words, the client (browser) does the job, not the server. :)

About your request to open the link into a new tab/window:
Open vbulletin_global.js file (where you edited the code originally) and find:
window.location.href = link;

Replace it with:
window.open(link, '_blank');


You are done. :)

[2ndCz]

Read the other thread... Wow, this was nice of you to do for them. :)

Clicked install. This is what I've been hoping for as well, something dynamic.
Thank you for sharing with everyone, TECK. I can now replace my old re-sizer. :)

[kambiz]

Thanks a lot. was looking for this a long time.

Clicked install.

[kambiz]

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

[valdet]

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

[TECK]

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.

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.php?p=1324434&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.

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]

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.php?p=1324434&postcount=15

[kambiz]

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]

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 (http://67.68.90.251/forum/showthread.php?t=3), 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-dunyasi/31089-black-white-siyah-beyaz-resimler-2-a-202.html#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:

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-dunyasi/31089-black-white-siyah-beyaz-resimler-2-a-202.html

[ERuiz]

Does it work with VB 3.6.7?

[TECK]

Does it work with VB 3.6.7?
Yes.

I did it thanks to TECK.
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-dunyasi/31089-black-white-siyah-beyaz-resimler-2-a-202.html
I still need your help to understand what exactly you need to do. I'm sorry. I'm pretty smart and I catch up right away when someone is asking me something, but this time I have no idea what you try to accomplish. I thought I got it, but after your new post... I lost you again.

With your link posted above, I don't see any difference between FF and IE.
If anyone understands what NeutralizeR needs, please explain it in different terms, so I get it.

What do you mean by: automatic linking to the original dimensions?

[TECK]

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 :)

She does like the camera, ehh? You are in trouble when she will be 18, heh.

[pspmaster93]

INSTALLED.

This always was annoying when it screwed up the skin thanks.
But one thing that would make this SO much better is have a little bar above the image saying "This image was resized to meet the maximum image width set by the administrator"
THAT WOULD BE COOL for any future updates on this mod.

[NeutralizeR]

Yes.


I still need your help to understand what exactly you need to do. I'm sorry. I'm pretty smart and I catch up right away when someone is asking me something, but this time I have no idea what you try to accomplish. I thought I got it, but after your new post... I lost you again.

With your link posted above, I don't see any difference between FF and IE.
If anyone understands what NeutralizeR needs, please explain it in different terms, so I get it.

What do you mean by: automatic linking to the original dimensions?
This image is clickable on IE:
http://www.msxlabs.org/forum/682559-mesaj1006.html

But Firefox doesn't support your js edit.

[TECK]

INSTALLED.

This always was annoying when it screwed up the skin thanks.
But one thing that would make this SO much better is have a little bar above the image saying "This image was resized to meet the maximum image width set by the administrator"
THAT WOULD BE COOL for any future updates on this mod.
You are person no. 2 who requested the above feature. :)
Keep in mind this: There is no way (for now) to separate the [IMG] bbcode from actual postbit and signature. In other words, if you have a message because the image is resized, this message will show anywhere, including the signature, which will make users upset.

I will definitely not edit the code in several vBulletin files, just to avoid this feature in the signature... so be aware what you ask for. :)
Trust me, the best way is to leave it act like vBulletin [IMG] code is supposed, no extra gadgets on the side. If there are more then 20 people who will request this, I will do it, as an optional code. I have a ton of projects I work on it and I certainly don't need a trojan horse on my back. :)

Off Topic: I bought today the new Blackberry 8830. It kicks arse big time, simply an amazing phone. I will blog about it (http://www.yqed.com/) tonight or tomorrow...

[TECK]

This image is clickable on IE:
http://www.msxlabs.org/forum/682559-mesaj1006.html

But Firefox doesn't support your js edit.

Yes, it does. :)

[NeutralizeR]

Yes, it does. :)
No, it doesn't if you use class="resize" :(

[TECK]

Ok, why do you need to use resize class. To avoid displaying the original sized picture?

Let's fix this baby together. :)
Tell me if the current fix, listed on my server is working properly. If it doesn't the way you want, tell me what is missing, in detailed terms.

[NeutralizeR]

Ok, why do you need to use resize class. To avoid displaying the original sized picture?

Let's fix this baby together. :)
Tell me if the current fix, listed on my server is working properly. If it doesn't the way you want, tell me what is missing, in detailed terms.
I need it because the images won't shrink till the pages completely load.

I combined my previous resizing method with your hack. Current problem is the Firefox issue i mentioned above. You can't click resized images to see their original versions on Firefox.

We can PM or IM each other if you want or i can keep flooding this thread. This hack is dedicated to me, isn't it? :p

[TECK]

Yes, the hack is dedicated to you and to Lizard King... also. :)
We will talk here. It will be a good learning experience for users, since we will talk about code.

OK, I took 2 screenshots, in FF... it is working perfectly. Tell me if I missed something.

[NeutralizeR]

TECK, you may think i'm crazy but it was not working a few hours ago. Both me and Lizard King tested it on IE, Firefox, Opera and Safari.

Somehow... it's also working on Firefox now.. really weird... (of course i updated my browser cache)

Anyway... my final request is being able to see the resized images in a new browser window (or tab) when i click on it.

[Lizard King]

Floren try on here http://www.ayyas.com/blog.php?b=787 we both have the same file edits and css however this is not working.

[TECK]

I see what you guys mean. Mert, when I click on Mina's picture, it should open so you can see the full size picture, right? It does not, currently.

Post what you guys did with the code, you broke it nice. :)
You have to add the class in the JavaScript code. Let see how you did it...

[Lizard King]

class_bbcode edit :

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

vbulletin_global.js edit

* @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;
};
}
}

and the css

.imageresize {
text-decoration: none;
padding : 4px;
border : 4px solid #eeeeee;
max-width: 540px; width: expression(this.width > 540 ? 540: true);
}

[TECK]

Version 1.0.1 released. Code improved related to initial image resize.
http://67.68.90.251/forum/showthread.php?t=3

Do a CRTL + F5 to see what I mean. :)
Ya, you can do it in Firefox also.

[TECK]

My final request is being able to see the resized images in a new browser window (or tab) when i click on it.
Read the thread, please.
https://vborg.vbsupport.ru/showpost.php?p=1334053&postcount=6

[xandizitxu]

Didn't work for me, im not sure where Should I insert the css if a screenshot is avaible please ^^

[NeutralizeR]

You are my hero :)

Works great now!

[TECK]

Didn't work for me, im not sure where Should I insert the css if a screenshot is avaible please ^^

Read the readme from A to Z. :)

Guys, anyone with IE6 can test the link and see if it's working as it should?
http://67.68.90.251/forum/showthread.php?t=3

And I need demos from other sites, I will not keep up in public mode my server.
I need to play with code and there are chances it will break from time to time. :)

[thincom2000]

You are person no. 2 who requested the above feature. :)
Keep in mind this: There is no way (for now) to separate the [IMG] bbcode from actual postbit and signature. In other words, if you have a message because the image is resized, this message will show anywhere, including the signature, which will make users upset.

I will definitely not edit the code in several vBulletin files, just to avoid this feature in the signature... so be aware what you ask for. :)

Actually, there is a way. When $bbcode->parse() is called, the parser checks whether we are in the calendar, a pm, signature, etc (stored in $forumid). Directly afterwards the bbcode_parse_start hook is called, which you can in turn use to store this info in a way that can be passed to your function.

Also, check out $bbcode->do_parse() and the other subsequently called functions, because it is entirely possible to accomplish this mod without using any file edits (which I'm sure everyone would like). I'll install it such on my site and post the code when I am done.

[xandizitxu]

Got it to work sorry! Forgot just to set the vBulletin Options!


Actually, there is a way. When $bbcode->parse() is called, the parser checks whether we are in the calendar, a pm, signature, etc (stored in $forumid). Directly afterwards the bbcode_parse_start hook is called, which you can in turn use to store this info in a way that can be passed to your function.

Also, check out $bbcode->do_parse() and the other subsequently called functions, because it is entirely possible to accomplish this mod without using any file edits (which I'm sure everyone would like). I'll install it such on my site and post the code when I am done.

That is what I'am looking for!

[we_scooter]

:)

I am a fan since HOMELITE for VB2
Definistely INSTALLED thanx TECK
miss TECKWIZARD.com;)

[TECK]

Actually, there is a way. I'll install it such on my site and post the code when I am done.
Glad to see the hackers are still sharing their knowledge. :)

Personally, I will never use this approach. Inserting the code directly is way faster then using it on a hook. Plus, you will need to use all kind of preg_replaces in order to isolate the link.
I never understood why the hook obsession, they actually slow your server... a lot. Who cares if you edit the file and add a small piece of code.

I challenge you to show me a better and faster way, compared to the code I made.
If you win, I pay the beer... :)

[thincom2000]

Okay, here are the updates:
eliminated all file & CSS edits
added vBulletin Option to open in new window
added vBulletin Option for a "this image has been resized" message

In total, there may be 1 additional preg_replace, because the plugins bypass the original IMG bbcode handler. And the template is not eval'd on its own, keeping speed in mind.

Changes to the product file:
Added 3 plugins
Added 1 template (scroll to bottom for CSS)
Added 2 settings

I never understood why the hook obsession, they actually slow your server... a lot.

This is why my site only has one plugin for each hook, with one line of code each. This include()s plugins saved in the file system. :) I think I halved load times by spending a week doing that.

[TECK]

miss TECKWIZARD.com;)
Something really big is coming... in few months. :)
A new teckwizards site will evolve... be prepared.

[TECK]

Okay, here are the updates ...
I win! You replaced my 4 lines of code with 285 execution processes. :D
However this is a very good solution, for people who don't want to edit their files.

Now, pay the beer! I'm in Montreal. :D

[PixelFx]

Hey tech long time no chat :D, nice hack :D got a client been looking for something like this for his blog :D

[TECK]

This is why my site only has one plugin for each hook, with one line of code each. This include()s plugins saved in the file system. :) I think I halved load times by spending a week doing that.
Good call, I like your thinking. That is exactly what I do also... Lizard King can confirm how many times I insisted on this matter, for his site. :)
I suggested that to vBulletin team also, for their products. In Project Tools and Blog I replaced all their hook code with files. :)

While doing some benchmarks to emulate 10,000 users hitting a server, the results were shockingly better, compared to the code left in hooks.

Hey tech long time no chat :D, nice hack :D got a client been looking for something like this for his blog :D
Glad I could help, Robert. :)

[pspmaster93]

can you include a readme guide for updating from the previous version?

[xandizitxu]

Okay, here are the updates:
eliminated all file & CSS edits
added vBulletin Option to open in new window
added vBulletin Option for a "this image has been resized" message

In total, there may be 1 additional preg_replace, because the plugins bypass the original IMG bbcode handler. And the template is not eval'd on its own, keeping speed in mind.

Changes to the product file:
Added 3 plugins
Added 1 template (scroll to bottom for CSS)
Added 2 settings



This is why my site only has one plugin for each hook, with one line of code each. This include()s plugins saved in the file system. :) I think I halved load times by spending a week doing that.

Okay I installed your product xml, uninstalled the other and now I get this

<div><div class="resizednote">This image has been resized for improved display.</div><img src="http://img249.imageshack.us/img249/7245/bscap 0015fb3.jpg" border="0" alt="" class="resizeimage" onload="resize_image(this, 'http://img249.imageshack.us/img249/7245/bscap0015 fb3.jpg', 424);" /></div>

[TECK]

can you include a readme guide for updating from the previous version?

thincom2000, I think is best for you to release the hack under your own version.
People will ask all the time for support on a piece of code that I did not make... Thanks.

[NeutralizeR]

You suggest making file edits instead of using plugins? (for all products - hacks)

Yeah, it'll be faster but it'll also take so many time when upgrading...

[TECK]

It will take you 30min max to upgrade a heavy modified board... if you know what you are doing. Plus the difference between editing directly the files, compared to hooks usage, is huge. Even the vBulletin developers said that writing the code directly to files is way better then using the hooks. Then, even if you use only hooks, there is no guarantee the code will still work on the new vBulletin version, so you are stuck already. While editing the code by yourself, you learn about PHP and see exactly what it has to be done, in order to fix everything.

The hooks are for people who don't code or are lazy to learn few basics in PHP. Then, why do you want to download hacks if you don't want to learn anything? And how do you know that the plugins you just installed will not destroy your server? Don't take it on a bad way, I simply state the real facts: using hooks is slowing down your code execution. That is compared on real benchmarks. Plus, I bet you 1 million dollars, no (or very few) "hackers" will test their code with benchmarks... just to see how their hack will perform under heavy server stress. You have no idea how many bad hacks you can find here at vBulletin.org site.

The code thincom2000 made is good from a technical point of vue. But what do you think it will execute faster: my 5 lines of code grouped in one location... or his 200 lines spread all over the hooks and templates? Many people don't realize how bad it is to load your board with a lot of hook inserted code.

I'm totally against modifying your vBulletin board. I don't see any need to add a ton of hacks that will not do any good to your server performance. But if I'm forced to do it, I will definitely edit the vBulletin files. I deal with a lot of clients, like corporate people. I build their server from scratch, including the OS with my own RPM's (PHP, MySQL, etc.) and all the needed software for high performance machine/s. Then, when I install vBulletin, I will always recommend not to insert any hacks on it.

[NeutralizeR]

Thanks for the detailed answer.

[TECK]

Thanks and let me state this one more time: thincom2000 did a very good job on the code modification. This has nothing to do with my comments listed above. It is just my personal opinion about using code in hooks.

[thincom2000]

For the ease of support and less confusion in this thread, I have taken TECK's suggestion and opened a support thread for the modified product file I posted earlier. The file is now only available in that thread.

https://vborg.vbsupport.ru/showthread.php?t=157428

Okay I installed your product xml, uninstalled the other and now I get this

Please repost your issue in the other thread, and I will gladly tell you how to fix it, since this was my very first issue when I took on the task of pluginifying it as well.

[TECK]

Good decision, Ted. Congrats on the mod, BTW. :)

[JohnnieOO]

OK, if I am reading this correctly, when installed this will resize pictures as they are uploaded from the user's computer but before being saved on the server? However, they must be attached and not installed with [img] tags? Am I reading this right?

Johnnie

[djdonx]

Johnnie,

When a user puts an image url in [IMG] tags, if the image is bigger than the size you have specified it will shrink the image and make the original image a link.

Also, this works perfect for me. Installed.

[thincom2000]

OK, if I am reading this correctly, when installed this will resize pictures as they are uploaded from the user's computer but before being saved on the server? However, they must be attached and not installed with [img] tags? Am I reading this right?

Johnnie

What you have described is a default vBulletin feature.

[TECK]

JohnnieOO, this hack applies only to images that you insert using the [IMG] bbcode tag.
In other words, if your board width is set 1024px and the user inserts an image hosted on imageshack.us that has 1900px in width, it will break your design.

My hack will automatically resize that image to load a specific width you desire, eliminating the ugly look your board will get from a very wide image.

[nickypoooo]

Installed, Thank you

[Saviour]

Wonderful hack...Clicked Installed...

I saw in an earlier post, if enough people request it...you would make a code change to state the original image has been edited...

You should actually include that code within your mod...as well as including the code to open the image in a new window...just like the vBulletin default image attachments already do.

It only stands to reason that this would be the best way to go...convenient...and warranted.

Again...thanks for the hack...Kudos!

[UNRE4L]

Does anyone know if theres a similar thing for avatars?

[TECK]

Does anyone know if theres a similar thing for avatars?
Is a default option in vBulletin, no need to hack it. Hmm actually, it will display a warning that your avatar is to big... Let them work a little. :)

Wonderful hack...Clicked Installed...

I saw in an earlier post, if enough people request it...you would make a code change to state the original image has been edited...

You should actually include that code within your mod...as well as including the code to open the image in a new window...just like the vBulletin default image attachments already do.

It only stands to reason that this would be the best way to go...convenient...and warranted.

Again...thanks for the hack...Kudos!
When I have time, I will do it... I'm in the middle of a server build for a client.

[UNRE4L]

Yeh i dont just want something resized to fit a 400 x 400 box for example.

If their image is 1000 x 600 (ony an example) and they put it in their avatar I want it to keep the proportions but be smaller. So if i state the avatar size to be 400x400 max it would be resized to 400 x 240

If i just left it how it is in VB the image would be stretched to 400 x 400 and unless its a square image to start it looks messed up.

[TECK]

Avatars are stored into database. They have nothing to do with the [IMG] tag. :)

[thincom2000]

Actually, you can configure vBulletin to store avatars (like attachments) in the file system. Thus, an IMG tag would be able to fetch said avatar.

[UNRE4L]

Yeh my avatars are saved to folders along with all other images rather than having a huge database file.

[eghm]

Thanks for this Product!

I'ld like to suggest updating the readme.html CSS Main edit from "second text area" to "Page Background: Extra CSS Attributes" adding that the Main CSS is under the Style Manager might help newbies a bit too.

I've installed this on my testvb and see it works for FireFox. On Safari (Mac OS X browser) the image looks squeezed (which I can live with, given the see full sized image option) and the css doesn't work correctly (which I probably can't live with) - http://s229.photobucket.com/albums/ee141/yafn/?action=view&current=CesDynamicImageResizeOnSafari.png

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

[offline]

Hello! I have installed this and it works great, I only have on small problem. The image is not clickable to view the orginal. I am using IE7. Any help is appreciated. http://www.chattanoogans.com/forums/forum-announcements-polls/7-image-resize.html

Thanks!

[offline]

Sorry, try this post... http://www.chattanoogans.com/forums/forum-announcements-polls/6-image-resize-test.html

[sportsoutlaw]

I have been looking or something like this, thanks for your work Teck

[TECK]

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?
You could use this:
obj.rel = 'lightbox';

[TECK]

I only have on small problem. The image is not clickable to view the original. I am using IE7.
This hack was tested and working in all major browsers. :)

[Acers]

You could use this:
obj.rel = 'lightbox';
yes teck, i had got that working. :)
thanks anyway.

[Mosh]

Hi Floren,

Just to let you know that this works on v 3.5.x with no changes apart from editing the product to remove the version dependancy. I works great.

Only one thing I would request, as some others have requested, is to add a label/notice to let people know that it is a resized image. This is not urgent, but would be a great help for people who do not read announcements or bbcode descriptions.

Thanks :)

[Charlie98902]

Wrong Thread sorry.

[Pocket Aces]

There's already a image resizer mod (https://vborg.vbsupport.ru/showthread.php?t=118048), 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 (https://vborg.vbsupport.ru/showthread.php?t=126501&highlight=thickbox) 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]

There's already a image resizer mod (https://vborg.vbsupport.ru/showthread.php?t=118048), 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]

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. *installed* *ncode unistalled*

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]

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.

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 (https://vborg.vbsupport.ru/showthread.php?p=1339360#post1339360), then ask him to post his instructions here. :)

[rapidphim]

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?

[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! :D

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

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

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

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]

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.

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]

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

[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? :)

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/showthread.php?t=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..

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]

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 https://vborg.vbsupport.ru/external/2008/01/437.gifone
2. For the image that larger than 200 px wide, I would like to have them center-aligned,

http://www.thai-ridgeback.nl/img/fotoboek/Polen%20wold%20dog%20show/10gr.gif



so i did some modifications in the 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]

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

[Chevy II]

Thanks for your assistance, I wasn't aware that I could do that. So I did it, and it ran without a problem. However, it didn't fix the problem. One thing I did notice is that if I go into a thread where images have been linked with the [image] tags and click edit and then save. The images are now size properly, however, as soon as I go back into the thread again or I refresh the thread the images are large again.

This is strange. Thanks for your assistance.

[kiennt718]

Thanks for your assistance, I wasn't aware that I could do that. So I did it, and it ran without a problem. However, it didn't fix the problem. One thing I did notice is that if I go into a thread where images have been linked with the [image] tags and click edit and then save. The images are now size properly, however, as soon as I go back into the thread again or I refresh the thread the images are large again.

This is strange. Thanks for your assistance.

You should add the 2 lines in instruction file to the additional CSS section in your new style. Otherwise, the image will display in Full-Size first, before it can be resized by this hack. Cheers

[sub_ubi]

Tested on:
Vbulletin 3.6.8 PL2
5 different styles

Tested with:
Opera 9
Safari
IE6
IE7
Firefox 1.5
Firefox 2.0

All flawless. Great work.

[mark|3]

Will it possible to have 2 different resize options for both blog and forum?

thanks

[R1lover]

Anyone want to update this to 3.7?

It seems the vbulletin_global.js file is much different and I can't figure out how to edit it to make this work again.

Thanks for any help

[Alibass]

Anyone want to update this to 3.7?

It seems the vbulletin_global.js file is much different and I can't figure out how to edit it to make this work again.


Thanks for any help

I haven't installed beta 6 yet, but this hack is working fine for me on beta 5

[R1lover]

I haven't installed beta 6 yet, but this hack is working fine for me on beta 5

Interesting..

The file I listed above was no where near the content of the old one and I have no clue where to edit it in order to make this work.

Maybe they changed the .js file in beta6?

[R1lover]

I just looked back and yes this file was changed in a recent update... my last one was beta4 and it was like the 3.6.8 version. The new one is uhhhhh very different and hard to read. lol

[R1lover]

The issue is they are now compressing the java script files with a standard download, you can select uncrompressed version though when you download your copy on vb, this is new to me and something I was not aware of. Trying to read and edit the compressed version it not something I'm going to tackle. I have a feeling there will be more people finding this the hard was as well.

[R1lover]

Here is the fix on 3.7.0 Beta 6 (or work around)

Download the uncompressed version of vBulletin from vbulletin.com members area. Then edit the .js file in the uncompressed version and replace the compressed version with it on your server. By default it seems that the compressed version is standard if you don't select the option of uncompressed. I'm sure this will get others as well with this mod.

It's up and running fine on 3.7 now.

[Lizard King]

In compessed js search for
{this[C]=this[C+1]}this.length--;return A}}
Just add after
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;};}}

and you'are good to go

[mark|3]

hi is there anyway to set different resize dimensions for the blog and forum. (.g. 500 and 700)
thanks

[odeezie]

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.


This made my chatbox stop working as well. How do I avoid this?

[vithorius]

I will have to try this hack!!!

[Mdrop]

Hmm.. not working on 3.6.10 ?

[Denyer]

Remember that if you replaced clientscript/vbulletin_global.js and includes/class_bbcode.php when you upgraded to .10 that you'll have to edit them again. ;)

[1100101]

Remember ... when you upgraded to .10

And I was wondering why it won't work...

Next time, i'l make my Update wihout beer :D

thanks, very much...

[Jpax]

Can you make it work with 3.7 please :D

[Jpax]

I get this errror The following dependencies were not met:
This product is not compatible with version 3.7.0 of vBulletin. (Compatible starting with 3.6.8 / Incompatible with 3.7.0 and greater)

[transparent]

Remember that if you replaced clientscript/vbulletin_global.js and includes/class_bbcode.php when you upgraded to .10 that you'll have to edit them again. ;)

Thx for the tip...Working perfect again on 3.6.10:D

[ski diva]

Can this be installed on with 3.7 after you've upgraded?

[ski diva]

Attempting to install this, I've run into what's probably a simple problem. When I attempt to edit the file vbulletin_global.js, its entire content shows up in my text editor as one long line. I can "soft wrap" the text, but the line endings remain arbitrary.

This is preventing me from finding and replacing the necessary lines.

I'm on a Mac, using Komodo Edit and/or TextWrangler.
Thanks for any help.

[Taragon]

Installed :)

I get this errror The following dependencies were not met:
This product is not compatible with version 3.7.0 of vBulletin. (Compatible starting with 3.6.8 / Incompatible with 3.7.0 and greater)

In the product-dynamicpic.xml find:
<dependency dependencytype="vbulletin" minversion="3.6.8" maxversion="3.7.0" />
and replace this with:
<dependency dependencytype="vbulletin" minversion="3.7.0" maxversion="3.7.99" />


Attempting to install this, I've run into what's probably a simple problem. When I attempt to edit the file vbulletin_global.js, its entire content shows up in my text editor as one long line. I can "soft wrap" the text, but the line endings remain arbitrary.

This is preventing me from finding and replacing the necessary lines.

I'm on a Mac, using Komodo Edit and/or TextWrangler.
Thanks for any help.


In compessed js search for
{this[C]=this[C+1]}this.length--;return A}}
Just add after
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;};}}

and you'are good to go

[ThreeD]

this does not seem to work with IE7 if you're running VB3.7 :( Can anyone else confirm this?

[Stefanus]

this does not seem to work with IE7 if you're running VB3.7 :( Can anyone else confirm this?

Yep, working with IE7 on 3.7.2
" Rob of Zimbabwe (http://www.boerekryger.co.za/forum/showpost.php?p=1352&postcount=4) "

[Taragon]

I'm receiving a css validation error
606 * html .resizeimage Value Error : width Lexical error at line 606, column 60. Encountered: "?" (63), after : "" ? '800px' : 'auto');
606 * html .resizeimage Value Error : width Parse error - Unrecognized }
Would this be fixable perhaps? (I'm using the compessed js)

[chrisbeau]

About your request to open the link into a new tab/window:
Open vbulletin_global.js file (where you edited the code originally) and find:
window.location.href = link;

Replace it with:
window.open(link, '_blank');


You are done. :)

I did this but it still doesnt work. Any Ideas ???

[ApexSpeed]

Has anyone installed this on a 3.7.* board and had everything work properly?

[ski diva]

I'm using it with 3.7, no problem.

[Taragon]

I'm using it with 3.7, no problem.
Except from this that is. It should work fine though.
I'm receiving a css validation error
606 * html .resizeimage Value Error : width Lexical error at line 606, column 60. Encountered: "?" (63), after : "" ? '800px' : 'auto');
606 * html .resizeimage Value Error : width Parse error - Unrecognized }
Would this be fixable perhaps? (I'm using the compessed js)

[TheLastSuperman]

Thanks :D

[tarionyx]

great mod! works perfect. not sure if the images are supposed to be clickable by default or not??

[KAWIE1]

Installed this and it helped. Thanks man.

[steven.hartland]

Just wanted to make people aware that this code is exploitable, and enables users to rewrite any part of the page :(

So until fixed I would disable this plugin if you have it installed

N.B. I've notified the developer of the precise details of the issue.