Hiding content (SMF patch)
⭐ Merited by LoyceV (24) ,dkbit98 (10) ,suchmoon (5) ,Cricktor (5) ,icopress (4) ,BlackBoss_ (1) ,Felicity_Tide (1)
I mentioned this one at the end of December:
Most of the above description still stands, but I've since done more reading/thinking and changed my mind about the SEO impact. So, instead of the feature working one way for guests and another way for non-guests, it now just works the same way for everyone.
Something that the above description skipped over is that it's actually a pair of tags that'll be added: a block-level tag called [hide], and an inline-level tag called [hide-inline]. (Don't worry too much about the difference, the block-level [hide] tag is almost always the one you want, with the [hide-inline] tag only really being useful in what I expect will be rare situations.)
Another thing that the above description didn't mention is that there's a new button added for the [hide] tag (next to the "Insert List" button, located at the bottom-right):
Here are the diffs for @theymos (in the order I recommend applying them):
(The above diff makes sense for my version of SMF, but in theymos' version the file that should be adjusted is inside the Themes/custom1 directory.)
(This diff is where most of the feature exists.)
(The above isn't a diff, but rather a command that can be executed to re-create the icon I made with Inkscape and GIMP. The 101-byte hide.gif file that the above command creates should be moved into the Themes/custom1/images/bbc directory.)
(This diff adds the new "Hide Content" button to the BBCode editor.)
I considered including diffs to update the help section on posting and the BBCode reference, but those diffs are a bit messy (and bigger than the above diffs combined). Perhaps I'll update that in some later patch (and maybe add the other tags that are missing from it, too).
(I often try to make these "patch" topics substantive beyond the code, and pitch everyone on the usefulness of a thing, and maybe explain some of the thinking and trial-and-error that went into it. But, I've been struggling to stay enthusiastic about the forum lately, and though I expect I'll bounce back and feel positive about the forum once again, for now I'm in kind of a matter-of-fact/humorless mood. I'm sorry about that. If there's some technical detail that interests you, or you'd like to know why I did or didn't do something in a certain way, send me a PM. It's time-wise very expensive for me to recall/unpack all of my thinking on something and to respond properly to questions/suggestions, and I often leave posts unanswered because I either can’t find the time to reply to them, or because I’ve forgotten about them by the time that I do have surplus bandwidth. If you send me a question that you've clearly put some thought into, I promise to at some point get back to you with an answer.)
There are requests for a "spoiler" tag going all the way back to 2011. I started work on this a few months ago, and am now finished with it.
I experimented with a lot of different approaches, but the one I eventually settled on is just a simple button that replaces itself (once you click/tap on it) with whatever content you'd like.
I've named the tag [hide] rather than [spoiler]. Basically, you can wrap anything you'd like in [hide]...[/hide] tags, and then rather than the content itself appearing, instead you just get this neat little "Show" button:
(That's obviously just an example image, so clicking on it won't do anything.)
Something that works particularly well with this approach is making quotes more compact:
(Seriously, stop clicking things.)
I can see this being a nice way (for the people who choose to start using it) to post more courteously, and to save others from having to scroll through huge images and big tables and whatnot. I think I've squared away every concern I've run into. For example, I worried about how this tag might negatively affect SEO, but worked around that by making the content rather than the button appear for guests (on the basis that that's the most reliable way I can think of to make sure that hidden content won't confuse web crawlers). I've also made it so that you can tack a ;unhide on the end of URLs, so that there's some way for people who are both logged-in and refuse to enable JavaScript to still be able to view everything (long term, I really can't see always trying to accommodate the no-JS crowd, but if it turns out to be a genuine sticking point, then I'll add a profile-setting that does the same thing as ;unhide, though I'd really prefer not to, because there are various things that I'd like to add to Bitcointalk that just have no way of working well without client-side scripting, so one or two final concessions to the no-JS peeps would be pretty pointless, all things considered).
And though I expect very few people use them, I've also made sure that the tag recursively auto-expands for the wap/wap2/imode and action=printpage features.
I'll post the patch sometime in January, but, in the meantime, if anyone has any concerns they'd like to raise, or believes that I haven't considered something deeply enough, then I'd be grateful for your thoughts.
I experimented with a lot of different approaches, but the one I eventually settled on is just a simple button that replaces itself (once you click/tap on it) with whatever content you'd like.
I've named the tag [hide] rather than [spoiler]. Basically, you can wrap anything you'd like in [hide]...[/hide] tags, and then rather than the content itself appearing, instead you just get this neat little "Show" button:
(That's obviously just an example image, so clicking on it won't do anything.)
Something that works particularly well with this approach is making quotes more compact:
(Seriously, stop clicking things.)
I can see this being a nice way (for the people who choose to start using it) to post more courteously, and to save others from having to scroll through huge images and big tables and whatnot. I think I've squared away every concern I've run into. For example, I worried about how this tag might negatively affect SEO, but worked around that by making the content rather than the button appear for guests (on the basis that that's the most reliable way I can think of to make sure that hidden content won't confuse web crawlers). I've also made it so that you can tack a ;unhide on the end of URLs, so that there's some way for people who are both logged-in and refuse to enable JavaScript to still be able to view everything (long term, I really can't see always trying to accommodate the no-JS crowd, but if it turns out to be a genuine sticking point, then I'll add a profile-setting that does the same thing as ;unhide, though I'd really prefer not to, because there are various things that I'd like to add to Bitcointalk that just have no way of working well without client-side scripting, so one or two final concessions to the no-JS peeps would be pretty pointless, all things considered).
And though I expect very few people use them, I've also made sure that the tag recursively auto-expands for the wap/wap2/imode and action=printpage features.
I'll post the patch sometime in January, but, in the meantime, if anyone has any concerns they'd like to raise, or believes that I haven't considered something deeply enough, then I'd be grateful for your thoughts.
Most of the above description still stands, but I've since done more reading/thinking and changed my mind about the SEO impact. So, instead of the feature working one way for guests and another way for non-guests, it now just works the same way for everyone.
Something that the above description skipped over is that it's actually a pair of tags that'll be added: a block-level tag called [hide], and an inline-level tag called [hide-inline]. (Don't worry too much about the difference, the block-level [hide] tag is almost always the one you want, with the [hide-inline] tag only really being useful in what I expect will be rare situations.)
Another thing that the above description didn't mention is that there's a new button added for the [hide] tag (next to the "Insert List" button, located at the bottom-right):
Here are the diffs for @theymos (in the order I recommend applying them):
Code:
--- baseline/Themes/default/style.css 2007-12-20 19:44:06.000000000 +0000
+++ modified/Themes/default/style.css 2025-01-08 02:06:35.000000000 +0000
@@ -451 +451,9 @@
}
+
+/* The "Show" button for the 'hide' and 'hide-inline' tags. */
+button.show_hidden_content
+{
+ color: #476c8e;
+ background-color: #f1f2f4;
+ border: 1px solid #d0d0e0;
+}
+++ modified/Themes/default/style.css 2025-01-08 02:06:35.000000000 +0000
@@ -451 +451,9 @@
}
+
+/* The "Show" button for the 'hide' and 'hide-inline' tags. */
+button.show_hidden_content
+{
+ color: #476c8e;
+ background-color: #f1f2f4;
+ border: 1px solid #d0d0e0;
+}
(The above diff makes sense for my version of SMF, but in theymos' version the file that should be adjusted is inside the Themes/custom1 directory.)
Code:
--- baseline/Sources/Subs.php 2011-09-17 21:59:55.000000000 +0000
+++ modified/Sources/Subs.php 2025-01-08 02:16:41.000000000 +0000
@@ -1271,24 +1271,35 @@
'tag' => 'green',
'before' => '<span style="color: green;">',
'after' => '</span>',
),
array(
'tag' => 'glow',
'type' => 'unparsed_commas',
'test' => '[#0-9a-zA-Z\-]{3,12},([012]\d{1,2}|\d{1,2})(,[^]]+)?\]',
'before' => $context['browser']['is_ie'] ? '<table border="0" cellpadding="0" cellspacing="0" style="display: inline; vertical-align: middle; font: inherit;"><tr><td style="filter: Glow(color=$1, strength=$2); font: inherit;">' : '<span style="background-color: $1;">',
'after' => $context['browser']['is_ie'] ? '</td></tr></table> ' : '</span>',
),
+ array(
+ 'tag' => 'hide',
+ 'before' => isset($_GET['unhide']) || WIRELESS ? '<div>' : '<button type="button" class="show_hidden_content" onclick="this.style.display = \'none\'; this.nextElementSibling.style.display = \'\';" style="display: block;">Show</button><div style="display: none;">',
+ 'after' => '</div>',
+ 'block_level' => true,
+ ),
+ array(
+ 'tag' => 'hide-inline',
+ 'before' => isset($_GET['unhide']) || WIRELESS ? '<span>' : '<button type="button" class="show_hidden_content" onclick="this.style.display = \'none\'; this.nextElementSibling.style.display = \'\';">Show</button><span style="display: none;">',
+ 'after' => '</span>',
+ ),
array(
'tag' => 'hr',
'type' => 'closed',
'content' => '<hr />',
'block_level' => true,
),
array(
'tag' => 'html',
'type' => 'unparsed_content',
'content' => '$1',
'block_level' => true,
'disabled_content' => '$1',
),
@@ -1705,24 +1716,28 @@
$disabled['me'] = true;
// Color coding doesn't make sense.
$disabled['php'] = true;
// Links are useless on paper... just show the link.
$disabled['ftp'] = true;
$disabled['url'] = true;
$disabled['iurl'] = true;
$disabled['email'] = true;
$disabled['flash'] = true;
+ // Can't click-to-reveal on paper... just show the content.
+ $disabled['hide'] = true;
+ $disabled['hide-inline'] = true;
+
// !!! Change maybe?
if (!isset($_GET['images']))
$disabled['img'] = true;
// !!! Interface/setting to add more?
}
$open_tags = array();
$message = strtr($message, array("\n" => '<br />'));
// The non-breaking-space looks a bit different each time.
$non_breaking_space = $context['utf8'] ? ($context['server']['complex_preg_chars'] ? '\x{C2A0}' : chr(0xC2) . chr(0xA0)) : '\xA0';
+++ modified/Sources/Subs.php 2025-01-08 02:16:41.000000000 +0000
@@ -1271,24 +1271,35 @@
'tag' => 'green',
'before' => '<span style="color: green;">',
'after' => '</span>',
),
array(
'tag' => 'glow',
'type' => 'unparsed_commas',
'test' => '[#0-9a-zA-Z\-]{3,12},([012]\d{1,2}|\d{1,2})(,[^]]+)?\]',
'before' => $context['browser']['is_ie'] ? '<table border="0" cellpadding="0" cellspacing="0" style="display: inline; vertical-align: middle; font: inherit;"><tr><td style="filter: Glow(color=$1, strength=$2); font: inherit;">' : '<span style="background-color: $1;">',
'after' => $context['browser']['is_ie'] ? '</td></tr></table> ' : '</span>',
),
+ array(
+ 'tag' => 'hide',
+ 'before' => isset($_GET['unhide']) || WIRELESS ? '<div>' : '<button type="button" class="show_hidden_content" onclick="this.style.display = \'none\'; this.nextElementSibling.style.display = \'\';" style="display: block;">Show</button><div style="display: none;">',
+ 'after' => '</div>',
+ 'block_level' => true,
+ ),
+ array(
+ 'tag' => 'hide-inline',
+ 'before' => isset($_GET['unhide']) || WIRELESS ? '<span>' : '<button type="button" class="show_hidden_content" onclick="this.style.display = \'none\'; this.nextElementSibling.style.display = \'\';">Show</button><span style="display: none;">',
+ 'after' => '</span>',
+ ),
array(
'tag' => 'hr',
'type' => 'closed',
'content' => '<hr />',
'block_level' => true,
),
array(
'tag' => 'html',
'type' => 'unparsed_content',
'content' => '$1',
'block_level' => true,
'disabled_content' => '$1',
),
@@ -1705,24 +1716,28 @@
$disabled['me'] = true;
// Color coding doesn't make sense.
$disabled['php'] = true;
// Links are useless on paper... just show the link.
$disabled['ftp'] = true;
$disabled['url'] = true;
$disabled['iurl'] = true;
$disabled['email'] = true;
$disabled['flash'] = true;
+ // Can't click-to-reveal on paper... just show the content.
+ $disabled['hide'] = true;
+ $disabled['hide-inline'] = true;
+
// !!! Change maybe?
if (!isset($_GET['images']))
$disabled['img'] = true;
// !!! Interface/setting to add more?
}
$open_tags = array();
$message = strtr($message, array("\n" => '<br />'));
// The non-breaking-space looks a bit different each time.
$non_breaking_space = $context['utf8'] ? ($context['server']['complex_preg_chars'] ? '\x{C2A0}' : chr(0xC2) . chr(0xA0)) : '\xA0';
(This diff is where most of the feature exists.)
Code:
python3 -c "open('hide.gif', 'wb').write(b'GIF89a\x17\x00\x16\x00\xa1\x03\x00\x4f\x4f\x4f\x35\x5d\x80\x86\xa4\xbe\x00\x00\x00\x21\xf9\x04\x01\x0a\x00\x03\x00\x2c\x00\x00\x00\x00\x17\x00\x16\x00\x00\x02\x36\x9c\x8f\xa9\xcb\xed\x0f\xa3\x9c\x62\xb2\x6a\x55\x05\x9c\x5b\x20\x00\x47\x17\x79\x55\x30\x8a\x8e\x67\xa0\xa8\xc1\x32\x71\x40\xa7\xcf\x3c\x6c\xea\x1d\x83\x7b\xd9\x11\x61\x32\x88\x21\xd1\x60\x3c\x2a\x97\xcc\xe6\xa3\x00\x00\x3b')"
(The above isn't a diff, but rather a command that can be executed to re-create the icon I made with Inkscape and GIMP. The 101-byte hide.gif file that the above command creates should be moved into the Themes/custom1/images/bbc directory.)
Code:
--- baseline/Themes/default/Post.template.php 2008-04-30 18:30:34.000000000 +0000
+++ modified/Themes/default/Post.template.php 2025-01-08 02:28:46.000000000 +0000
@@ -783,24 +783,25 @@
'table' => array('code' => 'table', 'before' => '[table]', 'after' => '[/table]', 'description' => $txt[436]),
'tr' => array('code' => 'td', 'before' => '[tr]', 'after' => '[/tr]', 'description' => $txt[449]),
'td' => array('code' => 'td', 'before' => '[td]', 'after' => '[/td]', 'description' => $txt[437]),
array(),
'sup' => array('code' => 'sup', 'before' => '[sup]', 'after' => '[/sup]', 'description' => $txt[447]),
'sub' => array('code' => 'sub', 'before' => '[sub]', 'after' => '[/sub]', 'description' => $txt[448]),
'tele' => array('code' => 'tt', 'before' => '[tt]', 'after' => '[/tt]', 'description' => $txt[440]),
array(),
'code' => array('code' => 'code', 'before' => '[code]', 'after' => '[/code]', 'description' => $txt[259]),
'quote' => array('code' => 'quote', 'before' => '[quote]', 'after' => '[/quote]', 'description' => $txt[260]),
array(),
'list' => array('code' => 'list', 'before' => '[list]\n[li]', 'after' => '[/li]\n[li][/li]\n[/list]', 'description' => $txt[261]),
+ 'hide' => array('code' => 'hide', 'before' => '[hide]', 'after' => '[/hide]', 'description' => 'Hide Content'),
);
$found_button = false;
// Here loop through the array, printing the images/rows/separators!
foreach ($context['bbc_tags'][0] as $image => $tag)
{
// Is there a "before" part for this bbc button? If not, it can't be a button!!
if (isset($tag['before']))
{
// Is this tag disabled?
if (!empty($context['disabled_tags'][$tag['code']]))
continue;
+++ modified/Themes/default/Post.template.php 2025-01-08 02:28:46.000000000 +0000
@@ -783,24 +783,25 @@
'table' => array('code' => 'table', 'before' => '[table]', 'after' => '[/table]', 'description' => $txt[436]),
'tr' => array('code' => 'td', 'before' => '[tr]', 'after' => '[/tr]', 'description' => $txt[449]),
'td' => array('code' => 'td', 'before' => '[td]', 'after' => '[/td]', 'description' => $txt[437]),
array(),
'sup' => array('code' => 'sup', 'before' => '[sup]', 'after' => '[/sup]', 'description' => $txt[447]),
'sub' => array('code' => 'sub', 'before' => '[sub]', 'after' => '[/sub]', 'description' => $txt[448]),
'tele' => array('code' => 'tt', 'before' => '[tt]', 'after' => '[/tt]', 'description' => $txt[440]),
array(),
'code' => array('code' => 'code', 'before' => '[code]', 'after' => '[/code]', 'description' => $txt[259]),
'quote' => array('code' => 'quote', 'before' => '[quote]', 'after' => '[/quote]', 'description' => $txt[260]),
array(),
'list' => array('code' => 'list', 'before' => '[list]\n[li]', 'after' => '[/li]\n[li][/li]\n[/list]', 'description' => $txt[261]),
+ 'hide' => array('code' => 'hide', 'before' => '[hide]', 'after' => '[/hide]', 'description' => 'Hide Content'),
);
$found_button = false;
// Here loop through the array, printing the images/rows/separators!
foreach ($context['bbc_tags'][0] as $image => $tag)
{
// Is there a "before" part for this bbc button? If not, it can't be a button!!
if (isset($tag['before']))
{
// Is this tag disabled?
if (!empty($context['disabled_tags'][$tag['code']]))
continue;
(This diff adds the new "Hide Content" button to the BBCode editor.)
I considered including diffs to update the help section on posting and the BBCode reference, but those diffs are a bit messy (and bigger than the above diffs combined). Perhaps I'll update that in some later patch (and maybe add the other tags that are missing from it, too).
(I often try to make these "patch" topics substantive beyond the code, and pitch everyone on the usefulness of a thing, and maybe explain some of the thinking and trial-and-error that went into it. But, I've been struggling to stay enthusiastic about the forum lately, and though I expect I'll bounce back and feel positive about the forum once again, for now I'm in kind of a matter-of-fact/humorless mood. I'm sorry about that. If there's some technical detail that interests you, or you'd like to know why I did or didn't do something in a certain way, send me a PM. It's time-wise very expensive for me to recall/unpack all of my thinking on something and to respond properly to questions/suggestions, and I often leave posts unanswered because I either can’t find the time to reply to them, or because I’ve forgotten about them by the time that I do have surplus bandwidth. If you send me a question that you've clearly put some thought into, I promise to at some point get back to you with an answer.)