BBCode

From BakaBT Wiki
Revision as of 22:20, 5 June 2020 by Theworm4002 (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

This page will contain a list of all BBCode you can use on BakaBT, in the comments and in the torrent description. Keep in mind that our forum software (SMF) has it's own set of BBCode, namely the default set + spoiler tags, if you want more info on that check the SMF website.

General BBCode

All the BBCode tags in this section can be used in the comments as well as in the description

Basic MarkUp

[b] for bold text
[i] for italic (slanted) text
[u] for underlined text
[s] for striked through text
[sup] for superscript text
[sub] for subscript text
[center] for center aligned text
[color=red]text here[/color] OR [color=#ff0000]A proper hex color value.[/color] for red text
[size=10pt]text here[/size] for bigger/smaller text

Links

First of all, all words that look like links will be replaced with a link. Words that look like links are words that begin with "http://". 

http://bakabt.me results in http://bakabt.me
[url]http://bakabt.me[/url] results in http://bakabt.me
[url=http://bakabt.me]BakaBT[/url] results in BakaBT

Images

[img]http://bakabt.me/images/search.gif[/img] will result in the image search.gif being displayed.

[img width=980 height=500]http://bakabt.me/images/search.gif[/img] will result in the image search.gif being displayed 
resized to 980x500 px

Keep in mind You must host your own images. Do not hotlink images. Take a look at some of the approved uploads to get an idea of what is needed before a torrent can be approved.

  • Note: Screenshots should be taken in PNG format, at the correct resolution. If the video is anamorphic, make sure screenshots are taken at display aspect ratio and resolution.
  • Note 2: At least 1 shot has to show the subtitles with the style defined in the release. Click here for more detailed info.

It is recommended that you use our image hosting server BakaSHOTS as it is the most compatible with our site. Furthermore, we won't have dead screenshots when images are pruned on other hosting sites. To use BakaSHOTS just sign in using your BakaBT account.

If for some reason that doesn't suit you, PhotoBucket is an acceptable alternative.

  • Note: While PhotoBucket does offer free accounts, you must use an account with a purchased subscription. The free accounts will generate a watermark over top all linked images.

Image Hosts You Shouldn't Use

  • ImageShack - Resizes and degrades image quality after an unknown amount of time. Still useful for comments and temporarily uploading images before transferring them to BakaSHOTS.
  • Imgur - According to their "Terms of Service" hotlinking to torrent sites is prohibited.

Code

[code]Code here[/code]

Will keep the formatting of the source text, it will not add colors, font-resizing, or other formatting. You can use this to paste description source code or other text that you do not want to be parsed or formatted.

Lists

[list]
 [li]first item[/li]
 [li]second item[/li]..
[/list]

Will make a list like:

  • first item
  • second item

You can nest lists

Tables

[table]
 [tr]
  [td]first cell[/td]
  [td]second cell[/td]
 [/tr]
 [tr]
  [td]third cell[/td]
  [td]last cell[/td]
 [/tr]
[/table]

Will produce a table like:

first cell second cell
third cell last cell

Quotes

[quote]quoted text[/quote] to make a nameless quote with the words "quoted text" inside the quote box.
[quote=name]quoted text[/quote] to make a quote by 'name' with the words "quoted text" inside the quote box.
[quote author=name]quoted text[/quote] to make a quote by 'name' with the words "quoted text" inside the quote box.
[quote author=name link=link date=date]quoted text[/quote] for SMF-style quotes.
  • Pressing the [Quote] button of a comment will automatically load that comment into your add-a-comment page.
  • You can nest quotes.
  • BBCode formatting applies inside quotes as well.

NoParse

[noparse]don't parse this text[/noparse]

Will not apply BBCode parsing to the text, it will still replace http:// links. This is only useful on the tracker comments - it will not work in the forum.

Showhide AKA spoiler botton

[spoiler]Text that requires a mouse click to reveal [/spoiler]	
[spoiler=Custom title]Text that requires a mouse click to reveal with a custom title[/spoiler]

Description-only tags

Block constructions

All websites are built by stacking 'blocks' (starting at the top left corner). To make it easier for you to make descriptions I've added block constructors so that you can more easily align text and images without needing tables.

  • [left=300]text goes here[/left]
makes a block 300 pixels wide that 'floats' to the left. If you add another left-floating block it will appear next to it. If there is no more space on the page to put the block beside other left-floating blocks it will 'wrap' to the next line.
  • [right=300]text goes here[/right]
makes a block that 'floats' to the right. Similar to the [left] tag.
  • [clear]
ends the current line, and forces all floating blocks to start on a new line.
  • [center]
makes a block that floats in the center. You can not have two or more blocks floating in the center on the same line. Use the clear-tag to start a new line.

Screenshots

Adding these tags will not do anything to your description, instead it will add screenshots just below your description using a lightbox viewer for easy viewing. If using HTML code, screenshot tags may be placed inside or outside the <html></html> tags, there is no difference in parsing either way.

  • [screenshot]screenshot code goes here[/screenshot]
Inserts screenshot thumbnails below the description. Thumbnails are resized to 150 pixels in width by default.
  • [screenshot=200]screenshot code goes here[/screenshot]
Inserts screenshot thumbnails 200 pixels wide below the description. Change 200 to the pixel width of your screenshot thumbnails as necessary.

You can add more than one block of screenshots, possibly with different size thumbnails.

NOTE: Screenshots will not show up in the Sandbox, you have to go to the torrent description page in order to view them.


  • [img]link to image[/img]
Will add one image. You can add as many as you like.
  • [url=link to image][img]link to thumbnail[/img][/url]
Allows you to explicitly define your own thumbnail images. If no thumbnail image is supplied it will use the linked image and resize it to whatever width is supplied for the thumbnail.

If thumbnail images are not used, the big images are loaded first, then resized to thumbnail-size on your screen. This makes image-loading really slow, and also make scrolling laggy, so as far as possible supply thumbnail images or use an image-host the auto-generates them (see below)!


The following image-hosts auto-generate thumbnails for uploaded images. If images hosted on these image-hosts are used, we can auto-detect the thumbnail links and insert them. This means that you can use Example code 1, and the thumbnail images will be automagically added.

  • PhotoBucket
    • Note: While PhotoBucket does offer free accounts, you must use an account with a purchased subscription. The free accounts will generate a watermark over top all linked images.
  • ImageShack
    • Note: ImageShack Resizes and degrades image quality after an unknown amount of time. It is still useful for comments and temporarily uploading images before transferring them to BakaSHOTS.

Example code 1 (thumbnails resized from screenshots)

[screenshot]
 [img]link to image1[/img]
 [img]link to image2[/img]
[/screenshot]

Use this code if your screenshots are hosted on an image-host that we can auto-detect thumbnail images for (mentioned above).

Example code 2 (thumbnails supplied by user)

[screenshot]
 [url=image link1][img]thumbnail link1[/img][/url]
 [url=image link2][img]thumbnail link2[/img][/url]
[/screenshot]

Use this code if you are not using any of the above-mentioned image-hosts and/or wish to supply your own thumbnail.

Everything aside from [img] and [url] tags in the screenshot tags will not be shown.

BakaSHOTS

Following the introduction of BakaSHOTS, our own image host, we implemented a new code to allow embedding of images uploaded. Using BakaSHOTS is easy, and linking to images on BakaSHOTS couldn't be any easier. 

[bbtimg=######]
where ###### is the id of the image that was uploaded

This code is currently incompatible with the forums and blog; it will only work when used on the site.

What happens when this code is used is also quite simple: the tag is replaced with an actual link to the image. All links to images on BakaSHOTS have a timer; they will eventually expire. To ensure that the link gets 'refreshed' whenever it expires, it is necessary to use this tag where you need the image to remain accessible, such as in descriptions. The tag essentially functions as a link, and so it should be treated as a link when used in descriptions. For example, it is not uncommon for people to use a background image in a description (done via CSS). This would be achieved like this: 

background-image: url('[bbtimg=######]');

This code can also be used in conjunction with other tags such as the IMG tag. This is how images hosted on BakaSHOTS should be used in descriptions, especially for screenshots. 

[screenshot]
 [img][bbtimg=####1][/img]
 [img][bbtimg=####2][/img]
 [img][bbtimg=####3][/img]
 [img][bbtimg=####4][/img]
[/screenshot]

More about torrent descriptions

Modes

There are two modes:

  • Comment-style mode
    • Line breaks (i.e. pressing Enter) appear as new lines
    • you can use all BBCode tags, including the block constructors
  • HTML mode
    • New lines will not appear as new lines. Use <br /> to create a line break instead.
    • The text will be treated as HTML code.

By default, descriptions are treated in comment-style mode. To enable HTML-mode you have to include <html> and </html> tags around your description.

Comment-style mode

For all uses of BBCode in comment-style mode see the BBCode section above.

HTML Mode

In HTML mode you can do anything you want, stylesheets, JavaScript, anything. We trust users will not abuse this feature as we realize it is a potential security hazard. Abuse of HTML mode will not be tolerated. We apply a one-strike-no-warning-kiss-your-ass-goodbye policy.

Technical stuff

Additional description information

As you may have realized all descriptions get some 'added' stuff, both comment-style and HTML-style modes. The parser will add a few things to your description that you will get for free :)

  • First of all it will add a proper HTML-header if it's not present, as well as <head></head> and <body></body> tags.
  • It will add a very basic stylesheet containing some default text-formatting settings. You are free to override this stylesheet as it will be inserted before your stylesheet.
  • Finally it will add the jQuery Javascript-library and postifx a script to resize the description. I can implore anyone who uses Javascript on a regular basis to look at jQuery because it really makes your life easy.

Recalculating the size of the iframe

If you have a description that may change it's height as users view it (expanding lists for instance) you can call the 

bxt_resize_iframe()

function to recalculate the size of the iframe. Make sure you call it after the new size of the description is set else it will not resize propperly.

Javascript:window.onload

I can only implore you so much to not use an onload event as there is little reason to use it. The added JavaScript-code uses the window.onload event to resize the iframe to it calculated height after all images have been loaded (this is why it needs window.onload), images may affect the height of a description.

If you do supply a window.onload event make sure you put it in your head so the resize-script can call your onload event after it's done resizing.

If you put the window.onload event in the body it will most likely overwrite the call to the resize function and you may end with a description frame that is too small or too big.

Common mistakes

  • Often people forget to include the HTML-tag for HTML description. A typical symptom is a large amount of empty lines at places you didn't expect it (since HTML doesn't parse line-breaks, but BBCode does).
  • Using code like:
<a href="http://bakabt.me"><span style="color: red;">BakaBT</span></a>
Will not make your link totally red. The catch is that the text will become red, but the underline will not. To set the colour of a link propperly either apply the style to the link itself or supply the correct colour in a stylesheet.
Retrieved from "https://wiki.bakabt.me/index.php?title=BBCode&oldid=6339"