?

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",
                  "location",
                  "mood",
                  "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;
    }

    if($have_tags){
        # 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>""";
            $tcount++;

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

Comments

( 23 comments — Leave a comment )
paradise_city
Dec. 15th, 2006 09:42 pm (UTC)
That's fantastic! Thanks so much. :)

Unfortunately, there seems to be a line break before the tag header prints. Is that fixable? Or is that just me?
kunzite1
Dec. 15th, 2006 09:49 pm (UTC)
looks good, however, this entry might have happier code.

the "loc_after_mood" hack is really ugly and the new version of the code simply allows for changing the order of the meta.
av8rmike
Dec. 15th, 2006 10:00 pm (UTC)
Huh, for some reason I thought that entry was only applicable if you wanted images instead of the linkbar. I'll admit I kind of glazed over after a while. I'll take another look and revise this code when I get some time.

BTW, why isn't this community listed on the profile pages for s2styles or s2layers?
kunzite1
Dec. 15th, 2006 10:03 pm (UTC)
i pretty much overhauled the logic and improved it in several areas including the custom order idea. :D

...because it's not there yet? haven't had time to update the info pages. XD ... i'm usually good about having them friended by s2_comms though.
(Deleted comment)
(Deleted comment)
av8rmike
Dec. 25th, 2006 05:45 pm (UTC)
Yeah, I see that now. What's weird is, I thought I had corrected that by the time I posted the full thing, since most of my own entries have only tags. I may just post a re-working according to kunzite1's new version, which is much less unwieldy.
av8rmike
Dec. 25th, 2006 07:32 pm (UTC)
Alternatively, you could replace this line:
  if ( (size $.metadata > 0) ) {
with this one:
  if ( (size $.metadata > 0) or (size $.tags > 0 and $*tags_aware) ) {
(Deleted comment)
jadedthang
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.
av8rmike
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.
jadedthang
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?
av8rmike
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?
jadedthang
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.
twissie
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;
(Deleted comment)
av8rmike
Aug. 2nd, 2007 10:49 pm (UTC)
It's the same way in all styles, whether using custom functions or not, and fixed with CSS:
.asset-tags-header {font-weight: bold;}
(Deleted comment)
penguinsane
Aug. 20th, 2007 07:55 am (UTC)
I feel a little ridiculous in asking, but is there any way I can use this with an existing "default" Expressive layout? I love the "Cityscape Miami", and I would like my metadata set up like this.

Any help would be greatly appreciated! Sorry if this seems like a silly question.
av8rmike
Aug. 20th, 2007 11:49 am (UTC)
These customized functions work with all themes.
jack4will
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.
av8rmike
Apr. 17th, 2008 05:25 pm (UTC)
Follow the steps in this tutorial under "Creating a Theme Layer".
jack4will
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.
( 23 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