Show Thread Enhancements - CES Dynamic [IMG] Resize (Plugin Version)

CES DYNAMIC [IMG] RESIZE
Version: 1.2.2

This mod is based on TECK's Dynamic Picture Resize for [IMG] tag mod. I made this mod after seeing a discussion in the thread about the potential number of file edits necessary to add some requested features, and then realized the entire mod could be accomplished with essentially just 1 plugin. TECK suggested that for ease of support I release my updated product file in a new thread, so here it is.

*** NEWS ***
7/8/2009 - v1.2.2 released
9/23/2007 - v1.2.1 released
9/21/2007 - v1.2.0 released
9/13/2007 - v1.1.0 released
9/11/2007 - v1.0.4 released
9/9/2007 - support thread opened, v1.0.1 - 1.0.3 released
9/8/2007 - v1.0.0 released

Products to Install: 1
Plugins Included: 7
Files to Upload: 0
New Templates: 1
Template Edits: 0
Files to Edit: 0

What It Does:
When using the [IMG] bbcode tag, a user may add an image to his/her post that is too ginormous for your intended vBulletin style, pushing things out of the way, and not looking particularly nice. This hack resizes oversized images to specified acceptable dimensions, anywhere that the [IMG] tag is used.

Current Features:

• show a disclaimer when an image has been resized (option)
• clicking the image opens in parent or new window (option)
• multiple images on a line will be resized so their total width is below the set max

Known Issues:
- None

*** Changelog ***
As of Version 1.2.2:
- bug fix: XSS flaw

As of Version 1.2.1:
- bug fix: table explosion

As of Version 1.2.0:
- new feature: max width sharing for multiple images on a line
- bug fix: onclick interferes with [url]
- bug fix: onclick properties not passed to resize disclaimer
- bug fix: images separated by line breaks
- bug fix: [img] ignores [noparse]

As of Version 1.1.0:
- new feature: maximum height
- extended: maximum width can be in pixels or percentage
- bug fix: resize message class not set in Internet Explorer
- updated templates: dynamicpic_script

[mrghostno1]

Actually i'm with the image disclaimer disabled, and still getting one per line...
I'm doing a rebuild befor and after each enable/disable of this mod.
And every image got 1 per line, even the ones wich didn't need to be resized.
When disclaimer is disabled the linked images show ok, but you can't reach the link since the full image is opened, this isn't possible to fix i think. Unless you added the link to full image only on the disclaimer text.

[thincom2000]

Originally Posted by mrghostno1

When disclaimer is disabled the linked images show ok, but you can't reach the link since the full image is opened, this isn't possible to fix i think. Unless you added the link to full image only on the disclaimer text.

This sounds like a good solution. Unfortunately I am having a great deal of trouble getting images to go by % and be on the same line without the % having weird results. See here: http://www.crackedeggstudios.com/project.php?issueid=36

[mrghostno1]

I don't get it, shouldn't the second image be shown under the other? Since it's over width.
In may case i have small thumbs. I'm confuse

[Dave_W]

Hey, as I've said before, this is a great mod. I just have one small problem. Members of my website have Sig Images that are made up in parts, so they can link them to different places, but it still looks like one large image (basically, to get around our signature size rules).

Unfortunately, since installing this mod a newline appears between the images, ruining the effect. I've enclosed a screen-shot for your perusal. Although I could fix it myself, I'd rather you did it-it's your code and I want everyone to get the benefits of this mod.






Thanks,

-Dave

[thincom2000]

Hi, it took a bit of searching around on some forums, but I figured out why the javascript in my test version stopped working, so I will be addressing all these issues quite shortly.

[thincom2000]

Originally Posted by mrghostno1

shouldn't the second image be shown under the other? Since it's over width.
In may case i have small thumbs. I'm confuse

Okay, I think I am done with the updates to the mod and should be uploading it relatively soon. What will happen now is that all images remain on the same line if they were entered on the same line (that is, original line breaks are maintained).

This would be a bad thing if multiple images in a line were oversized, because even after resize, leaving them together would probably still be too big. This was the original reason for forcing the images to separate lines.

Now, however, the mod will treat ALL images on a line together as a single image, and resize them accordingly. Basically this means they will all have to share the maximum width, and each will be smaller than if they were the only image. I think this is the best solution without getting invasive on post layout again.

The code structure has changed. In order to accomplish the "width sharing" all widths have to be calculated first (otherwise the ones resized first would mess up the calculations). Once that is complete the images are finally resized. A new plugin had to be added to avoid the onload() bug. This is the bug (or feature?) where Javascript will only run 1 onload command in an entire page. This was partially your issue if sometimes the images weren't clickable. Although the real thing to blame is the session hash vBulletin hides in every URL. Somehow this prevents Javascript functions from running more than once. It must be the session hash because clicking a vBulletin link doesn't work as expected, yet directly typing the URL does work (and this is the only difference I can tell between the URLs). Anyone (staff?) care to comment?

All resize commands have been moved to the $onload variable in the body tag. In addition, a second new plugin had to be added to insert a regex to prevent each image from breaking the intended layout and eventually style (this is the line break fix).

To address the [url][img]https://vborg.vbsupport.ru/[/img][/url] reported bug, where the link opens the image and not the address in the url bb-code: this is actually not a bug, but intended functionality. For now, if you want to link resized images elsewhere, use captions. Or right click and open the link that way. I will add a feature so that the link to the original image moves to the disclaimer if wrapped in a URL tag. If the disclaimer is disabled and this is the case, the link to the original image will disappear.

[mrghostno1]

Now, however, the mod will treat ALL images on a line together as a single image, and resize them accordingly.

But this doesn't apply to images wich have (each one) smaller size then the limit right?
Just to make it clear, for me and others, because vbulletin already break-line if the width of all images is too long.

[thincom2000]

As I said, images in these cases are not treated individually. vBulletin cannot word wrap because the disclaimer forces a line break anyway (even when disabled), so this is the method that is used. The javascript cannot suppress one form of a line break instead of another. Though this is possible, the entire mod would have to be rewritten, and then a user with javascript disabled will still be seeing huge images. If a user doesn't like the overall resize, they should edit their posts. That's what post preview is for.

I have spent 2 days changing up this mod so that users who were breaking site rules anyway (using a workaround to essentially use huge images) wouldn't be affected by line breaks. If a user is smart enough to figure out the workaround, they should also know that the simplest way to stop a block-level div from adding line breaks is to enclose it in a table cell. There are some excellent table bb-codes available (for example, NuHit packages [table], [tr], [td] with NuWiki) so admins wouldn't have to enable HTML to allow something like this.

But that's enough of a rant. I think I've squashed most of the bugs with this new version finally. All I have left to do now is add the [url] checks.

[thincom2000]

The new version has been posted.

@offline, all of the bugs you reported have been fixed in this version.
@Dave_W, the "bug" you reported has been fixed in this version through "width-sharing."
@mrghostno1, the [url] (and other tags) bug you reported has been fixed in this version.

New options have been added. You may wish to configure.

Note: The width sharing interferes with word wrapping for the sake of speed. I just don't think it would be efficient to add 2 more regexes to have a word wrap work on images again. Plus it is likely that images placed together on a line are intended to be viewed side-by-side anyway, and word wrap could become frustrating to these users.

Changing it back would have to be done entirely on the Javascript side (adding 2 nicely slow regexes), so users with Javascript disabled would experience it as is anyway.

[xandizitxu]

Thx for the update \o/ already installed ^^

A good feature is to implement Highslide JS ^^

Thanks again for the mod!