How to add BB code that wraps text around an image

[ZnARk]

This prolly have been done before but here is how I added a custom BB code that will wrap text around a picture.
Might be useful in news forum etc
Also made a little image/button to go with it
Just save the wrap.gif and upload it to your forum/images/editor folder.

Go to forum/admincp/bbcode.php? and add the new BB code...

Title:

Wrap text around image

Tag:

wrap

Replacement:

<table border="0" align="left"  valign="top"> 
<tr> 
<td><img src="{param}" border="0" align="left"></td> 
</tr> 
</table>

Example:

[wrap]imgurl[/wrap]

Description:

This will wrap text around a picture of your choice. Just add the url to the img you wish to use.

Use {option}:

No

Button Image (Optional):

images/editor/wrap.gif

Added some screens of it to...

[ZnARk]

Button

[Amavisca]

Thanks , man this is exactly what I need. Awsome.

[mindbuster]

Cool, thnx, needed this

[KW802]

Easier way of doing this...

Go into ACP --> Custom BB Codes --> Add New BB Code

• Title = Image with alignment
• Tag = img2
• Replacement =

  <img src="{param}" align="{option}" border="0" hspace="6" vspace="3" alt=""/>

• Example = [img2=right]URL of image[/img2]
• Description = This tag allows you to align an image to the right of left of your text.
• Use {option} = Yes
• Button Image (optional) = {your choice....}

This method requires no code changes and allows you to specify the alignment (left, right, top, or bottom).

[wintermute]

Thanks to you both, very much

[coolegg]

I think there may be a bit of a security issue with the methods suggested so far...

I discovered one drawback to creating a custom <img> BBCode, and that is that the security option that allows the admin to filter out any image urls with dynamic elements does not work on custom BB codes that use <img src=""> (that security option is under Admin Panel > vBulletin Options > Message Posting and Editing Options) Even when enabled, that security setting does not work on any custom BB codes that are based on the <img> tag.

I am a security nut (paranoid), so what I came up with was two custom BBcodes that will float any block-level element, image or otherwise. These BB codes can then be nested AROUND the [IMG][/IMG] BB code so that the image floats but the security setting still works.

So my BB code useage looks something like this:

[FLOATLEFT][IMG]imageurl[/IMG][/FLOATLEFT]

My two custom BB codes look like this:

Title: FLOATLEFT
Usage: [FLOATLEFT]{param}[/FLOATLEFT]
Replacement: <div style="float: left">{param}</div>

and

Title: FLOATRIGHT
Usage: [FLOATRIGHT]{param}[/FLOATRIGHT]
Replacement: <div style="float: right">{param}</div>

Edit: fixed typos

[mholtum]

sweet, I used KW802's way. Quick and Easy!

[hoangminh]

Originally Posted by ZnARk

This prolly have been done before but here is how I added a custom BB code that will wrap text around a picture.
Might be useful in news forum etc
Also made a little image/button to go with it
Just save the wrap.gif and upload it to your forum/images/editor folder.

Go to forum/admincp/bbcode.php? and add the new BB code...

Title:

Wrap text around image

Tag:

wrap

Replacement:

<table border="0" align="left"  valign="top"> 
<tr> 
<td><img src="{param}" border="0" align="left"></td> 
</tr> 
</table>

Example:

[wrap]imgurl[/wrap]

Description:

This will wrap text around a picture of your choice. Just add the url to the img you wish to use.

Use {option}:

No

Button Image (Optional):

images/editor/wrap.gif

Added some screens of it to...

If you use this way to wrap text around images, it will get problem when this post are show on the vbcmps index page, all the news will be displayed incorrect positions.

I have use the KW802 way before I read this thread, it is simple and good way to implement

[mholtum]

Originally Posted by KW802

Easier way of doing this...

Go into ACP --> Custom BB Codes --> Add New BB Code

• Title = Image with alignment
• Tag = img2
• Replacement =

  <img src="{param}" align="{option}" border="0" hspace="6" vspace="3" alt=""/>

• Example = [img2=right]URL of image[/img]
• Description = This tag allows you to align an image to the right of left of your text.
• Use {option} = Yes
• Button Image (optional) = {your choice....}

This method requires no code changes and allows you to specify the alignment (left, right, top, or bottom).

I added this code (see attatchment) yet the image does not appear.. Any ideas? When I click the button I place the path to the image. I am thinking I am placing the wrong info in the popup.

Ok, Huge Duh to me.. You place "left" or "right" in the popup... DUH DUH DUH

[Milk Man]

for some reason when i use the wrap and then view the post, my text dissapears

[KW802]

Originally Posted by Milk Man

for some reason when i use the wrap and then view the post, my text dissapears

Which version of the code are you using?

[emtee]

KW802, I'm using your code and when I type [img2=left]http://www.....gif[/img], the image doesn't show up, it just display the text [img2=left]http://www.....gif[/img]. I wonder why???

mholtum: Ok, Huge Duh to me.. You place "left" or "right" in the popup... DUH DUH DUH <<< I'm still confused. What do you mean by "the popup" ?

[KW802]

Because it needs to be closed with an "[/img2]" tag instead of a "[/img]" tag.

[emtee]

Oh ok got it, thanks KW802. By the way, you need to edit your instructions so people don't get errors like I did. Thanks for the quick reply!

[mholtum]

Originally Posted by emtee

Oh ok got it, thanks KW802. By the way, you need to edit your instructions so people don't get errors like I did. Thanks for the quick reply!

The instructions worked for me..

[KW802]

Originally Posted by emtee

Oh ok got it, thanks KW802. By the way, you need to edit your instructions so people don't get errors like I did. Thanks for the quick reply!

Whoops! I fixed the post.

[Milk Man]

i'm using the first code...

[MP3]

thanks

[aggiefan]

If you want a resize parameter (like an 80X80 picture that you want posted at width="40")...

Could you set that up in the setup?

That'd be easier than resizing all the pictures I want to use.

***EDIT***

I figured out how to do it to a fixed size (like if I wanted all pics 150 width..(you just put width="150" in the code box. But how can I make it to where for each individual post I can put width=?? and it works?