[paid accounts] Smilies in Posts and Comments

May 18, 2006 22:59

The code in this tutorial will cause simple punctuation emoticons like :) and :( to be replaced with images of your choosing, for example and , when they are displayed in posts and comments. It is adapted from absolut's component_help tutorial Adding Smilies to your post/comments. As in that original tutorial, the code here uses some search and replace code by mageboltrat that can be found here. This tutorial 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. Also, some entries need to be printed without alteration, like entries containing voiceposts. When Livejournal determines that an entry mustn't be altered, your smilie images will not be used in that entry -- any emoticons will be displayed as plaintext.

If at any point in the instructions you are asked to find a line in your code, but you can't find an exact match for that line anywhere in your version of the function, please make your layer viewable and leave a comment with a link to that layer. It may be that you have an older version of a function in your theme layer. Most often you will see references to $e.text instead of $e->print_text();. Once you have commented, someone will look at your layer code and give you specific help.

Instructions

1. Find a set of smilie images and load them to an online host site.

2. Make sure you have created a theme layer.

Adding Smilies to your Posts

3. Do you already have the print_entry function in your theme layer? If not, go to the Flexible Squares layer source, copy the print_entry function from there and paste it into your theme layer.

4. Find this line in the print_entry function:

$e->print_text();

Replace it with this code:

if ($e.text_must_print_trusted) {
$e->print_text();
}
else {
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:]" => """
""",
# note: for each line, there should be a comma at the very end, EXCEPT for the last line
":)" => """""",
";-)" => """""",
":(" => """"""
};

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;
}
"""$text""";
}
5. Customize the code in red to the emoticons and image urls that you want to use. Please see the Important Notes section for restrictions on the emoticons you can use.

Adding Smilies to your Comments

6. Do you already have the EntryPage::print_comment function in your theme layer? If not, go to the Flexible Squares layer source, copy it from there and paste it into your theme layer.

7. Find these lines in the EntryPage::print_comment function:

print """

"""; $comment->print_text(); """\n""";
Replace them with this code:

if ($comment.text_must_print_trusted) {
"""
"""; $comment->print_text(); """\n""";
}
else {
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:]" => """
""",
# note: for each line, there should be a comma at the very end, EXCEPT for the last line
":)" => """""",
";-)" => """""",
":(" => """"""
};

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;
}
"""
$text\n""";
}
8. Again, customize the code in red to the emoticons and image urls that you want to use. Please see the Important Notes section for restrictions on the emoticons you can use.

Adding Smilies to your Reply Page and Outputting A List of Smilies

9. Do you already have the ReplyPage::print_body function in your theme layer? If not, copy the ReplyPage::print_body function from the Flexible Squares layer source and paste it into your theme layer.

10. Paste this code into the very top of the ReplyPage::print_body function, in the line just after the first open curly brace, once again customizing the code in red to the emoticons and image urls that you want to use. Please see the Important Notes section for restrictions on the emoticons you can use.

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:]" => """
""",
# note: for each line, there should be a comma at the very end, EXCEPT for the last line
":)" => """""",
";-)" => """""",
":(" => """"""
};
11. Find this line in the ReplyPage::print_body function:

"""; $.replyto->print_text(); """

Replace it with this code:

""";
if ($.replyto.text_must_print_trusted) {
"""
"""; $.replyto->print_text(); """""";
}
else {
var string text = $.replyto.text;
var string value;

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;
}
"""
$text""";
}
"""
12. Copy the below section of code, which is used to display your list of smilie images, so that people commenting in your journal can see what images will be displayed for the different emoticons:



If you would like this box to sit just above your reply text box, paste the following code just *before* the $.form->print(); line in your theme layer's ReplyPage::print_body function. If you would like this box to sit just below your reply text box, paste the following code just *after* the $.form->print(); line in your theme layer's ReplyPage::print_body function.

"""

Add a Smiley to your comment

(Hover over each smiley to get the code)

""";

foreach var string key ($emoticons) {
var string value = $emoticons{$key};
""" $value$key """;
}
"""""";
13. Do you already have the Page::print_custom_head function in your theme layer? If not, add the following code to your layer:

function Page::print_custom_head() {
"""

""";
}
14. Now add this css to your theme layer's Page::print_custom_head function, just before the line:

.emoticon_box {
text-align: center;
margin: 10px;
padding: 10px;
background-color: $*entry_bgcolor;
color: $*entry_fgcolor;
border: 1px solid $*border_color;
}

a.emoticoninfo {
position: relative; /*this is the key*/
z-index: 24;
background-color: $*entry_bgcolor;
color: $*entry_fgcolor;
text-decoration: none;
}

a.emoticoninfo:hover {
z-index:25;
background-color: transparent !important;
}

a.emoticoninfo img {
border: none;
}

a.emoticoninfo span {
display: none;
}

a.emoticoninfo: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;
text-decoration: none;
}
15. Compile your layer and check your journal to see that emoticons are being replaced by the correct images and that on the reply page your list of available images is appearing.

Important Notes:
Avoid replacing ;) and :/ with images as doing so will screw up cut tags and all links and images. Try using ;-) and :-/ instead. Also avoid emoticon codes that include the < sign.

!tutorial, comments, entries, paid accounts

Previous post Next post
Up
[]