[B][PLAIN]The Magic of BBcode [TABLE] Part 1: Creating Dynamic Thumbnails![/PLAIN][/B]
Let's try a bit of a different type of post today, something more "educational"...
If you post a lot of images on this forum you are probably aware of the proper usage of the [PLAIN][THUMB][/PLAIN] and the [PLAIN][THSIZE] [/PLAIN]tags. After all, while the forum automatically limits the maximum width of an image to the width of the post container, having giant pictures take up all the space on the page is very undesirable. These tags however are limited in what they allow you to do and in this post I will introduce a table based alternative method for resizing images that offers multiple advantages over the standard thumbnail tags. These include:
[LIST]
[*]Thumbnail size dependent on screen size
[*]respect for the image's original size
[*]even spacing between multiple images
[*]static and dynamic padding
[/LIST]
If you ask yourself why no one has done this before the answer is that what I'm showing here relies on advanced properties of the table tag that are not documented anywhere in the site's help section so most people are probably unaware of how powerful and versatile the tag actually is. At any point such a property is used it will be explained in a side note prefaced with "[B]Table Fact You Probably Didn't Know About[/B]". Admittedly this method also involves writing more code than the normal tags... [I]far[/I] more when it comes to the more advanced applications. But technology exists to be used! If a certain functionality exists somewhere in the software, no matter how obscure, it shall be exploited for its maximum potential! Forum software is no exception, so let's dive into the world of tables (this will be the first of a multi-part series, tables can do some [I]really[/I] interesting things)...
[SIZE=5][SUP][/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][CENTER][B]The Basics[/B][/CENTER]
[/SUP]
One thing to get out of the way before we start is a bit of clarification: The thumbnail tags actually generate [I]half[/I] thumbnails. They only scale down the source image and don't actually substitute with a smaller version version that would take less resources to load. So if a 2mb JPEG gets scaled down to 150x150px with the tags... it still takes the exact same amount of data to load as it does without the tags. The table implementation also doesn't do that but I wanted to emphasize that we are not losing any functionality compared to the original tag ;)
We'll start with a simple conversion without any of the special features; I have rendered a Greymon and the image is rather big... so I want to scale it down to a thumbnail about 250px win width:
[TABLE]
[TR]
[TD]
[SUB][SUB][SUB][COLOR=transparent].[/COLOR][/SUB][/SUB][/SUB]
[THSIZE=250]https://i.imgur.com/5zoKbgM.png[/THSIZE][/TD]
[TD][TABLE]
[TR]
[TD][URL='https://i.imgur.com/5zoKbgM.png']
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG][/URL][/TD]
[/TR]
[/TABLE][/TD]
[/TR]
[TR]
[TD][QUOTE][B][PLAIN][THSIZE=250]https://i.imgur.com/5zoKbgM.png[/THSIZE][/PLAIN][/B][/QUOTE][/TD]
[TD][quote][B][PLAIN][TABLE="width:260"][TR][TD]
[URL="https://i.imgur.com/5zoKbgM.png"]
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
[/URL][/TD][/TR][/TABLE][/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
On the left we see a standard thumbnail tag approach and on the right the table that produces the same result. The table code is already longer but still quite simple. The thumbnail tag creates an image with a width style and wraps it into a link to the full size image. For the table approach we simply create a new table with one row and one cell and set the "width" property of the table to our thumbnail size (table size overrides image size). We then insert the img tag with the picture inside the cell and wrap it into a link pointing to the itself just like the thumbnail tag does it.
You will have noticed that we needed to make the table about ten pixels wider than the thumbnail tag to get the image to approximately the same size. This is because table cells always have a bit of padding around them which we have to offset. This isn't a big problem since of course it's rarely necessary to work super pixel perfectly when it comes to image thumbnails.
And in case you were wondering about the unusual size of the quotes...
[TABLE]
[TR]
[TD][CENTER][B][SIZE=3]Table Fact You Probably Didn't Know About #1[/SIZE][/B][/CENTER][/TD][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][/TR]
[TR]
[TD]If an element that would normally take up the width of the entire post container, such as a Quote, Code or PHP block, is placed within a table with no defined width it will shrink to match its text content. If it is placed within a table that has a defined width, the same width will be applied to the contained block element as well.[/TD]
[/TR]
[/TABLE]
...This is not exactly critical to what we are doing (in fact it's mostly irrelevant) but it makes for a more varied layout.
Anyway, now that we know how to accurately emulate the thsize tag with tables let's start making the table do some things that the normal tags couldn't do!
[SIZE=5][SUP][/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][CENTER][B]Making image size screen dependent[/B][/CENTER]
[/SUP]
This is the [B]big[/B] important thing that tables enable us to do. Static thumbnails always have their victims so to speak, especially since we live in a time where there's a potentially very big range of possible resolutions that users might browse the forum with. I have a standard Full HD 1920x1080 monitor for example. To me an image with the resolution 600x600 is not exactly big, it's a completely acceptable medium sized square that I can even fit twice in a row in a single post if I want. But for someone browsing the forum on an old 1024x768 monitor (maybe a bit of an extreme example) the image will take up their entire screen width and probably look rather clunky. It's the same for mobile resolutions, especially when browsing in portrait mode. With normal thumbnail tags the user friendly thing to do is to scale things down t the lowest common denominator, have thumbnails really small, so that no resolution has problems. But in that case what about those of us that [I]have[/I] high resolution monitors? We have all that screen space available and the images are not using it even though they could be twice as big without being obnoxious! Isn't that unfair? I would suggest that it is... and also that we can use tables to make this problem go away!
This all depends on a single discovery I made about the
tag a few months ago:
[TABLE]
[TR]
[TD][CENTER][B][SIZE=3]Table Fact You Probably Didn't Know About #2[/SIZE][/B][/CENTER][/TD][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][/TR]
[TR]
[TD]The width of a BBcode table can be defined in pixels as well as in percents, making fluid layouts possible.[/TD]
[/TR]
[/TABLE]
This is pretty much a game changer, since instead of relying on making up a width in pixels and hoping that it's small or big enough for certain devices we can now simply say that we want our thumbnails to have for example one fifth of the width of our post, and this size will stay constant regardless of resolution. Let's demonstrate this by turning our Greymon into a tiny thumbnail:
[TABLE]
[TR]
[TD][URL='https://i.imgur.com/5zoKbgM.png']
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="width:20%"]
[TR][TD]
[URL="https://i.imgur.com/5zoKbgM.png"]
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
[/URL]
[/TD][/TR]
[/TABLE]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
...And that's all there is to basic relative thumbnails. This Greymon is scaled to 20% of the post's width, which on my full HD display is about 300px wide. On my secondary monitor (1280x1024) the image further scales down to about 200px and so on.
But while the existence of this feature is certainly the main message I want to send with this post, there are many more exciting possibilities that I will demonstrate in the remainder of the post. So let's continue on to...
[SIZE=5][SUP][/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][CENTER][B]Dynamic Padding[/B][/CENTER]
[/SUP]
I have actually used this table scaling method in my Linkz model thread for a while now. I usually like my images centered on the screen and relatively big (as stated before one of the main strengths of dynamic table thumbnails is that it makes including big images in posts more viable since on smaller devices the images also get smaller). At this point I noticed some aesthetic issues with some of the image layouts... and it turned out tables could fix those as well!
Again, let's demonstrate this with Greymon:
[TABLE]
[TR]
[TD][URL='https://i.imgur.com/5zoKbgM.png']
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="align:center, width:45%"]
[TR][TD]
[URL="https://i.imgur.com/5zoKbgM.png"]
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
[/URL]
[/TD][/TR]
[/TABLE]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
This is basically how I would present this model in my thread, 45% width and centered. However it is only mathematically centered; Visually the centering looks off since because of Greymon's tail there is a lot of empty space in the right part of the image. The naturally eye gets drawn toward the more "populated" right side of the image making it seem like it is not actually centered. In order to [I]visually[/I] center the image we need to nudge it to the right and most importantly we need to do so dynamically. There are "dirty" was to do it, like just including a bunch of white-space or transparent text before the image but that is not only inelegant but also static... since the image scales dynamically the padding needs to be dynamic as well or else the values won't match up. The solution lies in another undocumented table trick:
[TABLE]
[TR]
[TD][CENTER][B][SIZE=3]Table Fact You Probably Didn't Know About #3[/SIZE][/B][/CENTER][/TD][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][/TR]
[TR]
[TD]The "width" and "align" properties are not exclusive to the main table body but can also be manually defined for individual table cells (but not for rows).[/TD]
[/TR]
[/TABLE]
In other words, if we want 25% padding on the right side we can accomplish that by creating another table cell before the one containing our image and defining its width as 25%. The other table cell will automatically take up the rest of the space in the table:
[TABLE]
[TR]
[TD][/TD]
[TD]
[URL='https://i.imgur.com/5zoKbgM.png']
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="align:center, width:60%"]
[TR]
[TD="width:25%"][/TD]
[TD]
[URL="https://i.imgur.com/5zoKbgM.png"]
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
[/URL]
[/TD][/TR]
[/TABLE]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
There we are again, and this time Greymon looks much better because the center of his body is now at the center of the post. Note however that in order to keep the size of the image the same as before we had to increase the overall width of the table from 45% to 60% since of course the padding cell takes up space [I]inside[/I] the table which we need to offset.
Right now the second table cell is empty and thus invisible but in case you want a bit more precise visual feedback about how much padding is going on exactly there is another handy little table feature for that:
[TABLE]
[TR]
[TD][CENTER][B][SIZE=3]Table Fact You Probably Didn't Know About #4[/SIZE][/B][/CENTER][/TD][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][/TR]
[TR]
[TD]You can define a background color for individual table cells via the "bgcolor" property.
Example: [I][PLAIN][TD="bgcolor:red"]*content*[/TD][/PLAIN][/I]
Like the text color tag the property accepts both color names and hex codes.[/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][/TD]
[TD]
[URL='https://i.imgur.com/5zoKbgM.png']
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="align:center, width:60%"]
[TR]
[TD="width:25%, bgcolor:green"][/TD]
[TD]
[URL="https://i.imgur.com/5zoKbgM.png"]
[IMG]https://i.imgur.com/5zoKbgM.png[/IMG]
[/URL]
[/TD][/TR]
[/TABLE]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
[SIZE=5][SUP][/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][CENTER][B]Image size as upper boundary[/B][/CENTER]
[/SUP]
Another way in which our table thumbnails act differently than the normal thumb and thsize tags is that the size limit is applied as an [I]upper limit[/I] instead of an absolute size. Instead of simply being scaling images down, if you were to drop an image into a thsize tag that is [I]smaller[/I] than the size specified in the tag the image will end up being upscaled to that size. In isolated cases this might be useful in very unlikely situations but is very likely to result in a blurry mess instead. Tables thumbnails on the other hand will [B]never[/B] scale an image above its original size, effectively turning the thumbnail into an conditional operation:
[TABLE]
[TR]
[TD]
[URL='https://i.imgur.com/kC8O4sr.png'][IMG]https://i.imgur.com/kC8O4sr.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="width:50%, align:center"][TR]
[TD="align:center"]
[URL="https://i.imgur.com/kC8O4sr.png"][IMG]https://i.imgur.com/kC8O4sr.png[/IMG][/URL]
[/TD]
[/TR][/TABLE][/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
Here we have for example a table thumbnail scaling this image to 50% of the post. However the image is rather small, only 512px wide, which only exceeds 50% of the post width on very small resolutions. Only at those resolutions does any scaling actally take place; everywhere else the image will appear in its original size.
One important thing to note about this kind of conditional scaling is that if you use it in conjunction with a centered or right aligned table you need to define the "align:center/right" property on [I]both[/I] the main table body and the table cell containing the image as shown above. Otherwise the table cell will retain its default left alignment and when a centered table keeps growing while the image no longer scales, the image sticking to the left side of the table will cause it to become off-center.
It is of course also possible to center the image inside the cell with the normal
[CENTER]tags but since the "align" property is directly applied to the [I]td[/I] element and does not in result in the creation of new elements like the
tag, it is the more efficient option here.
[SIZE=5][SUP][/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][B]Consistent thumbnail galleries with even spacing[/B]
[/SUP]
The thing about Thumbnails is that they tend to come in batches. And with the normal forum layout it can be a challenge create a consistent layout for a "gallery" of thumbnail images. Let's say we have 10 images that we want to turn into thumbnails and have them in two centered rows of 5 images each. This is difficult to do normally because of course if the width of our images is fixed the rows will break on smaller resolutions. We can't simply put 5 images next to each other two times and separate them with a line break because we might end up with end up with 4 lines of four and one which would be unacceptable, while simply putting all images in a row also won't guarantee clean rows... so of course we put the images in a table:
[/CENTER]
[TABLE]
[TR]
[TD][URL='https://i.imgur.com/fUEiuOj.png'][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/DMGh6IE.png'][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/fUEiuOj.png'][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/DMGh6IE.png'][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/fUEiuOj.png'][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[/TR]
[TR]
[TD][URL='https://i.imgur.com/DMGh6IE.png'][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/fUEiuOj.png'][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/DMGh6IE.png'][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/fUEiuOj.png'][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/DMGh6IE.png'][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="align:center, width:90%"]
[TR]
[TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[/TR]
[TR]
[TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/fUEiuOj.png"][IMG]https://i.imgur.com/fUEiuOj.png[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/DMGh6IE.png"][IMG]https://i.imgur.com/DMGh6IE.png[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
We're scaling the width to 90% to have a bit of a margin on the sides and the table handles the rest. We'll have same rows in every resolution. But things get even more interesting if we put a bunch of smaller images into a dynamic table with cells bigger than the images:
[CENTER][/CENTER]
[TABLE]
[TR]
[TD][URL='https://i.imgur.com/nWtGrTa.gif'][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/Nbs1iJA.gif'][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/nWtGrTa.gif'][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/Nbs1iJA.gif'][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/nWtGrTa.gif'][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][CENTER]
[TABLE="align:center, width:70%"]
[TR]
[TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/Nbs1iJA.gif"][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/Nbs1iJA.gif"][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[/CENTER]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
As mentioned before the table will never scale an image above 100%. But it will still evenly distribute the table cells so it will switch over from scaling the images down to inserting spacing between the individual images (It's fun to play around with that by resizing the browser window...).
Again, if the main table is centered it's important that all the images are centered as well, which is why the entire table is wrapped in a
[CENTER]tag. Without it the images would stick to the right side of their table cells.
[SIZE=5][SUP][/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=1][SIZE=1][SIZE=1][B]Deactivating auto-spacing via nested tables[/B]
[/SUP]
...But wait! What if we don't like evenly spaced thumbnails? Maybe with some images having all that space between them on higher resolutions simply won't look good... so how do we get the dynamic scaling and consistent rows while getting rid of the automatic spacing? It's easy: By putting our image table inside [B]another[/B] table. When a table is created without a set width it will try to fit its content, scaling it down if there is not enough space. If we create a nested table inside another table the nested table will not inherit the width property of the main table and remain in it's default auto size. It will however shrink if the main table becomes to small.
[/CENTER]
[TABLE]
[TR]
[TD]
[TABLE]
[TR]
[TD][URL='https://i.imgur.com/nWtGrTa.gif'][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/Nbs1iJA.gif'][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/nWtGrTa.gif'][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/Nbs1iJA.gif'][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL='https://i.imgur.com/nWtGrTa.gif'][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[/TR]
[/TABLE][/TD]
[/TR]
[/TABLE]
[TABLE]
[TR]
[TD][quote][B][PLAIN][TABLE="width:71%,align:center"]
[TR][TD]
[TABLE="align:center"]
[TR]
[TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/Nbs1iJA.gif"][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/Nbs1iJA.gif"][IMG]https://i.imgur.com/Nbs1iJA.gif[/IMG][/URL][/TD]
[TD][URL="https://i.imgur.com/nWtGrTa.gif"][IMG]https://i.imgur.com/nWtGrTa.gif[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[/TD][/TR]
[/TABLE]
[/PLAIN][/B][/quote][/TD]
[/TR]
[/TABLE]
This our finished second version. Again, the table inside the table has a bit of padding as well so in order to offset that the table has to be 71% wide. When the images are scaled down it acts exactly like the previous table would. But after the images reach their full size the table won't insert any spacing between them. If we are centering the table like in the example, the centering needs to be done using the "align: center" property in both tables since the normal
[CENTER]tag does not work for the table body itself.
...And that's it for today! I hope that some of these techniques will help someone layout their posts in a prettier way although I'm not actually expecting anyone to care as much about this as I do. There's still lots of other crazy things you can do with tables (most of them are not particularly useful though) which I plan to document in this thread at some point in the future.[/CENTER]