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

For all things related to Pirate-Community and its websites.

Moderator: English moderators

Forum rules
Please keep the forum rules and guidelines in mind when creating or replying to a topic.
Post Reply
Matyuv
Gangsta Globox
Posts: 21363
Joined: Thu Apr 29, 2004 10:22 am
Tings: 54431

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

Post 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.][/strike], e.g.

    Code: Select all

    [strike]Strikethrough text[/strike]
    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]http://www.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 http://www.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=http://www.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=http://www.raymanpc.com][img]http://www.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=http://www.raymanpc.com][img]http://www.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.
MandM81 wrote:YYYYYYYRRRHLHLPYYYYYYPDPPPYYYYYYYYYYYYRRRRRR
DesLife
Froutch
Posts: 19946
Joined: Sat Jun 12, 2004 12:42 pm
Tings: 186263

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

Post by DesLife »

Great, now let's hope people will read this, which I doubt. :mrgreen:
Image
MLII
Carmen
Posts: 8064
Joined: Sat Jan 03, 2009 10:48 pm
Location: therapist to the royal bees
Tings: 43075

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

Post by MLII »

Mat you are an awesome genius.

I actually didn't know the sub thing existed >>
Image
Image
DesLife
Froutch
Posts: 19946
Joined: Sat Jun 12, 2004 12:42 pm
Tings: 186263

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

Post by DesLife »

Actually no one knows about sub and sup, for some reason.
Image
Holy Crap
Vendeur
Posts: 15930
Joined: Tue Feb 05, 2008 7:54 am
Location: I AM OMNIPRESENT! (Just like God, only better, because I exist)
Contact:
Tings: 80202

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

Post by Holy Crap »

Probably because they don't have a button which does it for you at the top of the posting box.
Jman
Bzzit
Posts: 9113
Joined: Sat May 06, 2006 5:32 pm
Location: deezzz nuuutttss
Contact:
Tings: 57987

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

Post by Jman »

Oh señor Mat, your wiseness knows no bounds!
ImageImage
6/100 - Not Boon :partyhat:
Raylex
Eig
Posts: 16811
Joined: Wed Jul 27, 2005 12:22 pm
Tings: 43081

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

Post by Raylex »

Great job dude!
I was wondering if you can embed SoundCloud Waveform? That could be interesting.
Rayman fan2000
Barbara
Posts: 1502
Joined: Sun Dec 12, 2010 5:55 pm
Location: UK
Tings: 10530

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

Post by Rayman fan2000 »


Did I do it right?
Hunchman801
Bad Rayman
Posts: 83848
Joined: Thu Aug 07, 2003 6:50 pm
Location: Paris, France
Contact:
Tings: 610019

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

Post by Hunchman801 »

Sure... but the video is damn weird.
Image
Xenon
Pirate Lunette
Posts: 38007
Joined: Sat Dec 04, 2004 10:21 pm
Tings: 98896

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

Post by Xenon »

It's a shame this sticky didn't get more posts... its importance was quite understated.
Image
Matyuv
Gangsta Globox
Posts: 21363
Joined: Thu Apr 29, 2004 10:22 am
Tings: 54431

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

Post by Matyuv »

Yeah, I'm so disappointed.
MandM81 wrote:YYYYYYYRRRHLHLPYYYYYYPDPPPYYYYYYYYYYYYRRRRRR
Xenon
Pirate Lunette
Posts: 38007
Joined: Sat Dec 04, 2004 10:21 pm
Tings: 98896

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

Post by Xenon »

Don't worry, my sticky didn't get that many more.
Image
Matyuv
Gangsta Globox
Posts: 21363
Joined: Thu Apr 29, 2004 10:22 am
Tings: 54431

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

Post by Matyuv »

What are we doing wrong?
MandM81 wrote:YYYYYYYRRRHLHLPYYYYYYPDPPPYYYYYYYYYYYYRRRRRR
Hunchman801
Bad Rayman
Posts: 83848
Joined: Thu Aug 07, 2003 6:50 pm
Location: Paris, France
Contact:
Tings: 610019

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

Post by Hunchman801 »

I'm sure many people read it anyway!
Image
Matyuv
Gangsta Globox
Posts: 21363
Joined: Thu Apr 29, 2004 10:22 am
Tings: 54431

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

Post by Matyuv »

That's quite optimistic.
MandM81 wrote:YYYYYYYRRRHLHLPYYYYYYPDPPPYYYYYYYYYYYYRRRRRR
Hunchman801
Bad Rayman
Posts: 83848
Joined: Thu Aug 07, 2003 6:50 pm
Location: Paris, France
Contact:
Tings: 610019

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

Post by Hunchman801 »

At least it's a great topic... even if no one reads it!
Image
Matyuv
Gangsta Globox
Posts: 21363
Joined: Thu Apr 29, 2004 10:22 am
Tings: 54431

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

Post by Matyuv »

Word to Word gets many more views. :(
MandM81 wrote:YYYYYYYRRRHLHLPYYYYYYPDPPPYYYYYYYYYYYYRRRRRR
Hunchman801
Bad Rayman
Posts: 83848
Joined: Thu Aug 07, 2003 6:50 pm
Location: Paris, France
Contact:
Tings: 610019

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

Post by Hunchman801 »

Yeah, I guess it is a much more interesting topic. :paranormal:
Image
Matyuv
Gangsta Globox
Posts: 21363
Joined: Thu Apr 29, 2004 10:22 am
Tings: 54431

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

Post by Matyuv »

Yeah, it's thrilling to see what kind of word associations other users come up with!
MandM81 wrote:YYYYYYYRRRHLHLPYYYYYYPDPPPYYYYYYYYYYYYRRRRRR
El Dango
Aline Louïa
Posts: 12896
Joined: Thu Feb 28, 2008 8:01 pm
Location: Where you need me the most
Contact:
Tings: 105675

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

Post by El Dango »

Such as zombie goat -> zombie chicken :lol:
Do NOT forget to vote and participate in the SOTM and Manipulate the Image competitions!
(If you don't wanna, however, that's perfectly okay (I'm hardly a role model))
Post Reply