The Coffee House
  • Community Intro
  • Staff Intro
  • Rules
  • Search
  • Members
  • Calendar
  • Awards
  • Old TCH
Login or Register Hello There, Guest! Please Login or Register to gain Full Access!
Login
Username/Email:
Password:
Lost Password?
 

  1. The Coffee House
  2. Announcements and Feedback
  3. Announcements and Board Information
  4. Reference BBCode Reference

Threaded Mode
Reference BBCode Reference
How do I post images, links, and videos?
Kyng
Thomas the Twonk Engine
Owner
Posts: 219,350
Threads: 17,384
Joined: May 2018
Reputation: 89
Original Join Date: 3rd December 2009
Real Name: Christopher

Coffee Credits: 402,952CC
#1
06-09-2019, 07:25 PM
(This post was last modified: 12-18-2022, 01:14 PM by Kyng.)
Throughout the forums, you'll see all kinds of formatted text in people's posts. Some text will be big, or small, or coloured; it might link to another page; it might come with images or videos; or you might even see people posting tweets or Pokémon on here! This post is intended as a complete guide on how to do all of that (I say 'intended', because I've included everything I can think of, but I suspect I've missed a couple of things :lol: ).

For your convenience, I've divided it into seven sections:

  1. Basic text formatting;
  2. More advanced text formatting;
  3. Quote, code, and spoiler boxes;
  4. Images and videos;
  5. Lists and tables;
  6. Twitter and Instagram;
  7. Miscellaneous


Since this guide is just intended as a reference, it's not exactly a page-turner - so, it's probably best to go to the section you need, rather than reading it all from start to finish. As such, I've spoilered each section, so you can open it up individually:


1. Basic Text Formatting (Bold, italics, underlining, etc.)
Unless you're completely new to forums, you can skip this section - except maybe the last little bit :P .

  • [b][/b] - Bold text
  • [i][/i] - Italic text
  • [u][/u] - Underlined text
  • [s][/s] - Strikethrough text
  • [font=Comic Sans MS][/font] - The world's worst font
  • [color=green][/color] - Green text (Use either a colour name or a Hexadecimal colour code)
  • [url=Link URL here]Link Text[/url] - Link Text

And, finally, one that even experienced forum users might not be familiar with:

  • [highlight][/!highlight] - Highlighted text

2. More advanced text formatting (alignments, sizes, superscripts, subscripts)

This section deals with alignments, sizes, superscripts and subscripts. These might be a bit different from on some other forums, so even if you're familiar with how a forum works, it's still worth reading through this section:
  • [size=large][/size] - Make text xx-small, x-small, small, medium, large, x-large, or xx-large.
  • [align=center][/align] - Align text to the left, center, or right of the screen.
  • [sup][/sup] - Superscript text
  • [sub][/sub] - Subscript text

There's also an alternative, more "markdown-y" way to do the superscripts and subscripts, as follows:

Code:
Pythagoras' Theorem: x^(2) + y^(2) = z^(2)
Johnny was a chemist, Johnny is no more, for what he thought was Hv(2)O, was Hv(2)SOv(4)!

Pythagoras' Theorem: x2 + y2 = z2
Johnny was a chemist, Johnny is no more, for what he thought was H2O, was H2SO4!

3. Quote, Code and Spoiler Boxes

You'll sometimes see people including 'quote' boxes in their posts (to quote a previous member), 'code' boxes (to post markup code), or 'spoiler' boxes (to hide something that they don't want people to see by mistake). All three have quite similar syntax:

  • [quote=Author]Quote Text[/quote]
  • [code]Code text[/code]
  • [spoiler=Spoiler Header]Spoiler text[/spoiler]

And here's how the quote and code will look on the board:

Author Wrote:Quote text

Code:
Code text

(You've already seen what the spoiler box looks like... you've just opened one in order to read this :lol: !)

If you want to share a small snippet of code, but don't want to have it in a box, there are a couple of ways to do this:

  • Use the [icode][/icode] tag to type Inline Code;

  • Add an '!' before the tag name; for example, typing '[!b]' will just print the '[b]' tag. This is effectively a replacement for the '[nocode]' tag that ZetaBoards users will remember (and I've used it extensively throughout this post :lol: ).

4. Images and Videos

Often, you'll see people including images and videos in their posts - so, how do you do that? Here's how!

  • [img]URL of image here[/img] - Post an image
  • [thumbnail]URL of image here[/thumbnail] - Post a link to an image, with a thumbnail
  • [video=youtube]URL of video here[/video] - Post a YouTube video. (For another site, like DailyMotion, just replace 'youtube' with that site :P )

Note that both the 'img' and 'thumbnail' tags allow you to specify a width and a height. You can do that by either of the following two methods:

  • [img=500x300]URL of image here[/img] - Post an image at a size of 500x300
  • [img=500,300]URL of image here[/img] - Another way to achieve the same thing

The other thing I should mention is linking back to where you found the image. While this isn't a rule, it's good to get into the habit of linking to the source of images that you post. This can be done by the following BBCode:

  • [source link="Link to source"]Name of source[/source]

Sometimes, if the image is released under a particular licence (for example, Creative Commons BY-SA 3.0), you'll also want to link to the licence. This can be achieved by the following BBCode:

  • [source link="Link to source" licence="Link to licence"]Name of source[/source]

So, let's put all of this together with an example. Here's a 300x225 version of one of my holiday snaps, with a source and licence link:

Code:
[img=300x225]https://live.staticflickr.com/2834/9453182365_a5b9856735.jpg[/img]
[source link="https://www.flickr.com/photos/[email protected]/9453182365/in" licence="https://creativecommons.org/licenses/by-sa/2.0/"]Kyng[/source]

This will come out as:

[Image: 9453182365_a5b9856735.jpg]
(Source: Kyng; View licence terms)
(By the way, there is one more way to post images: they can be embedded from Instagram. But, more on that further down :P !)

5. Lists and Tables

Throughout this post, I've been using bullet points to list groups of BBCode tags that go together. This is quite easy to do: you just use a [list] tag to start the list, and a [*] tag to mark each individual item. So, an example of a bullet-point list would look like this:

Code:
[list]
[*]First item
[*]Second item
[*]Third item
[/list]

You'll also see that I used a numbered list at the beginning of the post, when I listed the seven different sections. This is very simple - just add "=1" to the end of the [list] tag, as follows:

Code:
[list=1]
[*]First item
[*]Second item
[*]Third item
[/list]

However, lists are only one way to display data. Another method is to use tables - and, that can be done on here too. A full guide to tables can be found here - but, put simply, our tables work in the same way as HTML tables - so, you build them out of the following four tags:

  • [table][/table] - At the start and end of the table;
  • [tr][/tr] - At the start and end of each row;
  • [th][/th] - At the start and end of each 'Header' cell;
  • [td][/td] - At the start and end of each normal cell.

As with the [img] tag, you can modify a couple of these to do special things:

  • You can specify a width (but not a height) - so, typing "[table width=500]" will make your table 500 pixels wide;
  • If you want a cell to run across multiple columns, then you can use 'colspan' to do this. For example, "[td colspan=3]" will give you a table cell that runs across three columns.

Yes, I'm aware that this is a very clunky way to do tables :( . I'll implement something better when I've thought of a good way to do that. Until then, there's an online BBCode table generator which is compatible with our setup; this makes things considerably less painful :) !

6. Twitter and Instagram

Sometimes, you'll find people embedding tweets pics into their posts. This is done in exactly the same way as an image - except that, instead of using an [img] tag, you use a [twitter] tag, as follows:

Code:
[twitter]https://twitter.com/coffee_house_zb/status/1137692610607403009[/twitter]

If you enter that code into your post, then you'll get this tweet (which I created as an example, specifically to show this feature off :P ):




Instagram is the same again - but, this time, you use an [instagram] tag. I don't have an Instagram account - so, this time, my example will be this image of Lewis Hamilton with his dog:

Code:
[instagram]https://www.instagram.com/p/BrK5gIfFTDo/[/instagram]

Type that in - and, sure enough, we see Lewis and his faithful companion:



Just one section to go now :) !

7. Miscellaneous (Pokémon, flags, horizontal lines, FontAwesome icons)

We do have a small number of tags that don't fit into any of the above categories - so, I'll just complete this guide by listing those.

  • One feature we have is a "Pokédex" code, where you can post a picture of any Pokémon, just from its number :) . For example, Bulbasaur is Pokémon #001, so:

    Code:
    [pokedex]001[/pokedex] (or [pokedex]001.png[/pokedex])


    will give you a Bulbasaur:


  • Another is the [icon] tag, which will allow you to post Font Awesome icons. For example, posting the following:

    Code:
    [icon=heart]


    Will give you a heart shape:

  • Then there's the [flag] tag, which allows you to post a wide range of flags. For example, [flag=canada] will give you the flag of Canada:

    Yes, this may seem a little useless, because all the country flags are available as emoticons on the main board :P . However, the [flag] tag even works for the historical/regional flags and the sports flags that are listed in separate threads! For example, [flag=catalonia] will get you the flag of Catalonia:

  • Finally, you can draw a horizontal line by typing [hr] (no "[/hr]" needed: just the [hr] on its own is enough :) ). I'll often do this at the end of the main content of a topic, before adding my closing thoughts or remarks - so, it seems appropriate for me to end the guide with this:




So, that's the end of this guide to our BBCode. If you have any questions, or you can think of anything we've missed, then just let me know. Otherwise, have fun posting images and videos and links and whatever else you want to post :D !
[Image: Train_lover_userbar.png]

Board Information and Policies
Affiliation | Coffee Credits | Ranks and Awards | Name Changes
Account Deletion | BBCode Reference


Moonface (in 'Woman runs 49 red lights in ex's car')' Wrote: If only she had ran another 20 lights. :hehe:

(Thanks to Nilla for the avatar, and Detective Osprey for the sig!)
Quote
My Awards
x1 x1 x2 x2 x5 x3 x1 x3 x9
My Items
[-] The following 4 users Like Kyng's post:4 users Like Kyng's post
  • Detective Osprey, Kohta, Megan, Moonshroom
Website
Quote
Options

Detective Osprey
Детектив Оспри | Королева волков
Emeritus
Posts: 30,094
Threads: 1,129
Joined: Jun 2018
Reputation: 31
Original Join Date: January 3, 2319
Real Name: Heidi

Coffee Credits: 46,175CC
#2
06-09-2019, 07:47 PM
Ah, looks nice!
 [Image: ObsessedwithBirds.gif]
Jeg elsker norsk. 💙
Я люблю русский. ❤️
Ich liebe die deutsche Sprache. 💛
NO DMs, PLEASE. I'M NOT ACTIVE ENOUGH.
[Image: bubo2_2751.jpg]
Quote
My Awards
x1 x1 x1 x1 x1 x2 (2018, 2021) x1 x1
My Items
Silvady Dodekabashi Fiarow Pigeot Junaiper Odoridori Blu Bebe Venom Black Hole Fenrir Swift Iolite Stoney Agilberta Broigheall Lolani Cloudchaser ‘Iwalani
[-] The following 1 user Likes Detective Osprey's post:1 user Likes Detective Osprey's post
  • Kyng
Website
Quote
Options

Moonshroom
Tale of a Spunky User
Diamond Members
Posts: 11,283
Threads: 373
Joined: Nov 2018
Reputation: 87
Real Name: JJ

Coffee Credits: 83,625CC
#3
06-09-2019, 07:56 PM
This is awful... ly useful.

Awesome work CJ!
Coffee Coffee ~~Powered by C8H10N4O2~~ Coffee Coffee
 
What is a signature? A miserable little pile of secrets! But enough reading... scroll down already!
 
[Image: Luftsiggy.png]
Quote
My Awards
x1 x1 x1 x1 x1 (2019) x1 (2022) x1 (2019) x1 (2018) x1 x1
My Items
Moonlight Sweet Leaf Ducking JR Poison Jab Buzzer Shelly Shadow Fangs Winter Ivy Twin Terror Icecraft Clawy Spookz Triple Threat Beezy Icefolk Heavenfolk Waterfolk Firefolk
[-] The following 1 user Likes Moonshroom's post:1 user Likes Moonshroom's post
  • Kyng
Website
Quote
Options

Megan
Ferret Queen
Hosting Manager
Posts: 19,368
Threads: 50
Joined: May 2018
Reputation: 14
Original Join Date: February 11th 2016
Real Name: Megan

Coffee Credits: 128,637CC
#4
06-09-2019, 09:18 PM
This should be super helpful!
[Image: CaludinBanner6.jpg]
Quote
My Awards
x1 x1 (2018) x2 (2017, 2020) x1 (2016)
My Items
F-Chan

  •
Website
Quote
Options

Kyng
Thomas the Twonk Engine
Owner
Posts: 219,350
Threads: 17,384
Joined: May 2018
Reputation: 89
Original Join Date: 3rd December 2009
Real Name: Christopher

Coffee Credits: 402,952CC
#5
08-17-2019, 06:07 PM
I've updated this with a link to an online BBCode table generator, which works with the setup that we've got on here. This makes life much easier for anybody who wants to post tables on TCH.

I feel like I should include a link to this above, below, or to the side of the editor somewhere - although, I don't have any real preference as to where :P .
[Image: Train_lover_userbar.png]

Board Information and Policies
Affiliation | Coffee Credits | Ranks and Awards | Name Changes
Account Deletion | BBCode Reference


Moonface (in 'Woman runs 49 red lights in ex's car')' Wrote: If only she had ran another 20 lights. :hehe:

(Thanks to Nilla for the avatar, and Detective Osprey for the sig!)
Quote
My Awards
x1 x1 x2 x2 x5 x3 x1 x3 x9
My Items

  •
Website
Quote
Options

Kyng
Thomas the Twonk Engine
Owner
Posts: 219,350
Threads: 17,384
Joined: May 2018
Reputation: 89
Original Join Date: 3rd December 2009
Real Name: Christopher

Coffee Credits: 402,952CC
#6
03-06-2022, 10:47 AM
I've added the [icon] tag, for FontAwesome icons.

Also got rid of the GIFV and WebM tags, since those were never used; the GIFV can be done with [img] tags anyway; and the member who asked for these tags has been gone for three years anyway :P .
[Image: Train_lover_userbar.png]

Board Information and Policies
Affiliation | Coffee Credits | Ranks and Awards | Name Changes
Account Deletion | BBCode Reference


Moonface (in 'Woman runs 49 red lights in ex's car')' Wrote: If only she had ran another 20 lights. :hehe:

(Thanks to Nilla for the avatar, and Detective Osprey for the sig!)
Quote
My Awards
x1 x1 x2 x2 x5 x3 x1 x3 x9
My Items

  •
Website
Quote
Options

Kyng
Thomas the Twonk Engine
Owner
Posts: 219,350
Threads: 17,384
Joined: May 2018
Reputation: 89
Original Join Date: 3rd December 2009
Real Name: Christopher

Coffee Credits: 402,952CC
#7
07-13-2022, 12:31 PM
Added a link to the full Table Guide, which I completely forgot we had :lol: .
[Image: Train_lover_userbar.png]

Board Information and Policies
Affiliation | Coffee Credits | Ranks and Awards | Name Changes
Account Deletion | BBCode Reference


Moonface (in 'Woman runs 49 red lights in ex's car')' Wrote: If only she had ran another 20 lights. :hehe:

(Thanks to Nilla for the avatar, and Detective Osprey for the sig!)
Quote
My Awards
x1 x1 x2 x2 x5 x3 x1 x3 x9
My Items

  •
Website
Quote
Options

Kyng
Thomas the Twonk Engine
Owner
Posts: 219,350
Threads: 17,384
Joined: May 2018
Reputation: 89
Original Join Date: 3rd December 2009
Real Name: Christopher

Coffee Credits: 402,952CC
#8
12-18-2022, 11:35 AM
(This post was last modified: 12-18-2022, 11:36 AM by Kyng.)
Since this thread is so long, I've broken it down into spoilers :P .

I've also added the [flag] tag, which allows you to post any of my CaffEnsigns flag emoticons (including the historical/regional flags and the sports flags that are listed in separate threads). For example, [flag=bavaria] will get you the flag of Bavaria:



Have fun :) !
[Image: Train_lover_userbar.png]

Board Information and Policies
Affiliation | Coffee Credits | Ranks and Awards | Name Changes
Account Deletion | BBCode Reference


Moonface (in 'Woman runs 49 red lights in ex's car')' Wrote: If only she had ran another 20 lights. :hehe:

(Thanks to Nilla for the avatar, and Detective Osprey for the sig!)
Quote
My Awards
x1 x1 x2 x2 x5 x3 x1 x3 x9
My Items

  •
Website
Quote
Options

« Next Oldest | Next Newest »



  • View a Printable Version
Forum Jump:


Users browsing this thread: 1 Guest(s)

About Our Community

Discuss about various topics in our community and have fun while doing so. Welcome to The Coffee House

Quick Links



Reach Us

Contact Us  Meet Our team

Powered By MyBB. Crafted by EREE and Android BG. Based on Purple Origin by Detective Osprey. Character and item imagery copyright Nintendo. View our Privacy Policy.
Smilies provided for free by Mazeguy Smilies and JoyPixels
Linear Mode
Threaded Mode