Log in

No account? Create an account

Previous Entry | Next Entry

HOWTO: Mood icon to the left of metadata

  • Dec. 15th, 2006 at 4:04 PM
UPDATED (3/03/08): This function has been updated to add the custom friends groups to the metadata. Code is based on kunzite1's similar modifications for every other style. (Comments to this entry before the update probably won't make sense anymore.)

Since you need to override the print_metadata() function, this modification will require a custom theme layer, and therefore, a paid account.
# Change these to desired label.  Remove the colons if using images.
set text_meta_groups            = "Groups:";
set text_meta_location          = "Location:";
set text_meta_mood              = "Mood:";
set text_meta_music             = "Music:";

function Entry::print_metadata() {
    var string tags_header         = "Tags";     # text for tags header,    "Current Tags"
    var string tags_joiner         = ":";        # text for tags joiner,    ":"
    var string tags_sep            = ", ";       # text for tags separator, ", "
    var bool   show_edit_tags_link = false;      # set to true if you want edit tags link as tags header

    var string[] metadata    = [];
    var string{} meta_images = {};

    var string currents_open       = """<div class="lj-currents">\n<ul>\n"""; # html for opening of currents container
    var string currents_close      = """</ul>\n</div>\n"""; # html for closing of currents container

    var string meta_label_open     = """<li><span class="entryMetadata-label">""";   # html for opening of metadata label
    var string meta_label_close    = """</span>"""; # html for closing of metadata label
    var string meta_val_open       = """<span class="entryMetadata-content">""";     # html for opening of metadata value
    var string meta_val_close      = """</span></li>""";     # html for closing of metadata value
    # tags module has its own HTML in Expressive
    var string tags_cont_open      = """<div class="asset-tags">""";
    var string tags_cont_close     = """\n</ul>\n</div>\n""";
    var string tags_label_open     = """<h4 class="asset-tags-header page-header-4">""";
    var string tags_label_close    = """</h4>\n<ul class="asset-tags-list">\n """;
    var string tags_item_open      = """<li class="item">""";
    var string tags_item_close     = """</li>""";
    var bool have_meta             = (size($.metadata) > 0);                # do we have meta?
    var bool have_tags             = ((size($.tags) > 0) and $*tags_aware); # do we have tags?
    var bool vanilla_loc           = false;               # set to true to delinkify location
    var string label               = "";
    var string val                 = "";
    var string image               = "";
    var string currents            = "";             # make var for printing
    var Link   edit_tags           = $this->get_link("edit_tags"); # helper var to see if remote user can edit tags

    $metadata = [ "groups",
                  "music" ];
    $meta_images = { "groups"          => "http://URL TO GROUPS IMAGE",
                     "location"        => "http://URL TO LOCATION IMAGE",
                     "mood"            => "http://URL TO MOOD IMAGE",
                     "music"           => "http://URL TO MUSIC IMAGE",
                     "tags"            => "http://URL TO TAGS IMAGE" };

    if ($have_meta or $have_tags){

        if(defined $.mood_icon) {  # print the mood icon first, if present
            $currents = $currents + """<table border="0"><tr><td>$.mood_icon</td><td>""";

        $currents = $currents + $currents_open; # add opening of currents container

        foreach var string k ($metadata){  # step thru metadata
            $label = lang_metadata_title($k);                         # get label
            $image = $meta_images{$k} != "" ? $meta_images{$k} : "";  # get image
            $val   = $.metadata{$k};                                  # get value

            if($val != ""){
                if($image != ""){  # add image label, if present
                    $label = """<img src="$image" alt="$label" title="$label" />""";

                if($k == "location" and $vanilla_loc){  # if location is present and plain text
                    $val = striphtml($val);
                # add the meta
                $currents = $currents + """$meta_label_open$label$meta_label_close$meta_val_open$val$meta_val_close""";
        # close currents container here for Expressive
        $currents = $currents + $currents_close;

        # add an image for tag header, if present
        if($meta_images{"tags"} != ""){
            $label = $tags_header;
            $image = $meta_images{"tags"};
            $tags_header = """<img src="$image" alt="$label" title="$label" />""";

        var int tcount = 0; # set counter for tags
        if($edit_tags.url != "" and $show_edit_tags_link) { # if remote user can edit tags, let's give them a link
            $tags_header = """<a href="$edit_tags.url">$tags_header</a>""";

        # add text, open val container
        $currents = $currents + """$tags_cont_open$tags_label_open$tags_header$tags_joiner$tags_label_close""";

        # build tag list
        foreach var Tag t ($.tags) {
            $currents = $currents + """$tags_item_open<a rel="tag" href="$t.url">$t.name</a>""";

            # if we haven't hit the last tag, add a separator
            if ($tcount != size $.tags) { $currents = $currents + $tags_sep; }
            $currents = $currents + $tags_item_close;
        $currents = $currents + $tags_cont_close;  # close val container

    if(defined $.mood_icon) {
        $currents = $currents + """</td></tr></table>""";
    # print currents
    println "$currents";
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.

Add the following CSS to your layer or custom CSS box:
.lj-currents ul {margin-bottom: 0px;}
/* These two lines only necessary when using images as headers */
.asset-tags-header {padding-right: 0px; width:auto;}
.asset-tags-list {margin-left: 0px;}


Jan. 9th, 2007 11:12 am (UTC)
Ok. *flails* I have no experience with S2 layers, what so ever. Basically all I'm looking to do is put my location after my mood and delinkify it. That's it.

I created the custom theme layer for expressive, inserted this code, and set the values for loc_after_mood and vanilla_loc to true. Unfortunately I got no results. Is there something else I need to change or set values for? Or something I have to do in order to make the theme layer active?

P.S. I also tried kunzite1's code, but there are just so many things in there that I'm at a loss for, and I don't want the images instead of the linkbar.
Jan. 9th, 2007 01:56 pm (UTC)
The entry kunzite1 linked to above was written for Bloggish, so I don't know what will happen if you just cut 'n pasted it into Expressive. It might work, but the styling would be wrong because the class names are different. Anyway... To use your theme layer, go to Your Styles, edit the style in use (should be called "wizard-voxhtml" or something), and ensure it's using your theme layer in the drop-down box instead of one of the existing themes.
Jan. 9th, 2007 07:03 pm (UTC)
Thank you so much for your help!

Ok, I've got my layer being used (yay) and it all seems to be working fine. The only problem is that I didn't actually want the mood icon to the left of the metadata. *facepalms*

I wish I could figure all this stuff out on my own, because I know that you've got better things to do. Is there something I can change in the code to put the mood icon back to the right of the metadata where it was originally, and still have the location come after mood?
Jan. 9th, 2007 10:24 pm (UTC)
Unfortunately, putting the mood icon left of the metadata is what that function does. Changing the order of the metadata is just a side benefit. =P I was actually going to adapt kunzite1's later version for Expressive within the next few days, since it's been kind of slow here. I think that new function will be a little more configurable.

BTW, is it totally weird of me that any time I first glance at your icon, I see the rainbow coming out of the guy's nose?
Jan. 9th, 2007 10:40 pm (UTC)
I know. *chuckles* I was just kind of hoping that maybe if I rearranged something maybe it would go back to the original position and I'd still be left with the loc_after_mood but this is cool like it is for now, I appreciate the help and the coding! I'll keep an eye out for the adaptation whenever you get around to it.

And OMG no it's not weird of you. At first glance I see it too, which is part of what makes me love that icon so much lol.
Jan. 12th, 2007 03:19 pm (UTC)
Let me see if I understand you here. You are planning on adapting kunzite1's code for rearranging metadata (I'm assuming that's what it does after.. staring at it for a couple of minutes XDDD) for use with Expressive? That is absolutely excellent! O_O; I welcome your plan with open arms xD;

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars