Extra Smileys in Post Area [CB]

Updated with clearer instructions

This code adds smileys directly into the table cell where the other smileys are. The end result will be something like this:




Global Footer


<script type="text/javascript">
<!--
/* extra smileys in posting area by california */

// edit the path to your smileys here
var imgPath = "http://img./v123/california/smileys/"

var smiley = [

  // edit the list of smileys here
  ['smiley.gif', ':smile:'],
  ['happy.gif', ':happy:'],
  ['evil.gif', ':-<'],
  "BREAK",
  ['funny.gif', ':lol:'],
  ['weird.gif', ':S'],
  ['filename.gif', ':code:'] // last line doesn't get a comma

];

// do not edit below this line
var td=document.getElementsByTagName("td");
if(document.postForm){
    for(i=1;i<td.length;i++){
        if(td[i].width=="70%" && td[i-1].innerHTML.match(/Add Smilies:/)){
            for(j=0;j<smiley.length;j++){
                if(smiley[j]=="BREAK"){
                    td[i].innerHTML+='<br />';
                }else{
                    var code=smiley[j][1];
                    var img=imgPath+smiley[j][0];
                    var jsadd='javascript:add(\' '+code+' \')';
                    td[i].innerHTML+=' <a href="'+jsadd+'"><img src="'+img+
                    '" border="0" alt="'+code+'" /></a>';
                }
            }
            break;
        }
    }
}
// -->
</script>


Let's say you're using PhotoBucket to host your smileys, which I would recommend. In the example, let's just say I've uploaded all my smileys to the same folder, and these are their URLs:

http://img./v123/california/smileys/smiley.gif
http://img./v123/california/smileys/happy.gif
http://img./v123/california/smileys/evil.gif
http://img./v123/california/smileys/funny.gif
http://img./v123/california/smileys/filename.gif

Instead of including the full URL in every line of the code, I've put the URL to the folder where all the smileys are located in the line that says imgPath:

var imgPath = "http://img./v123/california/smileys/";

And the filename of each smiley on the following lines. With a URL to an image like this:

http://img./v123/california/smileys/smiley.gif

The red portion is the path and the blue portion is the filename. This is how every URL on the Internet works!

Each line of the smiley array looks like this:

  ['filename', 'smiley code'],

As stated above, the 'filename' is the file name of the smiley image, like "smiley.gif" or "lol.jpg". This is NOT a full URL.

The 'smiley code' is what is used to post the smiley. For the standard smiley, the smiley code is :) for example. When you add more smileys, you must make up more smiley codes for each smiley you add. Some people like to make all their smiley codes look like :lol: , :smile: , :laugh: , etc., with colons surrounding a word that describes the smiley. It is up to you what you want to use, as long as each smiley as a unique code. Do not use single quotes or backslashes in any of your smiley codes. The smiley codes are used in your censored words list which is explained below*.

The line that says BREAK is used to move the next smileys to a new row. For example, in my screenshot at the top of this post, I used "BREAK" at the very beginning of the code so that all the extra smileys were on a new row. If you do not use a break, the smileys will simply continue to the end of the line and wrap to the next line when they run out of space.

Notice that, on the last line, there is no comma. No matter how many lines you have in your list of smileys, every line will get a comma except the last one.

*Now finally, the censored words list portion of the code. Yes this is important, and no the code won't work if you skip this. Go into your admin panel and open up your censored words list. You'll fill it out by putting your smiley codes in the left field, and the corresponding image code (full URL of the smiley wrapped in [img] tags) in the right field.

[/b]]http://img./v123/california/smileys/smiley.gif"[/td][/tr]
[tr][td]:happy:[/td][td][img src="[/b]]http://img./v123/california/smileys/happy.gif"[/td][/tr]
[tr][td]:-<[/td][td][img src="[/b]]http://img./v123/california/smileys/evil.gif"[/td][/tr]
[tr][td]:lol:[/td][td][img src="[/b]]http://img./v123/california/smileys/funny.gif"[/td][/tr]
[tr][td]:S[/td][td][img src="[/b]]http://img./v123/california/smileys/weird.gif"[/td][/tr]
[/table]

Run out of lines? Just save the list and go back to it, you'll find five more lines there to use, and repeat this process until you're done.


Troubleshooting

There are a lot of common reasons why this code won't work. 99% of the time, it's because of a typo somewhere. Each line of your smiley array must look like this:

  ['filename', 'smiley code'],

Often times, a single quote will be missing, the commas will actually be semicolons, a bracket will be missing, etc. If your extra smileys aren't showing up in the posting area then one of your lines has a mistake in it. Just go through every line and make sure there aren't any problems with them. If you have hundreds of smileys, you can use FireFox's javascript console to easily pinpoint which line has the error.

If your smileys are showing up as red X's, check your image host, make sure the image path is correct, make sure you're not using full URLs in every line, etc. If you tack on a filename to the end of what you have for the imgPath, and visit the URL, you should get an image and not an error page. Also the imgPath MUST end with a forward slash /

If your smileys are showing up fine, and work when you click on them, but the smiley codes aren't changing into the actual images after you post, then you haven't done the censored words list portion correctly, so go back up to that part and follow the instructions.