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 )

[djbaxter]

Regarding the imaghe distortion, this seems to work:

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

I've just kept the width parameters and deleted the height paramaters. This shrinks the width and the height shrinks proportionately.

Now there's just the problem of the signature wrapping.

[BirdOPrey5]

For me the above code displays the large picture when the page first loads- it should show the small image until it gets clicked.

[BirdOPrey5]

Well with height removed now you could add an option, probably best to define the large width so you can use:

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

[RI="800"]http://yourwebsite/image.gif[/RI]

Double clicking enlarges the image to 800px wide.

[djbaxter]

Change max-width to just width and it displays the small image by default I think:

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

Then no option necessary.

[midnz]

Originally Posted by djbaxter

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.

I also use postbit_legacy and it works for me without signature wrapping. I wonder what I did .
When I was looking for reasons/solutions to fix the sig wrapping I tested adding/removing that Postbit.css edit mentioned in post#12 and replacing it with the following code and that fixed the issue for me. Prior to that I found that any example of image align="left" or align="right" caused signature wrapping. Would you mind trying the Postbit.css edit below to see if that fixes it for you please?
NOTE: That edit did affect the postbit_legacy display for me.

Postbit.css
find:

/*post bit*/  

add under:

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

My apologies for assuming you must've made edits that contributed to the sig wrapping. I assumed that because your attached image shows there is very little space between your post content and your signature. Or is that attachment an image of Preview Post?
If that edit doesn't work I'll be happy to provide you with copies of any templates that might help find clues to resolve it for you.

Originally Posted by djbaxter

Change max-width top just width and it displays the small image by default I think:

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

Then no option necessary.

I thought I had already tried removing the height attributes to maintain image proportions. Clearly I hadn't . Awesome work! Thank you so much for bothering to help. I really do appreciate it .
I'm hoping the sig wrapping might be easily solved for you now.

[midnz]

Originally Posted by BirdOPrey5

Well with height removed now you could add an option, probably best to define the large width so you can use:

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

[RI="800"]http://yourwebsite/image.gif[/RI]

Double clicking enlarges the image to 800px wide.

Although it's not necessary now your idea is a very good one for allowing that extra option of max display size per image. That will no doubt be useful to me later .

[djbaxter]

Originally Posted by djbaxter

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

Originally Posted by midnz

I also use postbit_legacy and it works for me without signature wrapping.

No. I said I do NOT use postbit_legacy. I use postbit.

[midnz]

Originally Posted by djbaxter

No. I said I do NOT use postbit_legacy. I use postbit.

Duh, sorry about that. It's sunken in now .

Do you think that altering the code edit from postbitlegacy that I used, to postbit, might help?

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

[djbaxter]

I can't see how that would make a difference, since it's code I'm not using.

[midnz]

It won't make any difference. I've checked myself.

The best that can be achieved at present is to remove the align="left" from the code and forget about text wrapping until a solution can be found for those using the newer horizontal postbit layout.

I came from vB3.6 where align="left" worked to vB4.0.5/6 where it doesn't work any more with the newer horizontal postbit display because of the signature interference issue.

If I were still using 3.6 I'd find the signature code in the template and place <p></p> right before it to move signatures down. vB4 is somewhat more complex for me and I'm still coming to grips how it all works. The solution appears to me to be changing how the signature is displayed using the newer horizontal postbit layout.