New Posting Features - Pre-Defined Topic Tags for Zoints Thread Tags

I run a NFL Football Forum at GridironFans.com, and we pride ourselves in bringing all the latest NFL news to the members of our community. We have one forum where I post all the NFL news. The forum is closed to posting new threads to everyone except for a group called "NFL News Reporters". When this group posts news they are required to to enter topic tags for each story. We use the Zoints Topic Tag Mod. People who use this modification should be used to this field:



On our site though the reporters are required to use pre-determined tags. How do they do this? By clicking on them from this field:



We use a custom code that replaces the default topic tagentry field with this pre-defined list. They click on the tags to select them and the tags are then added to each post. How did we pull this off? By using a custom code. I edited the "zointstags_tagform" template to this:

<br>
<!-- zoints tags field -->
<fieldset class="fieldset" style="margin:0px 0px 0px 0px">
		<legend>You Must Click Once On The Applicable Topic Tags:</legend>
		<div style="padding:$stylevar[formspacer]px">
			<table cellpadding="0" cellspacing="$stylevar[cellspacing]" border="0" width="95%">
<tr>
	<td><input type="hidden" class="bginput" id="tags" name="zointstags" value="$zointstags" size="40" tabindex="1" /></td>
</tr>
<tr>
<td><!-- BEGIN Topic Tags - TMO -->             
              <td width="100%" class="row1"><span class="gen"> 
                <style type="text/css">
	.selected { background-color: #7777FF; }
	.unselected { background-color: transparent; }
#popularTags span { font-size: 11px; font-family: monospace; }
#popularTags {width: 100%;}
</style>
                <script type="text/javascript">

Array.prototype.contains = function (ele) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == ele) {
            return true;
        }
    }
    return false;
};

Array.prototype.remove = function (ele) {
    var arr = new Array();
    var count = 0;
    for (var i = 0; i < this.length; i++) {
        if (this[i] != ele) {
            arr[count] = this[i];
            count++;
        }
    }
    return arr;
};

window.onload = function () {
        var taglist = document.getElementById('tags');
	taglist.value = taglist.value.replace (/\s+/g,'');  // strip space
        var tags = taglist.value.split(',');
        
        var populartags = document.getElementById('popularTags').getElementsByTagName('span');
        
        for (var i = 0; i < populartags.length; i++) {
            if (tags.contains(populartags[i].innerHTML)) {
                populartags[i].className = 'selected';
            }
        }
}

function doTag(ele) {
    var thisTag = ele.innerHTML;
    var taglist = document.getElementById('tags');
    var tags = taglist.value.split(',');
 
    // If tag is already listed, remove it
    if (tags.contains(thisTag)) {
        tags = tags.remove(thisTag);
        ele.className = 'unselected';
        
    // Otherwise add it
    } else {
        tags.splice(tags.length-1, 0, thisTag);
        ele.className = 'selected';
    }
    
    taglist.value = tags.join(',');
    document.getElementById('tags').focus();
}
</script>
                <table id="popularTags">
                  <tr> 
                    <td colspan=4><span onclick="doTag(this)">afc</span></td>
                    <td colspan=4><span onclick="doTag(this)">nfc</span></td>
                  </tr>
                  <tr> 
                    <td><span onclick="doTag(this)">afceast</span></td>
                    <td><span onclick="doTag(this)">afcnorth</span></td>
                    <td><span onclick="doTag(this)">afcsouth</span></td>
                    <td><span onclick="doTag(this)">afcwest</span></td>
                    <td><span onclick="doTag(this)">nfceast</span></td>
                    <td><span onclick="doTag(this)">nfcnorth</span></td>
                    <td><span onclick="doTag(this)">nfcsouth</span></td>
                    <td><span onclick="doTag(this)">nfcwest</span></td>
                  </tr>
                  <tr> 
                    <td><span onclick="doTag(this)">bills</span></td>
                    <td><span onclick="doTag(this)">bengals</span></td>
                    <td><span onclick="doTag(this)">colts</span></td>
                    <td><span onclick="doTag(this)">broncos</span></td>
                    <td><span onclick="doTag(this)">cowboys</span></td>
                    <td><span onclick="doTag(this)">bears</span></td>
                    <td><span onclick="doTag(this)">buccaneers</span></td>
                    <td><span onclick="doTag(this)">49ers</span></td>
                  </tr>
                  <tr> 
                    <td><span onclick="doTag(this)">dolphins</span></td>
                    <td><span onclick="doTag(this)">browns</span></td>
                    <td><span onclick="doTag(this)">jaguars</span></td>
                    <td><span onclick="doTag(this)">chargers</span></td>
                    <td><span onclick="doTag(this)">eagles</span></td>
                    <td><span onclick="doTag(this)">lions</span></td>
                    <td><span onclick="doTag(this)">falcons</span></td>
                    <td><span onclick="doTag(this)">cardinals</span></td>
                  </tr>
                  <tr> 
                    <td><span onclick="doTag(this)">jets</span></td>
                    <td><span onclick="doTag(this)">ravens</span></td>
                    <td><span onclick="doTag(this)">texans</span></td>
                    <td><span onclick="doTag(this)">chiefs</span></td>
                    <td><span onclick="doTag(this)">giants</span></td>
                    <td><span onclick="doTag(this)">packers</span></td>
                    <td><span onclick="doTag(this)">panthers</span></td>
                    <td><span onclick="doTag(this)">rams</span></td>
                  </tr>
                  <tr> 
                    <td><span onclick="doTag(this)">patriots</span></td>
                    <td><span onclick="doTag(this)">steelers</span></td>
                    <td><span onclick="doTag(this)">titans</span></td>
                    <td><span onclick="doTag(this)">raiders</span></td>
                    <td><span onclick="doTag(this)">redskins</span></td>
                    <td><span onclick="doTag(this)">vikings</span></td>
                    <td><span onclick="doTag(this)">saints</span></td>
                    <td><span onclick="doTag(this)">seahawks</span></td>
                  </tr>
                  <tr> 
                    <td><span onclick="doTag(this)">nfl</span></td>
                    <td><span onclick="doTag(this)">draft</span></td>
                    <td><span onclick="doTag(this)">injury</span></td>
                    <td><span onclick="doTag(this)">legal</span></td>
                    <td><span onclick="doTag(this)">rumor</span></td>
                    <td><span onclick="doTag(this)">score</span></td>
                    <td><span onclick="doTag(this)">topstory</span></td>
                    <td><span onclick="doTag(this)">transaction</span></td>
                  </tr>
                </table>
                <br/>
                <b>NOTE:</b> The 'nfl' tag is for league news only. You do not 
                have to tag everything with 'nfl'. 
                <!-- END Topic Tags - TMO --></td>
</tr>
</table></fieldset>
<!-- / zoints tags field -->

Now....once a story is posted they get grouped into the tags used. So say I want to check out the latest headlines for a particular team. On my site people can click on my custom navbar and choose the team, division, conference and other tags (League News, NFL Draft, Injury News, Legal News, NFL Rumors, Top Stories, Transactions, Scores). If I want to check out the latest headlines for the Bills I would click on "Buffalo Bills" under the AFC menu and it brings up all the NFL news posted for the Bills.

To create your own pre-defined list of tags just edit the table and the text within. Some basic html knowledge will be needed for this.

I hope people found this post informative and helpful. I am greatful to the people at Zoints for their great modification. I wish I could give support for this but I am still learning about vbulletin myself and am not 'up to speed' with many of the coders here. Hopefully this helps people as a step in the right direction if this is a feature they'd like on their site.

[bdude]

Neat template mod, it'd be great if someone could convert this into a full-on hack, with admincp editable options and such

[SBlueman]

Yeah that would be great. I wish I had the know-how.

I also posted some ideas on additions that would be great for this modification:

Modification to Zoints Thread Tag Mod

One idea is RSS feeds for each topic tag and another idea is inline links for topic tags in posts. If I only knew how...

[kether1]

This looks promising! It would be great if a coder could set this up to work so that there were different tag options for different sections of a forum. For instance, one section of my forum might deal with short story publications where another might deal with writing techniques. If one could force users to select tags from a pre-determined list, it would help organize information and help with SEO (by selecting tags that are key to your particular forum).

Thanks. I plan to keep an eye on this modification.

K

[SBlueman]

If anyone wants to take this modificaton up please feel free to do so. I am not a coder by any means and was just sharing what was on my site. It's a custom code that a member of my site put together for us. He's since left the site and doesn't code because his work schedule is way too hectic.