?

Log in

No account? Create an account

Previous Entry | Next Entry

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.

Comments

( 15 comments — Leave a comment )
onlysayinghello
Dec. 19th, 2007 09:31 pm (UTC)
Hmmmm....
Okay the first part compiles just fine, but when I put in both? it does return this error on me :

S2 Compiler Output at Wed Dec 19 21:37:29 2007
Error compiling layer:

Compile error: line 708, column 38: Unknown function have_collapsed(Comment)
S2::NodeTerm, S2/NodeTerm.pm, 196
S2::NodeTerm, S2/NodeTerm.pm, 66
S2::NodeLogAndExpr, S2/NodeLogAndExpr.pm, 47
S2::NodeExpr, S2/NodeExpr.pm, 46
S2::NodeIfStmt, S2/NodeIfStmt.pm, 79
S2::NodeStmtBlock, S2/NodeStmtBlock.pm, 101
S2::NodeIfStmt, S2/NodeIfStmt.pm, 92
S2::NodeStmtBlock, S2/NodeStmtBlock.pm, 101
S2::NodeFunction, S2/NodeFunction.pm, 230
S2::Checker, S2/Checker.pm, 353
S2::Compiler, S2/Compiler.pm, 34


Context

704: print lang_posted_by_date_and_time($e, false, true, true);
705:
706: var Link expand_link;
707: $expand_link = $e->get_link("expand_comments");
708: if (defined $expand_link and have_collapsed($e)) {
709: """ $*text_expand_link """;
710: }
711:
712: if (size($e.replies) > 0) {



Edited at 2007-12-19 09:38 pm (UTC)
onlysayinghello
Dec. 19th, 2007 09:40 pm (UTC)
Re: Hmmmm....
But! Having the first part work should mean that it should have the name show up on the hover over the icon in the entry right? and it doesn't seem to do that for me. Of course on this journal I do have the icon over in the subject line? Would that change it at all?
av8rmike
Dec. 19th, 2007 09:41 pm (UTC)
Re: Hmmmm....
That's the new function added to Expressive's layout for thread expanding. Are you using a custom layout layer? You'll have to either switch back to the base layout or update yours accordingly.
onlysayinghello
Dec. 19th, 2007 09:44 pm (UTC)
Re: Hmmmm....
Yeah I am using a custom layout layer... *sighs and goes to the code page thingie...*
onlysayinghello
Dec. 19th, 2007 09:48 pm (UTC)
Re: Hmmmm....
Okay, so I updated my layout code, and I did all the code up in here and it doesn't seem to work for me?
av8rmike
Dec. 20th, 2007 01:59 pm (UTC)
Re: Hmmmm....
I hope you didn't go home and cry, especially seeing as I screwed this one up. Don't hate me! =(
It's in the Firefox FAQs; Apparently I'd long since forgotten that I'd installed an extension to render ALT attributes as tooltips, which is not the W3C standard behavior. That's the job of the title attribute. Compounding the problem is the fact that I used S2's Image::as_string() method in the tutorial code, and it doesn't allow title text, only alt text. So that means I should re-write the code to make it compliant with the standards, as opposed to asking you to install an extension. ;)
lollobrigida
Dec. 20th, 2007 05:03 pm (UTC)
Re: Hmmmm....
Huh. So still work in progress then and you'll let me know?

Also, in my efforts to try and move my tags up to underneath my date in the subject line there is a post in here that's tagged up and it has the person asking about moving the metadata mood/music & tags up by the date, and you replied saying it's a theme layer change, but there is no how to section, so I don't know if it's been done later and I haven't tracked it down or not. There was one post where the guy was porting a layout and I guess he worked it out, but no hints for me HA!
av8rmike
Dec. 20th, 2007 05:40 pm (UTC)
Re: Hmmmm....
Actually, I've already fixed this tutorial. It just involved writing out the <img ... /> elements instead of using built-in functions. Look for the string "userpic" to see what I did.

About the other entries, well, it could be that I didn't know how to do it at the time, didn't have time, or just plain lost track of who wanted what. =P Regardless, it's no harder than moving the user icon to the entry header, but if you want to do that, you should probably let me see your theme layer code, since your print_entry() is already well-customized.
lollobrigida
Dec. 20th, 2007 05:49 pm (UTC)
Re: Hmmmm....
Haa! What? You mean I can't just keep cut/pasting stuff in there and wait for it to explode on me?

I went ahead and put the new code in, in comments it doesn't show me the name of the user, it goes : keywordtextgoeshere, with the colon like it knows the name goes in front but it just doesn't know to put that into the hover, because it's in the alt text.

Here is my theme layer - [theme] taggs [#9829998]
style thingie is here - http://onlysayinghello.livejournal.com/?s2id=19496180
onlysayinghello
Dec. 20th, 2007 06:46 pm (UTC)
Re: Hmmmm....
Okay, so I forgot that because I was using the userpic in entry thing already to change that one line of code, so now the name shows up in the comments along with the keywords, but now? for some odd reason? It won't show up in the entries for me. I swear it was working before. Then I thought about that line you told me to replace before? and I put it in the wrong spot, so I had all the theme saved in a .txt and I repasted it and started over? and now it won't show up in the entries like it did before. Like the alt text for icons in the entries pops up as blank.
av8rmike
Dec. 20th, 2007 07:09 pm (UTC)
Re: Hmmmm....
Oops, I used the wrong variable name in one place. In EntryPage::print_comment(), find
title="$pic_keyword" and change it to
title="$name_keyword"

However, there are other problems, because you have two Page::lay_print_header_links() functions and two print_entry() functions. One of them is for moving the user icon and the other does the pop-ups. So, I'm not sure what's easier for you to fix. Maybe I should make the necessary changes and e-mail you a fresh text file rather than all this back-and-forth?
lollobrigida
Dec. 20th, 2007 08:09 pm (UTC)
Re: Hmmmm....
Awww, my poor theme layer with all of it's twins. If you don't mind tinkering with it? I'd really appreciate it, because the thing is that once I get it worked on one? I tend to transfer it to a LOT of other journals this is my test stuff out and hope it doesn't break the journal.

Have I mentioned lately how much you are like the most patient and tolerant and all around amazing person on LJ for putting up with me?? Cause you totally are.
lollobrigida
Dec. 21st, 2007 04:49 pm (UTC)
Re: Hmmmm....
Also, just an update to this code swap thing? I tried to find what you were talking about but in mine the only title=$__ part already is name_keyword, so I'm not sure what you meant, or if you were going to fix that in the updated .txt file.

Either way, I did look to find it and couldn't see it in mine.
mighty_z
Sep. 6th, 2008 09:19 am (UTC)
Is it possible to change expand link text?

When we wasn't allowed to use expanding comments in custom layers the text for the link was just written in EntryPage::print_comment function. So it was quite easy to create an option called something like text_expand_link and modify put a reference in expand link generation code. But when they made it possible to use expander in custom layers, link generation became too complicated for my understanding))

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

For example, what should I change in the code above to generate links like "show the thread"?
mighty_z
Sep. 6th, 2008 10:01 am (UTC)
SOLVED
Sorry, I haven't noticed text_comment_expand property)
( 15 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars