Forum Tips and Tricks Fader

[GL700Wing]

With the forums I manage I create 'Tips and Tricks' topics to help members learn how to use forum features - some of which have been added by mods - they may not have encountered on other forums (eg, mentions, inline attachments, event registration system, etc).

I've found this is particularly important/valuable when a new SMF forum community is created by migrating the users and content from another forum platform - change is not always welcomed and for some users it can be quite challenging to have to learn how to do things all over again ...

In the past I've used the 'News' feature to create a fader with links to the 'Tips and Tricks' topics but with a new forum I'm in the process of creating for the customers of a business there is a need for the business be able to use the 'News' feature for - well - news!!  Who would have thought??

With a little bit of clever coding I've been able to create a 'Tips and Tricks' fader that uses 'News' items but which displays 'News' and 'Tips and Tricks' items separately ('News' items are displayed below 'Tips and Tricks').  Also, the 'Tips and Tricks' fader can be enabled/disabled and also has its own fade delay timer.

The way this works is that you configure a 'Tips and Tricks' prefix via the current theme settings and then create one or more 'News' items for the 'Tips and Tricks' containing the prefix.
(Important Note: The prefix is case-sensitive).

Note: I've used the word prefix but it can actually be any character string you want to use (eg, HowTo:, New Feature Added -, etc) and it can occur anywhere in the text of the 'News' item (this allows you to also use BBCodes for formatting including hyperlinks).
Example:
[color=blue][url=https://my-website.info/forum/index.php?topic=137.0]HowTo: Insert image attachments into the body of messages[/url][/color]


1.  Create a javascript fader for the 'Tips and Tricks' items.

Copy ./Themes/default/scripts/fader.js ./Themes/default/scripts/fader_tips.js

Edit ./Themes/default/scripts/fader_tips.js and change all occurrences of the word News with the word Tips

Or copy the attached fader_tips.js file to ./Themes/default/scripts/ ...


2.  Edit ./Sources/Subs.php

Find:

Code Select Expand

// Get some news...
$context['news_lines'] = explode("\n", str_replace("\r", '', trim(addslashes($modSettings['news']))));
$context['fader_news_lines'] = array();
for ($i = 0, $n = count($context['news_lines']); $i < $n; $i++)
{
if (trim($context['news_lines'][$i]) == '')
continue;

// Clean it up for presentation ;).
$context['news_lines'][$i] = parse_bbc(stripslashes(trim($context['news_lines'][$i])), true, 'news' . $i);

// Gotta be special for the javascript.
$context['fader_news_lines'][$i] = strtr(addslashes($context['news_lines'][$i]), array('/' => '\/', '<a href=' => '<a hre" + "f='));
}
$context['random_news_line'] = $context['news_lines'][mt_rand(0, count($context['news_lines']) - 1)];

Replace With:

Code Select Expand

// Get some news (and maybe also some forum tips and tricks) ...
$context['all_news_lines'] = explode("\n", str_replace("\r", '', trim(addslashes($modSettings['news']))));
$context['news_lines'] = array();
$context['fader_news_lines'] = array();
$context['tips_lines'] = array();
$context['fader_tips_lines'] = array();

for ($i = 0, $n = count($context['all_news_lines']); $i < $n; $i++)
{
if (trim($context['all_news_lines'][$i]) == '')
continue;

// These are tips ...
if (!empty($settings['tips_prefix']) && strpos($context['all_news_lines'][$i], $settings['tips_prefix']) != '')
{
// Clean it up for presentation ;).
$context['tips_lines'][] = parse_bbc(stripslashes(trim($context['all_news_lines'][$i])), true, 'tips' . $i);

// Gotta be special for the javascript.
$context['fader_tips_lines'][] = strtr(addslashes($context['all_news_lines'][$i]), array('/' => '\/', '<a href=' => '<a hre" + "f='));
}
// These are news items ...
else
{
// Clean it up for presentation ;).
$context['news_lines'][] = parse_bbc(stripslashes(trim($context['all_news_lines'][$i])), true, 'news' . $i);

// Gotta be special for the javascript.
$context['fader_news_lines'][] = strtr(addslashes($context['all_news_lines'][$i]), array('/' => '\/', '<a href=' => '<a hre" + "f='));
}
}
if (count($context['news_lines']) > 0)
$context['random_news_line'] = $context['news_lines'][mt_rand(0, count($context['news_lines']) - 1)];


3.  Edit ./Themes/default/BoardIndex.template.php

Find:

Code Select Expand

// Show the news fader?  (assuming there are things to show...)
Add Before:

Code Select Expand

// Show the tips fader?  (assuming there are things to show...)
if ($context['user']['is_logged'] && !empty($settings['tips_show']) && !empty($context['fader_tips_lines']))
{
echo '
<div id="tipsfader" style="padding: 0 0 1em 1em;">
<ul class="reset" id="smfTipsFadeScroller">';

foreach ($context['tips_lines'] as $tips)
echo '
<li>', $txt['forum_tips'], $tips, '</li>';

echo '
</ul>
</div>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/fader_tips.js"></script>
<script type="text/javascript"><!-- // --><![CDATA[

// Create a tips fader object.
var oTipsFader = new smf_TipsFader({
sSelf: \'oTipsFader\',
sFaderControlId: \'smfTipsFadeScroller\',
sItemTemplate: ', JavaScriptEscape('<strong>%1$s</strong>'), ',
iFadeDelay: ', empty($settings['tips_delay']) ? 5000 : $settings['tips_delay'], '
});
// ]]></script>';
}


4.  Edit ./Themes/default/Settings.template.php

Find:

Code Select Expand

'',
array(
'id' => 'show_newsfader',
'label' => $txt['news_fader'],
),

Add Before:

Code Select Expand

'',
array(
'id' => 'tips_show',
'label' => $txt['tips_show'],
),
array(
'id' => 'tips_delay',
'label' => $txt['tips_delay'],
'type' => 'number',
),
array(
'id' => 'tips_prefix',
'label' => $txt['tips_prefix'],
'description' => $txt['tips_prefix_desc'],
'type' => 'text',
),


5.  Edit ./Themes/default/languages/Themes.english.php

Add the following lines to the file:

Code Select Expand

global $scripturl;
$txt['tips_show'] = 'Show <em>\'Forum Tips and Tricks\'</em> fader on board index for members';
$txt['tips_delay'] = 'Fade delay for <em>\'Forum Tips and Tricks\'</em> items';
$txt['tips_prefix'] = 'Prefix for identifying tips (eg, <em>HowTo:</em>, etc)';
$txt['tips_prefix_desc'] = 'The prefix is case sensitive and MUST match text in the <a href="' . $scripturl . '?action=admin;area=news;sa=editnews" target="_blank" class="new_win">News</a> item EXACTLY in order to be shown';


6.  Edit ./Themes/default/languages/Modifications.english.php

Add the following line to the file:

Code Select Expand

$txt['forum_tips'] = 'Forum Tips and Tricks : ';


Important Note:  For custom themes the equivalent template and language files will also need to be updated.

[landyvlad]

So a random selection of topics which are links to a post on the forum with the details?

[GL700Wing]

So a random selection of topics which are links to a post on the forum with the details?

Not really random - I have a board with a name like 'Forum Information' on each of the forums I manage and I create a topic for each specific tip/trick (mostly they relate to mods I've installed) that includes screen shots from that particular forum.

[landyvlad]

Nice work!

is this 2.0.x only at this stage?

[GL700Wing]

is this 2.0.x only at this stage?

Yes - I'm not running 2.1 anywhere so I haven't developed anything for it at this stage.

[Antechinus]

Hadn't seen this before. Very nice.

(Side story: I did once hijack the random news lines to make a random banner changer that triggered on every page load. That was fun.)