A better IMG tag

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:

[xFLOAT=left]http://upload.wikimedia.org/wikipedia/en/thumb/3/3e/Magic_Pot_FFX.jpg/65px-Magic_Pot_FFX.jpg[/xFLOAT]blah, 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

[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:

[IMGG=world map]MAP3.jpg[/IMGG] 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]

Originally Posted by Renmiri

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

[IMGG=world map]MAP3.jpg[/IMGG] 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

[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

[TMB1=Yeti]http://ffproject.net/forumwiki/images/Bikanel_13.jpg[/TMB1]

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

[TMB2="http://ffproject.net/forumwiki/images/Bikanel_13.jpg"]yadda, yadda wwwww wwww wwww wwwww [/TMB2]

Signature should work

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