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


Apr. 17th, 2008 04:49 pm (UTC)
Ok this is going to sound weird. I have a permanent account and I am using the Cityscape Paris. But when I went to apply the above css code into the theme layer it changed the theme to the defualt instead.

So how can I fix it? Right now I don't have the mood icon picture to the left of the text.
Apr. 17th, 2008 05:25 pm (UTC)
Follow the steps in this tutorial under "Creating a Theme Layer".
Apr. 17th, 2008 07:09 pm (UTC)
Thank you so much for that help. Just that little bit was all I needed to get it to work. Thank you again.

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars