Page 1 of 10

BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Tue May 10, 2011 9:06 pm
by Matyuv
BBCode is an implementation of HTML that is used to format posts in ways listed below.


Text Formatting
  • To make a piece of text bold enclose it in [b.][/b] tags, e.g.

    Code: Select all

    [b]Bold text[/b]
    becomes Bold text
  • For underlining use [u.][/u], e.g.

    Code: Select all

    [u]Underlined text[/u]
    becomes Underlined text
  • To italicise text use [i.][/i], e.g.

    Code: Select all

    [i]Italic text[/i]
    becomes Italic text
  • To create strikethrough text use [strike.][/s], e.g.

    Code: Select all

    [s]Strikethrough text[/s]
    becomes Strikethrough text
  • Changing the colour of text is achieved by wrapping it in [color=][/color]. You can specify either a recognised colour name (eg. red, blue, yellow, etc.) or the hexadecimal triplet alternative, e.g. #FFFFFF, #000000. For example, to create red text you could use:

    Code: Select all

    [color=red]Red text[/color]
    or

    Code: Select all

    [color=#FF0000]Red text[/color]
    Both will output Red text
  • Changing the text size is achieved in a similar way using [size=][/size]. You can specify a numerical value representing the text size in percent, starting at 1 through 200. For example:

    Code: Select all

    [size=50]Small text[/size]
    outputs Small text, and

    Code: Select all

    [size=200]Huge text[/size]
    becomes Huge text
  • To create superscript and subscript text use [sup.][/sup] and [sub.][/sub] tags respectively. For example:

    Code: Select all

    2[sup]8[/sup], H[sub]2[/sub]O
    outputs 28, H2O
  • You can combine different format tags, e.g.

    Code: Select all

    [size=125][color=yellow][i]Big yellow italic text[/i][/color][/size]
    becomes Big yellow italic text

Quoting text
There are two ways you can quote text, with a reference or without.
  • To quote text with a reference to a person use [quote.=""][./quote] tags, e.g.

    Code: Select all

    [quote="Darth Vader"]No, I am your father.[/quote]
    outputs
    Darth Vader wrote:No, I am your father.
  • To quote text without reference, simply enclose it in [quote.][/quote] tags.

Adding code
If you want to output a piece of code or in fact anything that requires a fixed width, e.g. Courier type font you should enclose the text in [code.][/code] tags, for example:

Code: Select all

[code][b]BBCode     doesn't work   here[/b]
[/code]outputs

Code: Select all

[b]BBCode     doesn't work   here[/b]

Generating lists
BBCode supports two types of lists, unordered and ordered. An unordered list outputs each item in your list sequentially one after the other indenting each with a bullet character. To create an unordered list you use [list.][/list.] and define each item within the list using [*.]. For example:

Code: Select all

[list][*]Item 1[*]Item 2[*]Item 3[/list]
outputs
  • Item 1
  • Item 2
  • Item 3
The second type of list, an ordered list, gives you control over what is output before each item. To create an ordered list you use [list.=1][/list] to create a numbered list or alternatively [list.=a][/list] for an alphabetical list. As with the unordered list, items are specified using [*]. For example:

Code: Select all

Numbered list: [list=1][*]Item 1[*]Item 2[/list] Alphabetical list: [list=a][*]Item 1[*]Item 2[/list]
outputs
Numbered list:
  1. Item 1
  2. Item 2
Alphabetical list:
  1. Item 1
  2. Item 2

Adding images
To display an image you must surround the URL pointing to the image with [img.][/img] tags. For example:

Code: Select all

[img]https://raymanpc.com/wiki/images/thumb/f/f3/Rayman_Origins-_blog_logo.png/300px-Rayman_Origins-_blog_logo.png[/img]
outputs
Image


Adding links
phpBB features something called Magic Links, this will turn any syntactically correct URL into a link without you needing to specify any tags or even the leading http://. For example typing

Code: Select all

www.raymanpc.com
into your message will automatically lead to https://raymanpc.com being output when you view the message.

To make any text act as a link enclose it in [url.=][/url] tags. You must put the destination URL after the '=' sign, for example:

Code: Select all

[url=https://raymanpc.com]Pirate-Community[/url]
outputs Pirate-Community

As with all the BBCode tags you can wrap URLs around any of the other tags such as [img.][/img], [b.][/b], etc. For example:

Code: Select all

[url=https://raymanpc.com][img]https://static.raymanpc.com/forum/styles/raymanpc/imageset/forum_unread_subforum.png[/img][/url]
outputs
Image

You must ensure the correct open and close order is following. For example, this:

Code: Select all

[url=https://raymanpc.com][img]https://static.raymanpc.com/forum/styles/raymanpc/imageset/forum_unread_subforum.png[/url][/img]
is wrong.


Embedding YouTube videos

To embed a YouTube video to your post use the [youtube][/youtube] tags. You must put the video identifier between the tags. The identifier consists of several random characters that can be found in the video URL usually after the '=' sign, e.g. for this video http://www.youtube.com/watch?v=MvhwWXF-LfU the identifier is MvhwWXF-LfU, so to embed it you must write the following:

Code: Select all

[youtube]MvhwWXF-LfU[/youtube]


---------------------------------------------------
For the most part this was copied from the official BBCode guide.

If you have any questions about BBCode, feel free to leave them here.
P.S. We need a spoiler tag.

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Tue May 10, 2011 9:09 pm
by DesLife
Great, now let's hope people will read this, which I doubt. :mrgreen:

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Tue May 10, 2011 9:40 pm
by MLII
Mat you are an awesome genius.

I actually didn't know the sub thing existed >>

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Tue May 10, 2011 9:43 pm
by DesLife
Actually no one knows about sub and sup, for some reason.

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Wed May 11, 2011 9:20 am
by Holy Crap
Probably because they don't have a button which does it for you at the top of the posting box.

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Thu May 12, 2011 5:53 am
by Jman
Oh seƱor Mat, your wiseness knows no bounds!

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Thu Jun 30, 2011 10:48 am
by Raylex
Great job dude!
I was wondering if you can embed SoundCloud Waveform? That could be interesting.

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Sat Jul 16, 2011 2:13 pm
by Rayman fan2000

Did I do it right?

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Fri Jul 29, 2011 11:00 pm
by Hunchman801
Sure... but the video is damn weird.

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Fri Jul 29, 2011 11:06 pm
by Xenon
It's a shame this sticky didn't get more posts... its importance was quite understated.

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Fri Jul 29, 2011 11:08 pm
by Matyuv
Yeah, I'm so disappointed.

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Fri Jul 29, 2011 11:09 pm
by Xenon
Don't worry, my sticky didn't get that many more.

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Fri Jul 29, 2011 11:13 pm
by Matyuv
What are we doing wrong?

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Sat Jul 30, 2011 12:51 am
by Hunchman801
I'm sure many people read it anyway!

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Sat Jul 30, 2011 1:16 am
by Matyuv
That's quite optimistic.

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Sat Jul 30, 2011 1:19 am
by Hunchman801
At least it's a great topic... even if no one reads it!

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Sat Jul 30, 2011 1:31 am
by Matyuv
Word to Word gets many more views. :(

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Sat Jul 30, 2011 1:56 am
by Hunchman801
Yeah, I guess it is a much more interesting topic. :paranormal:

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Sat Jul 30, 2011 1:58 am
by Matyuv
Yeah, it's thrilling to see what kind of word associations other users come up with!

Re: BBCode Guide: How to embed YouTube videos, post images etc.

Posted: Sat Jul 30, 2011 2:45 am
by El Dango
Such as zombie goat -> zombie chicken :lol: