Mister Baltimore (av8rmike) wrote in s2expressive,
Mister Baltimore
av8rmike
s2expressive

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

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\"";
    }

    """
    <div$id class="post-asset asset">
      <div class="asset-inner">
        <div class="asset-header">
          <div class="asset-header-inner">
            <div class="asset-header-content">
              <div class="asset-header-content-inner">
                <h2 class="asset-name page-header2">""";

    if (defined $en) {
        if (defined $en.security_icon) {
            """<span class="lj-entry-securityicon">$en.security_icon</span> """;
        }
    }

    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);
    }

    """<a href="$e.permalink_url">$subject</a>""";
    "</h2>";

    """
          <div class="asset-meta">
            <ul class="asset-meta-list">
              <li class="item"><span><abbr class="datetime">$datetime</abbr></span></li>
            </ul>
          </div>
        </div></div></div>
        </div> <!-- end asset-header -->
        <div class="asset-content">
            <div class="asset-body">""";

    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 = """<img src="$e.userpic.url" alt="$e.poster.name" title="$e.poster.name" height="$e.userpic.height" width="$e.userpic.width" />""";
    var string userpic = ($showuserpic and defined $e.userpic) ? ($pic_url + "<br />") : "";
    if ($showuserpic) {
        if ($bgcolor) {
            """<div class="user-icon" style="border: 1px; padding: 2px; background-color: $bgcolor;">$userpic""";
        } else {
            """<div class="user-icon">$userpic""";
        }
    }

    var string posted = "";
    if ($p.view == "friends") {
        if (not $e.poster->equals($e.journal)) {
            $posted = $posted + colored_ljuser($e.poster, $bgcolor, $fgcolor) + "<br />";
        }
        $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 "</div>";
    }

    $e->print_text();

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

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

    """<div class="asset-footer"></div>\n</div>\n</div>\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

        """
        <a name='$e.anchor'></a>
        <div $id style="margin-left: $indent">
          <div class="collapsed-comment comment-inner">
            <div class="comment-meta">""";

        var string subject = $e.subject != "" ? $e.subject : """<i class="nosubject">$*text_nosubject</i>""";

        print safe """<a href="$e.permalink_url" class="collapsed-comment-link">$subject</a> <span class="separator">-</span> """;

        var string poster = (defined $e.poster ? ""+$e.poster : """<i class="noposter">$*text_poster_anonymous</i>""");
        print safe """$poster <span class="separator">-</span> """;
        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" });
        }

        """
            </div>
          </div>
        </div>\n""";

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

        return;
    }

    """<a name='$e.anchor'></a>
       <div $screenbarc $id style="margin-left: $indent">
       <div class="comment-inner $barc comment">
       <div class="comment-meta">""";

    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 = """<img src="$e.userpic.url" alt="$e.poster.name" title="$name_keyword" height="$e.userpic.height" width="$e.userpic.width" />""";
        """<div class="user-icon">$pic_url</div>""";
    }

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

    print safe """<span class="commenter-name">$poster """;
    if ($e.metadata{"poster_ip"} != "") {
        "(" + $e.metadata{"poster_ip"} + ") ";
    }
    """wrote:</span><br />""";
    var string datetime = lang_posted_by_date_and_time($e, true, true, true);
    """<div class="comment-date"><abbr class="datetime">$datetime</abbr></div>""";

    if (defined $e.subject_icon) {
        """<div class="comment-subject-icon">$e.subject_icon</div>""";
    }

    if ($e.subject != "") {
        """<div class="comment-subject">$e.subject</div>""";
    }

    """<div class="comment-body">""";
    $e->print_text();
    """</div>

    <div class="comment-links">""";
    var string sep = """<span class="separator">|</span>""";
    """<a class="permalink" href="$e.permalink_url">$*text_permalink</a>""";

    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 <a href="$e.parent_url">$*text_comment_parent</a>"""; }
    if ($e.thread_url) {
        print """ $sep <a href="$e.thread_url">$*text_comment_thread</a>""";
        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 """ <label for="ljcomsel_$e.talkid">$*text_multiform_check</label>""";
        $e->print_multiform_check();
    }

    "</div>\n</div>\n</div>\n</div>\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.
Tags: !tutorial, $acct level:paid or perm, comments, entries:user icons
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 15 comments