This is a tutorial on how to add smiley images to your posts/comments. For example when you type :) it'll be displayed as
, and :( will be displayed as 
. You can choose which smilies you want to convert and what image to convert them to.Note
This only works if you are viewing your journal in your own style. Your friends won't be able to see the images if they read your entry on their friend's list.
EDIT
There is a similar tutorial for the layout layer if you want to make the code a little cleaner.
Credit
The search and replace part of the code was adapted from the code by
mageboltrat and can be found here.Getting Smilies
First you will need to find a set of smiley images and a place to host them. There are a ton at Mazeguy Smilies. You could also use the ones from the Livejournal mood themes.
Adding Smilies to your posts (theme layer)
In your theme layer, you need to override the print_entry function. There are some instructions on how to do that here, so follow that tutorial first.
About halfway in the print_entry function there's a line of code like this:
""" $e.text """;
You'll need to replace that line with this:
if(not $e.text_must_print_trusted) {
var string text = $e.text;
var string value = "";
var string{} emoticons = {
# for each smiley you want to add, add a new line
# the format for adding new smilies should be something like this:
# ":smiley:" => """<img src="" alt="" width="" height="" />""",
# note: for each line, there should be a comma at the very end, EXCEPT for the last line
":)" => """<img src="http://stat.livejournal.com/img/mood/classic/smile.gif" alt="" width="15" height="15" />""",
";)" => """<img src="http://stat.livejournal.com/img/mood/classic/wink.gif" alt="" width="15" height="15" />""",
":(" => """<img src="http://stat.livejournal.com/img/mood/classic/sad.gif" alt="" width="15" height="15" />"""
};
foreach var string key ($emoticons) {
$value = $emoticons{$key};
# from lj:mageboltrat's industrial nippon (id=533012)
# see http://www.livejournal.com/community/s2layers/11106.html
var string[] findarray;
var int pos = 1;
foreach var string findcharacter($key) {
$findarray[$pos] = $findcharacter;
$pos = $pos + 1;
}
var int place = 1;
var bool found = false;
var string completedtext = "";
var string foundtext = "";
foreach var string searchcharacter($text) {
if ($searchcharacter == $findarray[$place]) {
if ($place == $key->length()) {
$foundtext = $value;
$place = 1;
} else {
$foundtext = $foundtext + $searchcharacter;
$place = $place + 1;
}
} else {
$completedtext = $completedtext + $foundtext + $searchcharacter;
$foundtext = "";
$place = 1;
}
}
$completedtext = $completedtext + $foundtext;
$text = $completedtext;
}
print $text;
} else {
$e->print_text();
}You can customize the above code in red to the smileys/images that you want.
Adding Smilies to your comments (theme layer)
Adding smilies to comment is pretty much the same as doing it in the posts. To replace the smilies in the comments, you'll need to override the print_comment function - there are instructions here.
Find the line:
""" <div style="margin-left: 5px">$comment.text</div>""";
And replace it with:
if(not $comment.text_must_print_trusted) {
var string text = $comment.text;
var string value = "";
var string{} emoticons = {
# for each smiley you want to add, add a new line
# the format for adding new smilies should be something like this:
# ":smiley:" => """<img src="" alt="" width="" height="" />""",
# note: for each line, there should be a comma at the very end, EXCEPT for the last line
":)" => """<img src="http://stat.livejournal.com/img/mood/classic/smile.gif" alt="" width="15" height="15" />""",
";)" => """<img src="http://stat.livejournal.com/img/mood/classic/wink.gif" alt="" width="15" height="15" />""",
":(" => """<img src="http://stat.livejournal.com/img/mood/classic/sad.gif" alt="" width="15" height="15" />"""
};
foreach var string key ($emoticons) {
$value = $emoticons{$key};
# from lj:mageboltrat's industrial nippon (id=533012)
# see http://www.livejournal.com/community/s2layers/11106.html
var string[] findarray;
var int pos = 1;
foreach var string findcharacter($key) {
$findarray[$pos] = $findcharacter;
$pos = $pos + 1;
}
var int place = 1;
var bool found = false;
var string completedtext = "";
var string foundtext = "";
foreach var string searchcharacter($text) {
if ($searchcharacter == $findarray[$place]) {
if ($place == $key->length()) {
$foundtext = $value;
$place = 1;
} else {
$foundtext = $foundtext + $searchcharacter;
$place = $place + 1;
}
} else {
$completedtext = $completedtext + $foundtext + $searchcharacter;
$foundtext = "";
$place = 1;
}
}
$completedtext = $completedtext + $foundtext;
$text = $completedtext;
}
"""<div style="margin-left: 5px">$text</div>""";
} else {
"""<div style="margin-left: 5px">"""; $comment->print_text(); """</div>""";
}Outputting A List of Smilies (theme layer)
Say you want your friends to be able to add smilies to their comments, and you want them to know what smilies are available for use. The following code will output a list of your smilies, and when you put your mouse over each smiley, it'll display the appropriate emoticon to type into the comment box. This uses CSS code from Pure CSS Tooltips.
You'll need to override the print_my_entries function, which means you have to follow yet another tutorial, which can be found here.
Now, find the line
$p->print_body();Immediately after this line, add the following:
if ($p.view=="reply") {
var string value = "";
var string{} emoticons =
{
# for each smiley you want to add, add a new line
# the format for adding new smilies should be something like this:
# ":smiley:" => """<img src="" alt="" width="" height="" />""",
# note: for each line, there should be a comma at the very end, EXCEPT for the last line
":)" => """<img src="http://stat.livejournal.com/img/mood/classic/smile.gif" alt="" width="15" height="15" />""",
";)" => """<img src="http://stat.livejournal.com/img/mood/classic/wink.gif" alt="" width="15" height="15" />""",
":(" => """<img src="http://stat.livejournal.com/img/mood/classic/sad.gif" alt="" width="15" height="15" />"""
};
print_spacer();
print_entry_header("""<a name="smileys"></a><b>Add a Smiley to your comment</b> (Hover over each smiley to get the code)<br />""");
print_system_box_top();
print_content_top();
foreach var string key ($emoticons) {
$value = $emoticons{$key};
"""<a href="#smileys" class="info">$value <span>$key</span></a> """;
}
print "<br /><br />";
print_content_bottom();
print_system_box_bottom();
}Lastly, you need to add in some CSS style rules, which means you have to override the print_custom_head function. You can find out how to do that here. Add the following into the function, in between
<style media="screen" type="text/css"> and </style>:
a.info{
position: relative; /*this is the key*/
z-index: 24;
background-color: $*entry_bgcolor;
color: $*entry_fgcolor;
text-decoration: none;
}
a.info:hover{
z-index: 25;
background-color: $*entry_bgcolor;
}
a.info img {
border: none;
}
a.info span{
display: none;
}
a.info:hover span{ /*the span will display just on :hover state*/
display: block;
position: absolute;
top: 2em;
left: 2em;
width: 15em;
border: 1px solid $*entry_fgcolor;
background-color: $*entry_bgcolor; color:$*entry_fgcolor;
text-align: center;
}
Example
Say I am typing in a journal entry:
The output on my journal will look like this:
