HOWTO: Pop-Ups on User Icons in Posts and Comments

[av8rmike]

UPDATE (2008/04/25): The print_comment() function in this post has been updated to allow the use of the "expand comments" link, which was previously unavailable in custom layers.

In response to this post by lollobrigida, these functions will add pop-ups or "tooltips" to entries and comments when hovering over user icons. Now more standards compliant! This behavior is the same as on entries displayed in the default site scheme, but can be customized.

This tutorial requires a Paid or Permanent account to create/edit theme layers. Follow the instructions in this post for creating a theme layer if you don't already have one, and copy in this code at step 6. This function displays the user's name in the pop-up on entries. For some reason, picture keywords are not accessible on entries, only on comments.


function print_entry(Page p, EntryLite e, Color bgcolor, Color fgcolor, bool hide_text) {
var bool showposter = false;
if (not $e.poster->equals($e.journal)) { $showposter = true; }

var Comment c;
var Entry en;
if ($e isa Comment) {
$c = $e as Comment;
} else {
$en = $e as Entry;
}

var string id = "";
if (defined $c) {
$id = " id=\"asset-$e.journal.username-$c.talkid\"";
} else {
$id = " id=\"asset-$e.journal.username-$en.itemid\"";
}

"""

""";

if (defined $en) {
if (defined $en.security_icon) {
"""$en.security_icon """;
}
}

var string subject = "";
var string datetime = "";

if ($e.subject != "") {
$subject = striphtml($e.subject);
$datetime = lang_posted_by_date_and_time($e, $showposter, true, true);
} else {
$subject = lang_posted_by_date_and_time($e, $showposter, true, false);
$datetime = lang_posted_by_date_and_time($e, $showposter, false, true);
}

""" $subject""";
"
";

"""

• $datetime

""";

var bool showuserpic = $*opt_userpic_main;
if ($p.view == "friends") {
$showuserpic = $*opt_userpic_friends;
}
if ($p.view == "entry") {
$showuserpic = $*opt_userpic_entrypage;
}

var string pic_url = """
""";
var string userpic = ($showuserpic and defined $e.userpic) ? ($pic_url + "
") : "";
if ($showuserpic) {
if ($bgcolor) {
"""
$userpic""";
} else {
"""
$userpic""";
}
}

var string posted = "";
if ($p.view == "friends") {
if (not $e.poster->equals($e.journal)) {
$posted = $posted + colored_ljuser($e.poster, $bgcolor, $fgcolor) + "
";
}
$posted = $posted + colored_ljuser($e.journal, $bgcolor, $fgcolor);
} else {
if (not $e.poster->equals($e.journal)) {
$posted = $posted + $e.poster;
}
}
print "$posted";

if ($showuserpic) {
print "";
}

$e->print_text();

"\n";
if (defined $en) {
$en->print_metadata();
}

"\n";
$p->print_reply_container({"target" => "entrycomment", "class" => "quickreply"});
$e->print_linkbar();

"""
\n\n\n""";
if ($*entry_footer != "") {
println safe $*entry_footer;
}
}

This function will show the user's name and the userpic keyword, as in the site scheme pages, in comments:

function EntryPage::print_comment(Comment e) {
var string barc = "comment-" + ($e.depth % 2 ? "odd" : "even");
var string screenbarc = "";
var string borderwidth = "";
if ($e.screened) {
$screenbarc = "style=\"border-width: 3px; border-style: dashed\"";
}
var string indent = ($e.depth - 1) * 25 + "px";
var string id = $e.dom_id ? " id=\"$e.dom_id\"" : "";

if (not $e.full) {
# Collapsed mode

"""


""";

var string subject = $e.subject != "" ? $e.subject : """$*text_nosubject""";

print safe """ $subject - """;

var string poster = (defined $e.poster ? ""+$e.poster : """$*text_poster_anonymous""");
print safe """$poster - """;
print lang_posted_by_date_and_time($e, false, true, true);

var Link expand_link = $e->get_link("expand_comments");
if ($e.thread_url != "" and defined $expand_link) {
print " "; $e->print_expand_link({ "class" => "collapsed-comment-link" });
}

"""

\n""";

if (size($e.replies) > 0) {
foreach var Comment c ($e.replies) {
$this->print_comment($c);
}
}

return;
}

"""

""";

if ($*opt_userpic_comments and defined $e.userpic) {
var string pic_keyword = ($e.metadata{"picture_keyword"} != "") ? ": " + $e.metadata{"picture_keyword"} : "";
var string name_keyword = $e.poster.name + $pic_keyword;
var string pic_url = """
""";
"""
$pic_url""";
}

var string poster = defined $e.poster ? $e.poster->as_string() : "$*text_poster_anonymous";

print safe """$poster """;
if ($e.metadata{"poster_ip"} != "") {
"(" + $e.metadata{"poster_ip"} + ") ";
}
"""wrote:
""";
var string datetime = lang_posted_by_date_and_time($e, true, true, true);
"""
$datetime""";

if (defined $e.subject_icon) {
"""
$e.subject_icon""";
}

if ($e.subject != "") {
"""
$e.subject""";
}

"""
""";
$e->print_text();
"""

""";
var string sep = """|""";
""" $*text_permalink""";

if ($e.frozen) {
print safe " $sep $*text_comment_frozen";
} else {
" $sep "; $e->print_reply_link({"linktext" => $*text_comment_reply});
}

if ($e.parent_url) { print """ $sep $*text_comment_parent"""; }
if ($e.thread_url) {
print """ $sep $*text_comment_thread""";
var Link expand_link = $e->get_link("expand_comments");
if (defined $expand_link) {
" $sep " + $e->print_expand_link();
}
}

$e->print_linkbar();

if ($this.multiform_on) {
println safe """ $*text_multiform_check""";
$e->print_multiform_check();
}

"\n\n\n\n";
if (not $e.frozen) {
$e->print_reply_container({"class" => "quickreply"});
}

if (size($e.replies) > 0) {
foreach var Comment c ($e.replies) {
$this->print_comment($c);
}
}
}Don't forget to set your theme layer to be the active one from the Choose Journal Style page by clicking on "Your Custom Layers" in the left sidebar, then selecting "Apply Theme" under the appropriate layer.