[Scourge of Ages]

Sandwich and others work really hard to get us neat features for the forum, but it's hard to remember how to use them. Specifically, things like the youtube embedding tag and the interesting stuff you can do with it like different sizes and specific start times. Every time I want to do something like that, I need to dredge up the thread where Sandwich announced that we could now do that stuff: http://www.hard-light.net/forums/index.php?topic=84919.msg1705973#msg1705973

Anyway. Could we have a sticky topic somewhere with just a list of all the bbcode features that work on the forum? Specifically the ones that aren't readily apparent, like the above mentioned youtube stuff. Thanks in advance!

[Goober5000]

But... part of the fun of using bbcode is learning about all the secret undocumented features.

In all seriousness, there are a lot of bbcode options.  It would take a lot of work to document them all, and some of them I would have to look up myself.

Here is (as far as I can find) a full list of the bbcode tags available on HLP...

abbr
acronym
anchor
b
bdo
black
blue
br
center
code
color
colour
email
flash
font
ftp
glow
green
html
hr
i
img
iurl
left
list
ltr
me
move
nobbc
php
pre
quote
red
right
rtl
s
shadow
size
sub
sup
spoiler-media
table
td
time
tr
tt
u
url
white
maeg
bw
mobius
z
p3d
yt
vimeo
codepen
lvlshot
spoiler
hidden
collapse
fs2_open.log
lfs2_open.log
fred2_open.log
lfred2_open.log
fsolog
lfsolog
fredlog
lfredlog
li
*
@
+
x
#
o
O
0
chrissy
kissy

[AdmiralRalwood]

...Holy ****. I had no idea we even had half of those. [collapse], in particular, looks like a superior version of [hidden] (or would be if it started out collapsed), and [spoiler-media] appears to be [spoiler] with mouseover-reveal and the ability to hide images.

I can't even guess at how to use them all, let alone what some of them are even for. I don't suppose we could get some usage parameters, if not full documentation for these things? ;P

[Phantom Hoover]

what the **** are all these :-*

[Goober5000]

...Holy ****. I had no idea we even had half of those. [collapse], in particular, looks like a superior version of [hidden] (or would be if it started out collapsed), and [spoiler-media] appears to be [spoiler] with mouseover-reveal and the ability to hide images.

I actually wasn't even aware of [spoiler-media] until I went through the list.  As for [collapse], it was something Sandwich was experimenting with back when I added [hidden], but he hasn't said anything about it since November.  I'll bump that thread.

I can't even guess at how to use them all, let alone what some of them are even for. I don't suppose we could get some usage parameters, if not full documentation for these things? ;P

I guess it can't hurt to post the PHP code, which is the best documentation anyway.  Most of the tags can be found on github in the SMF 2.1 codebase.  The HLP-specific ones are from [maeg] to [lfredlog], inclusive.  Here they are:

Code: [Select]

array(
'tag' => 'maeg',
'before' => '<span style="color: #66ff00;">',
'after' => '</span>',
),
array(
'tag' => 'bw',
'before' => '<span style="color: burlywood;">',
'after' => '</span>',
),
array(
'tag' => 'mobius',
'before' => '<span style="color: lightblue;">',
'after' => '</span>',
),
array(
'tag' => 'z',
'before' => '<span style="color: #808080;">',
'after' => '</span>',
),
array(
'tag' => 'p3d',
'before' => '<div class="mediaWidthLimit"><div class="mediaWrapper"><iframe src="http://p3d.in/e/',
'after' => '" width="100%" height="480px" frameborder="0" seamless allowfullscreen webkitallowfullscreen></iframe></div></div>',
'block_level' => true,
),
array(
'tag' => 'yt',
'type' => 'unparsed_content',
'parameters' => array(
'time' => array('optional' => true, 'value' => '?start=$1', 'match' => '(\d+)'),
'size' => array('optional' => true, 'value' => ' media-$1', 'match' => '(small|medium|large|max)')
),
'content' => '
<div class="mediaWidthLimit{size}">
<div class="mediaWrapper">
<iframe id="$1" width="560" height="315" src="//www.youtube-nocookie.com/embed/$1{time}" frameborder="0" allowfullscreen></iframe>
</div>
</div>',
'block_level' => true,
),
array(
'tag' => 'yt',
'type' => 'unparsed_content',
'content' => '
<div class="mediaWidthLimit">
<div class="mediaWrapper">
<iframe id="$1" width="560" height="315" src="//www.youtube-nocookie.com/embed/$1" frameborder="0" allowfullscreen></iframe>
</div>
</div>',
'block_level' => true,
),
array(
'tag' => 'vimeo',
'before' => '<div class="mediaWidthLimit"><div class="mediaWrapper"><iframe src="http://player.vimeo.com/video/',
'after' => '?byline=0&amp;color=c06002" width="583" height="328" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div></div>',
'block_level' => true,
),
array(
'tag' => 'codepen',
'type' => 'unparsed_content',
'parameters' => array(
'user' => array('value' => '$1')
),
'content' => '
<div class="mediaWidthLimit">
<div class="mediaWrapper">
<iframe width="560" height="315" src="//codepen.io/{user}/embed/$1" frameborder="0" allowfullscreen></iframe>
</div>
</div>',
'block_level' => true,
),
array(
'tag' => 'lvlshot',
'type' => 'unparsed_content',
'parameters' => array(
'alt' => array('optional' => true),
'title' => array('optional' => true),
),
'content' => '<a href="$1" target="_blank"><img src="$1" alt="{alt}" title="{title}" class="bbc_img lvlshot" border="0" /></a>',
'validate' => create_function('&$tag, &$data, $disabled', '
$data = strtr($data, array(\'<br />\' => \'\'));
if (strpos($data, \'http://\') !== 0 && strpos($data, \'https://\') !== 0)
$data = \'http://\' . $data;
'),
'disabled_content' => '($1)',
),
array(
'tag' => 'lvlshot',
'type' => 'unparsed_content',
'content' => '<a href="$1" target="_blank"><img src="$1" alt="" title="Image may be resized. Click to view actual size in a new tab/window" class="bbc_img lvlshot" border="0" /></a>',
'validate' => create_function('&$tag, &$data, $disabled', '
$data = strtr($data, array(\'<br />\' => \'\'));
if (strpos($data, \'http://\') !== 0 && strpos($data, \'https://\') !== 0)
$data = \'http://\' . $data;
'),
'disabled_content' => '($1)',
),
array(
'tag' => 'spoiler',
'before' => '<div class="spoilerheader" title="Highlight to read">Spoiler:</div><div class="spoiler" title="Highlight to read">',
'after' => '</div>',
'block_level' => true,
),
array(
'tag' => 'hidden',
'parameters' => array(
'text' => array('match' => '([^<>]{1,192}?)'),
),
'before' => '<div style="padding: 3px; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #5873B0; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onClick="if (this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display != \'\') {  this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'\'; this.innerHTML = \'<b>{text}: </b><a href=\\\'#\\\' onClick=\\\'return false;\\\'>' . $txt["hidden_hide"] . '</a>\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerHTML = \'<b>{text}: </b><a href=\\\'#\\\' onClick=\\\'return false;\\\'>' . $txt["hidden_show"] . '</a>\'; }"><b>{text}: </b><a href="#" onClick="return false;">' . $txt["hidden_show"] . '</a></span></div><div class="quotecontent"><div style="display: none;">',
'after' => '</div></div></div>',
'block_level' => true,
),
array(
'tag' => 'hidden',
'before' => '<div style="padding: 3px; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #5873B0; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onClick="if (this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display != \'\') { var ifrm = document.getElementById(\'dQw4w9WgXcQ\'); if (ifrm != null && ifrm.parentNode.parentNode.parentNode.parentNode.parentNode == this.parentNode.parentNode) { ifrm.src = ifrm.src + \'?autoplay=1\'; } this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'\'; this.innerHTML = \'<b>' . $txt['hidden_text'] . ': </b><a href=\\\'#\\\' onClick=\\\'return false;\\\'>' . $txt["hidden_hide"] . '</a>\'; } else { var ifrm = document.getElementById(\'dQw4w9WgXcQ\'); if (ifrm != null && ifrm.parentNode.parentNode.parentNode.parentNode.parentNode == this.parentNode.parentNode) { ifrm.src = ifrm.src.slice(0,-11); } this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerHTML = \'<b>' . $txt['hidden_text'] . ': </b><a href=\\\'#\\\' onClick=\\\'return false;\\\'>' . $txt["hidden_show"] . '</a>\'; }"><b>' . $txt['hidden_text'] . ': </b><a href="#" onClick="return false;">' . $txt["hidden_show"] . '</a></span></div><div class="quotecontent"><div style="display: none;">',
'after' => '</div></div></div>',
'block_level' => true,
),
array(
'tag' => 'hidden',
'type' => 'parsed_equals',
'before' => '<div style="padding: 3px; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #5873B0; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onClick="if (this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display != \'\') {  this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'\'; this.innerHTML = \'<b>' . $txt['hidden_text'] . ': $1 • </b><a href=\\\'#\\\' onClick=\\\'return false;\\\'>' . $txt["hidden_hide"] . '</a>\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerHTML = \'<b>' . $txt['hidden_text'] . ': $1 • </b><a href=\\\'#\\\' onClick=\\\'return false;\\\'>' . $txt["hidden_show"] . '</a>\'; }"><b>' . $txt['hidden_text'] . ': $1 • </b><a href="#" onClick="return false;">' . $txt["hidden_show"] . '</a></span></div><div class="quotecontent"><div style="display: none;">',
'after' => '</div></div></div>',
'block_level' => true,
),
array(
'tag' => 'collapse',
'before' => '<div class="accordion" id="accordion2"><div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Collapsible Group Item #1</a></div><div id="collapseOne" class="accordion-body collapse in"><div class="accordion-inner">',
'after' => '</div></div></div></div>',
'block_level' => true,
),
array(
'tag' => 'fs2_open.log',
'type' => 'closed',
'content' => 'Please post your fs2_open.log file.  Instructions on how to do this can be found <a href="http://www.hard-light.net/forums/index.php?topic=56279.msg1180359#msg1180359">in this post</a>.',
),
array(
'tag' => 'lfs2_open.log',
'type' => 'closed',
'content' => 'please post your fs2_open.log file.  Instructions on how to do this can be found <a href="http://www.hard-light.net/forums/index.php?topic=56279.msg1180359#msg1180359">in this post</a>.',
),
array(
'tag' => 'fred2_open.log',
'type' => 'closed',
'content' => 'Please post your fred2_open.log file.  Instructions on how to do this can be found <a href="http://www.hard-light.net/forums/index.php?topic=56279.msg1180359#msg1180359">in this post</a>.',
),
array(
'tag' => 'lfred2_open.log',
'type' => 'closed',
'content' => 'please post your fred2_open.log file.  Instructions on how to do this can be found <a href="http://www.hard-light.net/forums/index.php?topic=56279.msg1180359#msg1180359">in this post</a>.',
),
array(
'tag' => 'fsolog',
'type' => 'closed',
'content' => 'Please post your fs2_open.log file.  Instructions on how to do this can be found <a href="http://www.hard-light.net/forums/index.php?topic=56279.msg1180359#msg1180359">in this post</a>.',
),
array(
'tag' => 'lfsolog',
'type' => 'closed',
'content' => 'please post your fs2_open.log file.  Instructions on how to do this can be found <a href="http://www.hard-light.net/forums/index.php?topic=56279.msg1180359#msg1180359">in this post</a>.',
),
array(
'tag' => 'fredlog',
'type' => 'closed',
'content' => 'Please post your fred2_open.log file.  Instructions on how to do this can be found <a href="http://www.hard-light.net/forums/index.php?topic=56279.msg1180359#msg1180359">in this post</a>.',
),
array(
'tag' => 'lfredlog',
'type' => 'closed',
'content' => 'please post your fred2_open.log file.  Instructions on how to do this can be found <a href="http://www.hard-light.net/forums/index.php?topic=56279.msg1180359#msg1180359">in this post</a>.',
),

The first four are custom color tags for Maeglamor, Black Wolf, Mobius, and Zacam respectively.  Then we have media tags, spoiler stuff, and shortcuts for adding comments about log files.

what the **** are all these :-*

I'm guessing that's an Easter egg, judging from the "Shhhh!" comment in the code.

[AdmiralRalwood]

Why are so many tags defined multiple times?

Oh hey, it does support start time.

[Goober5000]

Why are so many tags defined multiple times?

Different ways of specifying tag parameters.