BB Code Enhancements - BBCode: Resize Image with Text Wrap

Resize Image with Text Wrap BBCode

I created this BB Code for my own forum and thought I'd share it with the community.
This BB Code allows images to be posted at 200px Wide with text wrapping. Double-clicking the image enlarges it to 600px Wide. Single-clicking reduces the image size back to 200px Wide. The size/resize dimensions can easily be altered to suit your individual requirements. Just change the width= dimensions in the code below.

Demo Here

Instructions:
Open the BBCode Manager/Add New BBCode

Title: Resize Image

BB Code Tag Name: RI

Replacement:

<img src="{param}" width="200"  ondblclick='this.src="{param}";this.width=600' onclick='this.src="{param}";this.width=200' align="left" hspace="10">

Example: [RI]image web address goes here[/RI]

Description: Post image at 200px Wide with text wrap. Double-click to enlarge to 600px Wide. Single-click to reduce back to 200px Wide.

Use {option}: No
Button Image (Optional): images/editor/ri.png (upload the attached image via FTP to /images/editor folder) Kindly supplied by VonDoom Post#6
Remove Tag If Empty: Yes
Disable BB Code Within This BB Code: Yes
Disable Smilies Within This BB Code: Yes
Disable Word Wrapping Within This BB Code: Yes
Disable Automatic Link Parsing Within This BB Code: Yes


Please mark as installed if you use this

__________________________________________________ ______________

V. 1.01

• Removed height attributes to maintain image proportions (Thanks to djbaxter )

[midnz]

Originally Posted by Hippy

Nice mod there midnz
thanks for your efforts
Seemed interesting so I test it out..

seems if you add the image to a post with a couple lines. ..
it over laps down wards into the sig area..
Not sure if any one noticed it yet
I sure will use it if this could be fixed ..

Thanks for noticing that issue. I'll have a look at fixing the problem tonight when I get back from my travels.

EDIT: I've spent a few hours trying different remedies with limited results so far. It seems that images and tables with align=left or align=right don't appear to work in posts any more without interfering with signatures whereas using align=center, align=top & align=bottom do work without interfering with signatures. [S]I'll have to ask over at vB.com to look further in to the problem.[/S] Problem solved.

[midnz]

Originally Posted by Hippy

Nice mod there midnz
thanks for your efforts
Seemed interesting so I test it out..

seems if you add the image to a post with a couple lines. ..
it over laps down wards into the sig area..
Not sure if any one noticed it yet
I sure will use it if this could be fixed ..

If you view the demo link posted in the first post of this thread you'll see that the second post of my demo thread shows that this BBCode works with minimal text added and without interfering with the posted signature.

The problem of signature interference appears to arise when you use image or table align="left or right" after editing your postbit.css with the instructions placed in this mod.

I've replaced

Admin CP -> Style & Templates -> Style Manager -> CSS Templates -> Postbit.css

PHP Code:

.postbitlegacy .after_content {
clear:right !important;
} 


with

PHP Code:

.postbitlegacy .after_content {
    position: relative;
    width: 100%;
    clear:both;
} 


...and your reported signature interference error has vanished.

[BirdOPrey5]

FYI, the warning message isn't 'bogus' at least not in this case... for various security reasons it's better to always enclose the {param} tags in double quotes rather then single quotes... while I highly doubt anyone will have a problem the following codes will not display the error and is technically a bit safer. (I swapped the single and double quotes):

<img src="{param}" width="200" height="150" ondblclick='this.src="{param}";this.height=450;this.width=600' onclick='this.src="{param}";this.height=150;this.width=200' align="left" hspace="10">

Also I'm not sure what the purpose of "<!{param}>" is- I don't know what it does and it seems to work fine for me without it.

[djbaxter]

I meant to come back and comment on this, too. In fact, the errors I was receiving with a couple of other BBCodes were valid errors - some I could fix and some I couldn't.

As Bird of Prey says, don't ignore such errors - they do mean something and may create a vulnerability if ignored.

[midnz]

Originally Posted by BirdOPrey5

FYI, the warning message isn't 'bogus' at least not in this case... for various security reasons it's better to always enclose the {param} tags in double quotes rather then single quotes... while I highly doubt anyone will have a problem the following codes will not display the error and is technically a bit safer. (I swapped the single and double quotes):

Also I'm not sure what the purpose of "<!{param}>" is- I don't know what it does and it seems to work fine for me without it.

Thanks very much for the advice and assistance. I've edited in the double quotes where they should have been. The "<!{param}>" was unnecessary and should've been removed after I'd finished testing. That's done now, cheers .

Originally Posted by djbaxter

I meant to come back and comment on this, too. In fact, the errors I was receiving with a couple of other BBCodes were valid errors - some I could fix and some I couldn't.

As Bird of Prey says, don't ignore such errors - they do mean something and may create a vulnerability if ignored.

Thanks for that advice. All fixed .

[djbaxter]

Another issue: You've defined fixed values for height and width, both for the "thumbnail" and for the "enlarged" images.

If the image doesn't conform to the proportions of those sizes, you end up with a distorted image - in fact, both the thumbnail and the enlarged images are distorted in the test example - see attachment.

Also, this is still forcing the signature to wrap around the image along with the text, which isn't ideal.

[midnz]

Originally Posted by djbaxter

Another issue: You've defined fixed values for height and width, both for the "thumbnail" and for the "enlarged" images.

If the image doesn't conform to the proportions of those sizes, you end up with a distorted image - in fact, both the thumbnail and the enlarged images are distorted in the test example - see attachment.

As explained in my first post here "The size/resize dimensions can easily be altered to suit your individual requirements. Just change the width= and height= dimensions in the code below."
I've used this BBCode to display large local images of fixed proportions. Ideally there might be {option}s included for proportions however that is beyond the abilities of this learner driver I'm sorry. I'd be happy for anyone with the skills to improve the dimension constraints.

Originally Posted by djbaxter

Also, this is still forcing the signature to wrap around the image along with the text, which isn't ideal.

If you've made edits to your postbit.css as explained in this thread then you will have signature interference with image or table align="left or right". It's covered in post#12 above. If you check out my demo (second post in that thread) you'll see that this BBCode doesn't force the signature to wrap around the image and text unless you've made those postbit.css edits.
Also, the Preview Post will show the signature wrapping around the image and text, however when posted, it should display properly.

[BirdOPrey5]

I don't know if it would work in this case but did you ever try using max-height and max-width tags instead? This isn't exactly my specialty but I know they exist.

You could add an {option} but either the small or large image would still be out of proportion, you can't have two options.

[midnz]

Originally Posted by BirdOPrey5

I don't know if it would work in this case but did you ever try using max-height and max-width tags instead? This isn't exactly my specialty but I know they exist.

I was hopeful that using percentages might work but that was a failed test. I'll do some research/testing to see if/how your suggestion might work. Thanks for that .

Originally Posted by BirdOPrey5

You could add an {option} but either the small or large image would still be out of proportion, you can't have two options.

Awesome! You've saved me a few hours of researching that idea . Cheers

[djbaxter]

Originally Posted by midnz

If you've made edits to your postbit.css as explained in this thread then you will have signature interference with image or table align="left or right". It's covered in post#12 above. If you check out my demo (second post in that thread) you'll see that this BBCode doesn't force the signature to wrap around the image and text unless you've made those postbit.css edits.

I have NOT made those edits and it is still wrapping the sig. See the attachment in my post above.

I use postbit, not postbit_legacy, as you can see from the screen capture in the attachment.