New bbcode: Imageleft and Imageright

[Mimi]

The forums are now updated to include "imgleft" and "imgright" bbcode, for users to wrap text around images they put in their posts.

The syntax to use imgleft and imgright is as follows:

Code: Select all

[imgleft]URL[/imgleft]
and
[imgright]URL[/imgright]

The URL should be your standard image link. Examples follow, showing both the code and the resulting image and text:

Code: Select all

[imgleft]http://i30.photobucket.com/albums/c350/Screaming-Mimi/Web%20Stuff/cross-1.jpg[/imgleft][size=150]The body of text now wraps to the right of the left-fixed image. The image will not interrupt written text.[/size]

The body of text now wraps to the right of the left-fixed image. The image will not interrupt written text.

Code: Select all

[imgright]http://i30.photobucket.com/albums/c350/Screaming-Mimi/Web%20Stuff/cross-1.jpg[/imgright][size=150]The body of text now wraps to the left of the right-fixed image. The image will not interrupt written text.[/size]

The body of text now wraps to the left of the right-fixed image. The image will not interrupt written text.

[Lagomorph]

A related new bbcode has been added: clear. Before explaining how to use it, I will demonstrate why it's needed.

Consider the following:

Line one
Line two
Line three

In my browser (and probably yours too?) the images "stagger" like a staircase. Not at all what I wanted. Here's what I wanted:

Line one

Line two

Line three

This is what the clear bbcode let's you accomplish.

Now, a technical explanation. When you use the imgleft and imgright bbcodes, what they are doing is "floating" your image to the sides. (For web dev savvy folks, we're using CSS floats.) Anything that comes after will continue wrapping around them until they finally get to the bottom of the image. This includes any images that may come after, as illustrated above. It can also include your forum signature.

To avoid things crashing into each other, you need to tell the browser to stop wrapping. The clear tag code can do that. (For the web dev savvy folks, we're using CSS clears.) Here's the syntax you want to use:

Code: Select all

[clear]both[/clear]

So where do you put it, and how do you know when to use it? Generally, here's the pattern to use:

(floated image)
(text that should wrap)
(clear)
(text that shouldn't wrap any more)

You just stick the clear after the text that should wrap and before the text (or images) that shouldn't wrap.

Here's another way to think of it: A clear says "make sure that everything that follows gets placed below any floating images we might have".

For more advanced usage, you can also specify "left" or "right" instead of "both". Normally, "both" should be fine. But if you want to do something really complicated that has images floating on both sides, these will let you tell the browser to only skip down after images floated on the left (for "left") or images floated on the right (for "right").

As an example, here's how I did the nicer layout above:

Code: Select all

[imgleft]http://i30.photobucket.com/albums/c350/Screaming-Mimi/Web%20Stuff/cross-1.jpg[/imgleft]Line one[clear]left[/clear]
[imgleft]http://i30.photobucket.com/albums/c350/Screaming-Mimi/Web%20Stuff/cross-1.jpg[/imgleft]Line two[clear]left[/clear]
[imgleft]http://i30.photobucket.com/albums/c350/Screaming-Mimi/Web%20Stuff/cross-1.jpg[/imgleft]Line three[clear]left[/clear]

If you use the imgleft or imgright bbcodes in a post, it's probably a nice safety touch to put a clear at the end of your post just to make sure it doesn't crash into your signature. It's not strictly required, and if your post is long enough it shouldn't be an issue. But it can help make sure that it doesn't make things crash into each other on someone else's browser.