A better IMG tag

[Renmiri]

You know all that white space by the side of every image ever posted on a forum using the standard IMG tag ? I happen to hate it. I want my images to blend in with the text.

So I did my own BBCODE for it:

1 - Go to the Admin panel and select "Add Custom BBCode"
2 - For title enter "Float Image on text" or something like it, same for description
3 - for tag enter xFLOAT
4 - for "Replacement" enter the text below

<a href="{param}"><img alt="" border="0" src="{param}" style="margin: 0px 10px 10px 0px; float: {option};"/></a>

5 - For "Example" enter this:

http://upload.wikimedia.org/wikipedia/en/thumb/3/3e/Magic_Pot_FFX.jpg/65px-Magic_Pot_FFX.jpgblah, blah, blah, yada, yada, yakety yak

6 - Check yes on "use {option}"

7 - optionally, add an icon path to have it come up on your posting box

tada!

Here it is at work!
http://forums.ffproject.net/showthread.php?t=747

http://ffproject.net/forumwiki/images/thumb/800px-FLOAT2.jpg

[rmxs]

thanks i use it in future :)

[bashy]

Can you pleases explain what to do, and also add the instructions to a notepad file? :)

[tazB.ca]

i dont understand what this does

[Mr Chad]

i dont understand what this does
look at the picture...

it lets you wrap text next to the image. (instead of being confined to one line)

[HappyPike]

I made a tag like that recently too. However, I simply use the same IMG tag name, but with align option.

To align an image to the right, people would use

https://vborg.vbsupport.ru/

[bandoftheweek]

Awesome mod seriously, I needed this for my site www.bandoftheweek.com - I shall install it in a while.

[murrtex]

I did it but.it mixed with my signature

https://vborg.vbsupport.ru/ (http://img207.imageshack.us/my.php?image=image1fg8.jpg)

[Renmiri]

I did it but.it mixed with my signature

http://img207.imageshack.us/img207/9690/image1fg8.th.jpg (http://img207.imageshack.us/my.php?image=image1fg8.jpg)

Yes it does. Any text around the image gets mixed

Just add some empty lines after the image to push your signature down far enough and it will be back to it's normal place (or add a couple of <br> to the beggining of your sig)

[HappyPike]

Someone asked me to post my version of the IMG with align code, so here it is:

Title: IMG with align option
Tag: IMG
Replacement: <img src="{param}" align="{option}" border="0" hspace="5" alt="Image">
Example: https://vborg.vbsupport.ru/This image should align to the right of these texts.

Description: This image tag allows align option. The align option can be TOP, BOTTOM, MIDDLE, LEFT, or RIGHT.
Use {option}: Yes

Some of you may not like to use the "align" within <IMG>, but I don't have problem with it myself. :)

[Snakey]

Someone asked me to post my version of the IMG with align code, so here it is:

......

Some of you may not like to use the "align" within <IMG>, but I don't have problem with it myself. :)
I've modified it a bit so it makes use of css (w/o align-attribute) and made it xhtml compliant:

Title: IMG with align option
Tag: IMG
Replacement: <img src="{param}" style="margin:0px 5px 0px 5px; border-width: 0px; float:{option};" alt="Image" />
Example: https://vborg.vbsupport.ru/images/smoothblue/buttons/reply.gifThis image should align to the right of these texts.

Description: This image tag allows align option. The align option can be LEFT or RIGHT.
Use {option}: Yes

For replacement, you can also use it without margin:0px 5px 0px 5px; (which replaces hspace) or without border-width: 0px; (replaces border)

[Renmiri]

I've modified it a bit so it makes use of css (w/o align-attribute) and made it xhtml compliant:...


Wow!

Great suggestions guys, thanks! :)

I also did a "thumbnail" one, that always dislays a 150px wide version of the picture with a link to the original one.

Title: Float image with thumbnail
Tag: FLOAT (or IMG if you prefer)
Replacement: (now fixed 8/2/06)
<a href="{param}"><img alt="" border="0" src="{param}" style="width:150px; margin: 0px 10px 10px 0px; float: {option};"/></a>

Example: https://vborg.vbsupport.ru/images/smoothblue/buttons/reply.gifThis image should be 150 px wide, should align to the right of these texts and should link to the original full sized image

Description: This image tag allows align option. The align option can be LEFT or RIGHT.
Use {option}: Yes

[project-Buckfas]

I've wanted this for a while. I hit install so I can do it when I go home ;)

[blue6995]

I also did a "thumbnail" one, that always dislays a 150px wide version of the picture with a link to the original one

I have tried this twice, changing the image link to my own, but all I get is the original image not a thumbnail!

Any ideas why?

[Renmiri]

I have tried this twice, changing the image link to my own, but all I get is the original image not a thumbnail!

Any ideas why?
My mistake!

Where it says width="150px" it should say width:"150px"

Here's the correct code
<a href="{param}"><img alt="" border="0" src="{param}" style="width:150px; margin: 0px 10px 10px 0px; float: {option};"/></a>

[category]

does it work for 3.6.0

[HappyPike]

Yes, it does. These BBCodes should work for any v3.x of vBulletin.

BTW, a small downside is, if you have images disabled in sigs, people would be able to bypass it using these custom image tags. The disable images in sigs rule only affects the official [IMG] tag.

[category]

doest work for me it doesnt display the image

[zooki]

Hi how do you get it to work with Dynamic images?

Here is one:

http://video.google.com/ThumbnailServer?app=vss&contentid=69d991ae930daae6&second=5&itag=w160&lang=en&sigh=fCbDslAzfCaTN8S-h9V4WM5xhPc

If you can add dynamic images it wud be cool :) thanks

[Renmiri]

doest work for me it doesnt display the image
Can you recheck the BBCode ? It should work even for 3.6

[Renmiri]

Hi how do you get it to work with Dynamic images?

Here is one:

http://video.google.com/ThumbnailServer?app=vss&contentid=69d991ae930daae6&second=5&itag=w160&lang=en&sigh=fCbDslAzfCaTN8S-h9V4WM5xhPc

If you can add dynamic images it wud be cool :) thanks

What you are looking for is a "media" BBCode. The best one can be found here
https://vborg.vbsupport.ru/showthread.php?t=106239

[category]

Can you recheck the BBCode ? It should work even for 3.6

yep doesnt work for me

[Renmiri]

yep doesnt work for me
Sorry!

When I upgrade my forums to 3.6 I'll post an update, ok ?

[category]

Sorry!

When I upgrade my forums to 3.6 I'll post an update, ok ?

ok thanks but arent there any similar hacks like this?

[Renmiri]

ok thanks but arent there any similar hacks like this?

Not that I know of....

[Morning Glory]

I'm not getting the image either. :confused:

[Renmiri]

I'm not getting the image either. :confused:
Can you paste the code you put on "replacement" for the BBcode here ?

3.5.4 should be working....

[attroll]

I can not get this to work either. I posted the code exactly like you said and when I post an image it post like this. It does not put the in the message like it should instead it looks like this.

[XFLOAT="http://www.mysite.net/gallery/files/2/9/3/IMAG0048_1_thumb.jpg"]

[attroll]

Dah, I figured out what I was doing wrong. When it ask for the prmpt i have to type either left, center. or right. My bust.

[Renmiri]

Glad you found the problem :D

[towermatt]

I love this but for some reason when I try to enter down, it does not create blank white space to separate the sig text.

If I enter down and type (which people will normally do I suppose) it works fine. But not if I don't but text in. Is this an option setting? Show blank spaces or something.

Great modification though, I really needed this and it works well on 3.6

[Renmiri]

Yes, it doesn't work so well if your image is the last thing on the page, it makes your sig look weird. I usually avoid putting images at the bottom of my post or use the regular img tag for short posts.

Thanks for the comments :)

[Big Island]

Excellent...have been wondering how to do this for a while now. Can anyone devise a way to attach a gray caption box to the bottom and add text to it to make sense of the picture for the reader?

[Big Island]

Anybody? ;-)

[Renmiri]

I do have a similar one for description plus thumbnail but no gray box:

MAP3.jpg will get a tumbnail of MAP3.jpg with a caption that says "World Map"

Follow the instructions above but use IMGG instead of xFLOAT and then use this code instead

<a href="{param}"><img src="{param}" style="width:150px; margin: 0px 10px 10px 0px;"/></a> {option}

[Big Island]

I do have a similar one for description plus thumbnail but no gray box:

MAP3.jpg will get a tumbnail of MAP3.jpg with a caption that says "World Map"

Follow the instructions above but use IMGG instead of xFLOAT and then use this code instead

<a href="{param}"><img src="{param}" style="width:150px; margin: 0px 10px 10px 0px;"/></a> {option}

Nice work!

I've played around a bit, but I can't get it to format quite the way I want. Can anyone show an example of how we could do an image, complete with box/border and caption like the "A yawning cat" found here:

http://en.wikipedia.org/wiki/Cat_communication

Many thanks to anyone that could help with this.

[NFLfbJunkie]

Great BBCode Renmiri, but is there a way to for the signature to the bottom without having to enter empty space if there's not enough text to wrap with the image?

[Renmiri]

I'll post here when I find a way to fix signatures Junkie.

Same for your box Big Island.

Keep an eye on this thread :D

[Renmiri]

Good news!!!

I got the thumbnail code here AND the solution for the signatures

Big Island's Wiki like thumbnails
First create the new Thumbnail code: Follow the instructions above to add a bbcode, in my case TMB1, flag the option thingy to yes and use the replacement below

<table style="border: 1px solid rgb(0, 0, 0); background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); font-size: 11px;" cellpadding="0" cellspacing="0">
<tbody><tr>
<td><a href="{param}" target="_new"><img src="{param}" alt="Thumbnail" title="Thumbnail" border="0" width="250"></a><br><center>{option}</center></td>

</tr>
</tbody></table><br>

When you use it like
http://ffproject.net/forumwiki/images/Bikanel_13.jpg

You should get a thumbnail with 250 width that links to the real image, with a black line on the bottom with the image title "Yeti" or whatever users put after the = sign, just like my image below.

you can play around with the background color of the text, right now it is rgb(0,0,0) which is black, with rgb(255,255,255) for the font, which is white. The border can be made thicker too, right now I put "border: 1px" but you can increase it to 3px to make it thicker.

This option does require that the user enters a description for each image.

[Renmiri]

Now here is the fix for the signature... I's a half fix because the posts' font style gets weird and it is not very intuitive to use, from a user's point ov view but it works...

Junker's fix for signatures
First add the new thumbnail code: Follow the instructions above to add a bbcode, in my case TMB2, flag the option thingy to yes and use the replacement below

<table align="left" cellpadding="0" cellspacing="0" width="100%"><tr><td valign="top" align="left">{param}</td>
<td valign="top"><a href="{option}" target="_new"><img src="{option}" alt="Thumbnail" title="Thumbnail" border="0" width="300"></a></td>
</tr></table><br>

Very important: Keep the width=100% above otherwise the sig problem will still be there. To use it user just have to put the TMB2 tags around a paragraph (like making a QUOTE then specify the url of the image, like they would specify a URL link

yadda, yadda wwwww wwww wwww wwwww

Signature should work

anything below the image, including sig goes under the TMB2 quotes

[zglows]

thanks for this man, its really nice

[Renmiri]

Glad to help fellow vBers :D

[gnubittol]

Thanks genius !
this is very useful !

[Lyte]

Anyone running this hack? I'm looking for more demos before installing. It could be what I'm after but I'd like to see it in action. Thanks! :)

[Renmiri]

Yup... use TMB, TMB1 and TMB2 at my forum and see the results

http://forums.ffproject.net/

[Nikoo]

Where can i find those? TMB, TMB1 and TMB2 at your forum in text editor?

[Renmiri]

The code to TMB, TMB1 and TMB2 is on this thread, a couple of posts before this one. At my forum you can see them working.