| unique.wonders. ( @ 2008-04-04 19:35:00 |
| Entry tags: | !tutorial, *account level: paid/perm, admin: updates, class: page, function: print_comment, function: print_custom_head, function: print_linkbar, function: print_postlink, user: uw |
TUTORIAL: [Comments] Custom Comments
!!! Recently Updated !!!
Difficulty Level

Instructions
» Copy and paste the code located in the box.
» If you already have some of these properties somewhere in your code, do not copy/paste them again.
» If you already have function Page::print_custom_head() somewhere in your code, do not copy/paste the function again. Only c/p the CSS which is into it.
» If you already have function CommentInfo::print_postlink(), do not copy/paste it again.
» Read the code for further instructions on how to change settings and data. Instructions are in green. Settings and data you can change are in red.
» Enjoy! :)
» If you already have some of these properties somewhere in your code, do not copy/paste them again.
» If you already have function Page::print_custom_head() somewhere in your code, do not copy/paste the function again. Only c/p the CSS which is into it.
» If you already have function CommentInfo::print_postlink(), do not copy/paste it again.
» Read the code for further instructions on how to change settings and data. Instructions are in green. Settings and data you can change are in red.
» Enjoy! :)
Thanks & Credit
» Credit goes to
kunzite1 for writing 99% of this.
» Heartfelt thanks to the users who beta-tested this and gave me precious feedback.
» Heartfelt thanks to the users who beta-tested this and gave me precious feedback.
####################################################
# CUSTOM COMMENTS (V2) #
# overrides: #
# Page::print_custom_head() #
# CommentInfo::print_postlink() #
# Comment::print_linkbar() #
# EntryPage::print_comment(Comment c) #
# source: #
# component_help/1204404.html #
####################################################
#===============================================
#
# PROPERTIES PERTAINING TO COMMENTS #
#
#===============================================
### USERPIC PROPERTY ###
# Display the userpic: yes (), no (off) or at half size (small)?
set comment_userpic_style = "";
### COMMENT HEADER PROPERTIES ###
set comments_bgcolor = "#E5E5E5";
set comments_screened_bgcolor = "#ECECEC";
set text_comment_from = "From:";
set text_poster_anonymous = "(Anonymous)";
set text_permalink = "Link";
set text_comment_date = "Date:";
set text_multiform_check = "Select:";
set text_comment_ipaddr = "IP Address:";
set text_comment_reply = "Reply";
set text_comment_frozen = "Frozen";
set text_comment_parent = "Parent";
set text_comment_thread = "Thread";
set text_comment_expand = "Expand";
### COMMENT TEXT PROPERTIES ###
set text_comment_edittime = "Edited at";
##### !!! If you already have this function add the CSS code to your existing function instead !!! #####
function Page::print_custom_head() {
"""
<style type="text/css">
/* Code for the quick reply form */
.quickreply_entry form, .quickreply_comment form {
margin-top: 10px;
margin-left: 5px;
margin-bottom: 10px;
}
/* End of code for the quick reply form */
/* Code for the comments icons */
.comment-img {
vertical-align: middle !important;
}
/* End of code for the comments icons */
</style>
""";
}
#===============================================
#
# POST COMMENT LINK #
#
#===============================================
##### !!! If you already have this function, do not c/p it again !!! #####
function CommentInfo::print_postlink() {
##### START CONFIGURATION. THIS IS WHERE YOU SET YOUR OPTIONS. #####
### Enter your image URL if you want to replace the text link by an image link.
var string img_url = "";
### Enter the width and height of your image URL if you want to replace the text link by an image link.
var int img_width = 0;
var int img_height = 0;
##### END CONFIGURATION. #####
##### DO NOT EDIT ANY OF THE FOLLOWING CODE UNLESS YOU KNOW WHAT YOU'RE DOING! #####
if($.show_postlink) {
var Page p = get_page();
var string url = $.post_url;
var string text = get_plural_phrase(0, "text_post_comment" + ($p.view == "friends" ? "_friends" : ""));
if ($.maxcomments) {
print safe "$*text_max_comments";
}
else
{
if ($img_url != "") {
if ($p.view == "entry") {
$p->print_reply_link({"target" => "topcomment", "img_url" =>$img_url, "alt" => $*text_post_comment, "title" => $*text_post_comment});
}
else
{
"""<a href="$url"><img src="$img_url" width="$img_width" height="$img_height" alt="$text" title="$text" border="0" /></a>""";
}
} else {
if ($p.view == "entry") {
$p->print_reply_link({"target" => "topcomment", "linktext" => $*text_post_comment});
}
else
{
"""<a href="$url">$text</a>""";
}
}
}
}
}
#===============================================
#
# POST COMMENT LINKBAR #
#
#===============================================
function Comment::print_linkbar() {
var string link_separator = " ";
# Initialize array/hashes.
var string[] link_keyseq = [""];
var string{} link_url = {"" => ""};
var string{} link_caption = {"" => ""};
var string{} link_image = {"" => ""};
var string print = "";
# Gather current linkbar.
foreach var string link_key ($.link_keyseq) {
var Link link = $this->get_link($link_key);
$link_url{$link_key} = $link.url;
$link_caption{$link_key} = $link.caption;
$link_image{$link_key} = $link.icon.url;
$link_keyseq[size($link_keyseq)] = $link_key;
}
##### START CONFIGURATION. THIS IS WHERE YOU SET YOUR OPTIONS. #####
### Images used as links. If you'd rather use your own, replace $*edit_comment_img, etc. with your URLs.
$link_image = {
"edit_comment" => "$*edit_comment_img",
"delete_comment" => "$*del_comment_img",
"screen_comment" => "$*scr_comment_img",
"unscreen_comment" => "$*unscr_comment_img",
"freeze_thread" => "$*freeze_comment_img",
"unfreeze_thread" => "$*unfreeze_comment_img",
"watch_thread" => "$*track_comment_img",
"watching_parent" => "$*tracking_parent_img",
"unwatch_thread" => "$*untrack_comment_img",
};
##### END CONFIGURATION. #####
##### DO NOT EDIT ANY OF THE FOLLOWING CODE UNLESS YOU KNOW WHAT YOU'RE DOING! #####
# Loop through linkbar and add links to print var.
foreach var string link_key ($link_keyseq)
{
if($link_url{$link_key} != "")
{
$print = $print + """<a href="$link_url{$link_key}">""";
if($link_image{$link_key} != "")
{
var string id = "";
if($link_key->contains("screen"))
{
$id = "sus_";
}
if($link_key->contains("freeze"))
{
$id = "fuf_";
}
$id = "$id$.talkid";
$print = $print + """<img id="$id" src="$link_image{$link_key}" alt="$link_caption{$link_key}" title="$link_caption{$link_key}" border="0" class="comment-img" />""";
} else {
$print = $print + "$link_caption{$link_key}";
}
$print = $print + "</a>$link_separator";
}
}
# Hack off last separator.
$print = $print->substr(0, $print->length() - $link_separator->length());
# We're done! Let's print it!
print $print;
}
#===============================================
#
# PRINT COLLAPSED COMMENTS #
#
#===============================================
function EntryPage::print_comment_partial (Comment c) {
##### START CONFIGURATION. THIS IS WHERE YOU SET YOUR OPTIONS. #####
### COMMENT HEADER OPTIONS ###
# Opening and closing symbol for the expand link.
var string link_open_bracket = "(";
var string link_close_bracket = ")";
##### END CONFIGURATION. #####
##### DO NOT EDIT ANY OF THE FOLLOWING CODE UNLESS YOU KNOW WHAT YOU'RE DOING! #####
if($c.depth == 1) {
var Comment[] replies;
$replies = $c.replies;
var int count = 0;
foreach var Comment reply ($replies) {
$count ++;
}
var string head;
if($count > 0) {
$head = "Thread started by a screened user";
} else {
$head = "Comment by screened user";
}
print_entry_header($head);
print_comment_top();
}
var string content;
if($c.screened) {
$content = "<b>Screened comment</b>";
} else {
var string poster = defined $c.poster ? $c.poster->as_string() : "<i>(Anonymous)</i>";
var string subj = $c.subject != "" ? $c.subject : $*text_nosubject;
$content = "<a href=\"$c.permalink_url\">$subj</a> - $poster";
}
var Link expand_link = $c->get_link("expand_comments");
if ($c.thread_url != "" and defined $expand_link) {
$content = "$content " + "$link_open_bracket" + $c->expand_link() + "$link_close_bracket";
}
print_comment_content_top($c);
"$content";
print_comment_content_bottom();
}
#===============================================
#
# PRINT FULL COMMENTS #
#
#===============================================
function EntryPage::print_comment(Comment c) {
##### START CONFIGURATION. THIS IS WHERE YOU SET YOUR OPTIONS. #####
### THREAD TITLE OPTIONS ###
# You can edit these.
var string comment_prefix = "Comment by ";
var string thread_prefix = "Thread started by ";
var string anonymous_title = "Anonymous";
### COMMENT HEADER OPTIONS ###
# Background color for frozen comments.
# The one for screened comments must be edited above.
var Color comments_frozen_bgcolor = "#aaaaff";
# Link the userpics to the user's userpic page: true or false?
var bool allpics_link = false;
# Show the userpic keyword when hovering over the userpic: true or false?
var bool show_picword = false;
# Opening and closing symbols for the IP adress.
var string ip_open_bracket = "[";
var string ip_close_bracket = "]";
# Opening and closing symbols for the comment links.
var string link_open_bracket = "(";
var string link_close_bracket = ")";
### COMMENT LINKS OPTIONS ###
# Enter the URLs of your icons if you want to use some for the Permalink, Reply, Parent and Thread links. Otherwise, leave blank.
var string reply_img ="";
var string parent_img ="";
var string thread_img ="";
var string permalink_img ="";
##### END CONFIGURATION. #####
##### DO NOT EDIT ANY OF THE FOLLOWING CODE UNLESS YOU KNOW WHAT YOU'RE DOING! #####
var string link_separator = " ";
### Takes care of changes when screened, frozen and max comments.
# Header background color.
var string header_bgcolor = ($c.screened ? "$*comments_screened_bgcolor" : "$*comments_bgcolor");
var string reply = $*text_comment_reply;
var bool print_reply_link = true;
# If comment is frozen, change bgcolor, change link text and do not print the reply link.
if ($c.frozen) { $header_bgcolor = $comments_frozen_bgcolor; $print_reply_link = false; $reply = $*text_comment_frozen; }
# If we've reached max comments for entry, change link text and do not print the reply link.
if ($.entry.comments.maxcomments) { $reply = $*text_max_comments; $print_reply_link = false; }
### Place the anchor for the parent/thread links.
print """<a name="t$c.talkid"></a>""";
### Print the thread title if the comment's at the first level.
if ($c.depth == 1) {
print_entry_header((size $c.replies > 0 ? $thread_prefix : $comment_prefix) + (defined $c.poster ? $c.poster.name : $anonymous_title));
print_comment_top();
}
### Start the comment header section.
print_comment_content_top($c);
"""
<div style="background-color: $header_bgcolor; color: $*entry_fgcolor; margin-top: 4px;">
<table id="cmtbar$c.talkid" cellpadding="2" cellspacing="0" summary="0" width="100%" bgcolor="$header_bgcolor">""";
# Variables for comment metadata.
var bool show_userpic = (defined $c.userpic) and ($*comment_userpic_style != "off");
var bool show_ip = ($c.metadata{"poster_ip"} != "");
var bool show_subject = ($c.subject != "" or defined $c.subject_icon);
### Start the first row of the header.
"""
<tr valign="top">""";
# Build the userpic.
if ($show_userpic) {
var string alttext = $c.poster.name;
var string title = "";
var string picword = $c.metadata{"picture_keyword"};
var Image upi = $c.userpic;
var int width = $upi.width;
var int height = $upi.height;
var string userpic = "";
if ($picword != "") {
$alttext = $alttext + ": " + $picword;
}
if ($show_picword) {
$title = $alttext;
}
if ($*comment_userpic_style == "small") {
$width = $width / 2;
$height = $height / 2;
}
$userpic = """<img src="$upi.url" width="$width" height="$height" alt="$alttext" title="$title" border="0" />""";
if ($allpics_link) {
$userpic = """<a href="$*SITEROOT/allpics.bml?user=$c.poster.username">$userpic</a>""";
}
## Print the userpic.
## Start the first row.
"""
<td width="$width" align="center">$userpic</td>
<td>
<table cellpadding="2" cellspacing="0" width="100%" bgcolor="$header_bgcolor">
<tr>""";
}
# Print the username.
"""<td align="left" width="100%" style="white-space: nowrap;"><strong>$*text_comment_from </strong>""";
if (defined $c.poster) {
"""$c.poster""";
} else {
"""$*text_poster_anonymous""";
}
"""</td>""";
# Print the linkbar and the permalink.
"""<td align="right" style="white-space: nowrap">"""; $c->print_linkbar();
"""<strong>$link_separator$link_open_bracket<a href="$c.permalink_url">""";
if ($permalink_img != "")
{
"""<img src="$permalink_img" alt="$*text_permalink" title="$*text_permalink" border="0" class="comment-img" />""";
} else {
"""$*text_permalink""";
}
"""</a>$link_close_bracket</strong></td>""";
## Close the first row.
"""</tr>""";
## Start the second row.
"""<tr valign="top">""";
# Print the date (with user time zone).
"""<td align="left" style="white-space: nowrap"><strong>$*text_comment_date</strong> """;
print $c->time_display("long", "");
"""</td>""";
# If multiform is on, print the select box for the multi action selector.
if ($.multiform_on) {
"""<td align="right" style="white-space: nowrap"><label for="ljcomsel_$c.talkid">$*text_multiform_check</label>""";
$c->print_multiform_check();
"""
</td>""";
}
## Close the second row.
"""</tr>""";
## Start the third row if the IP address must be shown.
if ($show_ip) {
"""<tr valign="top">""";
"""<td colspan="2" align="left" style="white-space: nowrap"><strong>$*text_comment_ipaddr</strong> $c.metadata{"poster_ip"}</td>""";
## Close the third row.
"""</tr>""";
}
## Start the fourth row if there is a subject.
if ($show_subject) {
"""<tr valign="top">""";
"""<td colspan="2" class="commentSubject">""";
if (defined $c.subject_icon) {
"""$c.subject_icon """;
}
if ($c.subject != "") {
"""<strong>$c.subject</strong>""";
}
"""</td>""";
## Close the fourth row.
"""</tr>""";
}
if ($show_userpic) {
"""
</table>
</td>
</tr>
""";
}
### End of comment header section.
"""
</table>
</div>
""";
### Place the text.
"""<div style="margin-left: 5px;">"""; $c->print_text(); """</div>""";
### Place the Reply / Parent / Thread links.
"""<div class="commentLink">$link_open_bracket""";
if ($print_reply_link) {
if ($reply_img != "")
{
$c->print_reply_link({"reply_url" => $c.reply_url, "img_url" => $reply_img, "alt" => $reply, "title" => $reply});
} else {
$c->print_reply_link({"linktext" => $reply});
}
} else {
if (not $c.frozen) { """<a href="$c.reply_url">"""; }
if ($reply_img != "")
{
"""<img src="$reply_img" alt="$reply" title="$reply" border="0" />""";
} else {
"""$reply""";
}
if (not $c.frozen) { """</a>"""; }
}
"""$link_close_bracket""";
if ($c.parent_url != "")
{
"""$link_separator$link_open_bracket<a href="$c.parent_url">""";
if ($parent_img != "")
{
"""<img src="$parent_img" alt="$*text_comment_parent" title="$*text_comment_parent" border="0" />""";
} else {
"""$*text_comment_parent""";
}
"""</a>$link_close_bracket""";
}
if ($c.thread_url != "")
{
"""$link_separator$link_open_bracket<a href="$c.thread_url">""";
if ($thread_img != "")
{
"""<img src="$thread_img" alt="$*text_comment_thread" title="$*text_comment_thread" border="0" />""";
} else {
"""$*text_comment_thread""";
}
"""</a>$link_close_bracket""";
var Link expand_link = $c->get_link("expand_comments");
if (defined $expand_link) {
"$link_separator$link_open_bracket" + $c->expand_link() + "$link_close_bracket";
}
}
### Print the QuickReply form.
if ($print_reply_link) {
$c->print_reply_container({"class" => "quickreply_comment"});
}
"""</div>""";
### End of comment.
print_comment_content_bottom();
}