Retired Documentation: You are using the documentation for version 1.7.3 which was retired in 2013. Go here for the latest version documentation or check here for your available upgrades to the latest version.

Emoticon Module Tag

Smileys are graphical representations of commonly used "emoticons", such as :-). When smileys are turned on, the system will display a small graphic of a smiley-face instead of the emoticon text, like this:

Showing smileys with your comments

In order to show a pop-up window containing smilies next to your comment form you must do several things:

1. You must create a template called "smilies" (or whatever you like).

2. In the template containing your comment form, add a link similar to this:

<a href="#" onclick="window.open('{path='weblog/smileys'}', '_blank',
'width=300,height=400')">Smilies</a>

Note the "path" variable.

3. In your new smiley template, add the following Javascript in your html head:

<script language="javascript">

<!--



function add_smiley(smiley)

{

    opener.document.getElementById('comment_form').comment.value += " " + smiley + " ";

    window.close();

    opener.window.document.getElementById('comment_form').comment.focus();

}

//-->

</script>

Then, use the following code to create a table containing the smileys:

<table border="0" width="100%" cellpadding="6" cellspacing="1">



{exp:emoticon columns="4"}

  <tr class="row">

    <td class="red"><div>{smiley}</div></td>

  </tr>

{/exp:emoticon}



</table>

Note the "column" parameter in the emoticon tag. It allows you to specify how many columns of smilies the table will show.

ExpressionEngine will then automatically populate the table with all of the smiley images that you have in whatever directory you have specified as your "smilies" directory in the Admin > System Preferences > Emoticon Preferences section of the Control Panel.

Creating or Modifying Emoticons

Please see the Developer Documentation section on Emoticon Development