New bbcode: Imageleft and Imageright

Administration issues and rules for the forum.

Moderator: Student Council

Locked [phpBB Debug] PHP Warning: in file [ROOT]/vendor/twig/twig/lib/Twig/Extension/Core.php on line 1266: count(): Parameter must be an array or an object that implements Countable
User avatar
Mimi
Site Admin
Posts: 4235
Joined: Fri Oct 28, 2005 7:50 pm
Location: Paragon City
Contact:

New bbcode: Imageleft and Imageright

Post by Mimi » Wed Jul 02, 2008 2:23 pm

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.

User avatar
Lagomorph
Posts: 1540
Joined: Sun Oct 21, 2007 10:26 pm
Location: in search of carrot cake
[phpBB Debug] PHP Warning: in file [ROOT]/vendor/twig/twig/lib/Twig/Extension/Core.php on line 1266: count(): Parameter must be an array or an object that implements Countable

New bbcode: clear

Post by Lagomorph » Tue Jul 22, 2008 8:27 pm

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.

Locked
[phpBB Debug] PHP Warning: in file [ROOT]/vendor/twig/twig/lib/Twig/Extension/Core.php on line 1266: count(): Parameter must be an array or an object that implements Countable
[phpBB Debug] PHP Warning: in file [ROOT]/vendor/twig/twig/lib/Twig/Extension/Core.php on line 1266: count(): Parameter must be an array or an object that implements Countable

Who is online

Users browsing this forum: No registered users and 1 guest