Log in

No account? Create an account

Previous Entry | Next Entry

HOWTO: Change metadata order

  • Jan. 16th, 2007 at 10:13 AM
UPDATE (3/03/08): I have updated this function as well as the other version of print_metadata() to add custom friends groups into the metadata.
I kept promising in my last HOWTO entry that I would re-work the metadata printing function for Expressive, so here it is, finally. Also as before, the code is based on kunzite1's Bloggish code here, which I've fixed and adapted for Expressive. A paid account is required, since you need to create a custom theme layer. Also, the original code had the capability to replace the meta header text with small images. I've left that functionality in, but you'll need to supply your own icons; 16x16 should be a suitable size. If you don't want icons, just remove the red text.

"Installation" is simple: Just cut and paste into your theme layer (create it if you don't already have one). To change metadata order, just change the order of the $metadata array elements where the blue text is.
Limitations: Expressive is a little different from the other layouts in the way metadata is printed into blocks. Instead of one <div> and <ul> for the entire block, there are actually two, one for location/mood/music and a separate one for tags. As it is, I chose to work in the confines of the existing CSS classes for Expressive and put the tags section after everything else. There might be a way to put the tags within the rest of the meta block, but I thought this was an acceptable solution. Unless there's a great deal of clamoring for a change, I'll just leave it this way. ;)

If you notice any problems, please let me know.

# define these properties somewhere in the layer
set text_meta_groups = "Groups:";
set text_meta_mood = "Mood:";
set text_meta_music = "Music:";
set text_meta_location = "Location:";

function Entry::print_metadata() {
    var string[] metadata    = [];
    var string{} meta_images = {};

    # define the meta order
    #   groups   : custom friends groups to which the entry is posted, if any (viewable only by owner)
    #   location : current location
    #   mood     : current mood
    #   music    : current music
    $metadata    = [ # here is where you would change the meta order

    # define the meta images
    $meta_images = {
                    "groups"          => "http://URL OF GROUPS MINI-ICON",
                    "location"        => "http://URL OF LOCATION MINI-ICON",
                    "mood"            => "http://URL OF MOOD MINI-ICON",
                    "music"           => "http://URL OF MUSIC MINI-ICON",
                    "picture_keyword" => "",
                    "tags"            => "http://URL OF TAGS MINI-ICON"

    var string   tags_header      = """Tags:""";
    var string   currents_open    = """<div class="lj-currents">\n<ul>\n""";  # html to open  currents container
    var string   currents_close   = """</ul>\n</div>\n""";                    # html to close currents container

    var string   meta_label_open  = """<li><span class="entryMetadata-label">"""; # html to open  metadata label
    var string   meta_label_close = """</span>""";                         # html to close metadata label
    var string   meta_val_open    = """<span class="entryMetadata-content">""";   # html to open  metadata value
    var string   meta_val_close   = """</span></li>""";                    # html to close 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     vanilla_loc      = false;                              # strip current location value?
    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 int      tcount           = 0;
    var string   currents         = "";
    var string   image            = "";
    var string   k                = "";
    var string   label            = "";
    var string   meta             = "";
    var string   tag              = "";
    var string   val              = "";
    var Tag      t                = new Tag;

    # if we have meta
    if($have_meta) {
        # add opening of metadata container
        $currents = $currents + $currents_open;

        # if our meta order is empty, add 'em
        if(size($metadata) < 1) {
            foreach $k ($.metadata) {
                $metadata[size($metadata)] = $k;

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

            # if we have an image
            if($image != "") {
                # add it
                $label = """<img src="$image" alt="$label" title="$label" />""";

            # add mood icon if present
            if($k == "mood") {
                if($.mood_icon) {
                    $val = " $.mood_icon " + $val;

            # if we're doing the location and we're stripping it
            if(($k == "location") and $vanilla_loc) {
                # do it
                $val = striphtml($val);

            # if we have a val
            if($val != "") {
                # build meta row
                $meta = """$meta_label_open$label$meta_label_close$meta_val_open$val$meta_val_close""";
            } else {
                # don't add row if there's missing meta
                $meta = "";

            # add meta
            $currents = $currents + $meta;

        # add closing of metadata container
        $currents = $currents + $currents_close;

    # if we have tags, put them at the end
    # this section could also go above the metadata
    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" />""";

        $currents = $currents + """$tags_cont_open$tags_label_open$tags_header$tags_label_close""";

        # cycle thru tags
        foreach $t ($.tags) {
            $tag = """$tags_item_open<a rel="tag" href="$t.url">$t.name</a>"""; # build tag
            $currents = $currents + $tag;              # add tag to val
            $tcount++;                                 # increment tag counter

            # if current count is less than the size of the tags
            if($tcount < size($.tags)) {
                # add a sep
                $currents = $currents + ", ";
            $currents = $currents + $tags_item_close;
        $currents = $currents + $tags_cont_close;

    # print metadata
    print $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.


( 22 comments — Leave a comment )
Jan. 17th, 2007 09:00 pm (UTC)
Ah, thanks a lot. This is much appreciated :D
Jan. 17th, 2007 10:55 pm (UTC)
And here I didn't think anyone was paying attention. Thanks! ;)
Jan. 22nd, 2007 11:10 am (UTC)
Thank you :)
Oct. 27th, 2008 02:59 pm (UTC)
I have what is probably a really dumb question. I installed all of this (yay), but the custom theme/layout ends up being the default Expressive with the blue flowers. How do I then apply this to Scraps Blue, for instance?

I've got myself all confused now. Thanks! :p
Oct. 28th, 2008 01:23 pm (UTC)
You have to follow the tutorial for creating a theme layer, which explains how to set different themes.
Oct. 28th, 2008 01:30 pm (UTC)
A-ha... this CSS stuff just boggles my brain :) Thanks so much!
Oct. 28th, 2008 01:34 pm (UTC)
It's one of the peculiarities with creating a layer in S2 under Expressive, which has nothing to do with CSS specifically. Most other layouts don't have that problem.
May. 19th, 2009 02:05 am (UTC)
Is there a way to add a border to the mood icon using this code?
May. 19th, 2009 02:05 pm (UTC)
You can just use CSS, you wouldn't need this theme layer code.

.entryMetadata-content img { border: 1px dashed #xxxxxx;}
should do it.
May. 19th, 2009 03:32 pm (UTC)
Nope, unfortunately what it does add the border to, is the little image that replaces the "current mood" text, not the mood icon itself. That was the first thing that came to my mind as well, but as I said - it doesn't work the way I thought it would :/.
May. 19th, 2009 04:56 pm (UTC)
OK, but it looks like you're not using this code in your style..?
May. 19th, 2009 05:32 pm (UTC)
Hmmm. I thought it was this code, is there any other Expressive metadata tutorial?... It's a pre-made layout by gossymer and she provided the theme layer which included what I thought was this code exactly... Let me show you: my theme layer.
May. 19th, 2009 05:46 pm (UTC)
Probably this code, which I for some reason did not tag as !tutorial. Anyway...
It looks like the mood icon isn't in its own HTML element, which is why CSS doesn't affect it. You can change this line:
$currents = $currents + """<table border="0"><tr><td>$.mood_icon</td><td>""";

to something like this:
$currents = $currents + """<table border="0"><tr><td><span class="mood_icon">$.mood_icon</span></td><td>""";

and add this CSS:
.mood_icon { border: 1px solid #xxxxxx;}
May. 19th, 2009 06:14 pm (UTC)
Aw, sorry for the commotion with the codes. I only found this one and thus automatically thought it must be right.

Anyways, I applied the changes you suggested and it worked (yay!)... but only partially. Because for some strange reason the border doesn't wrap around the whole mood icon, it just forms a rectangle that is the length of my mood icon, but not its height (as you can see on my layout right now). Is there anything else I can do to make it look right?...
May. 19th, 2009 06:21 pm (UTC)
I don't know, Since I can't see your entries I'm looking at your friends page (with "?show=P" so as to just see the personal entries) and the box is enclosing the mood icon properly.
May. 19th, 2009 06:28 pm (UTC)
God, I can be so dumb sometimes. Sorry about that. I'm adding you right now so that you can see what I mean :).
May. 19th, 2009 06:43 pm (UTC)
Oh, I see what's going on; it doesn't work right with the really tall images you're using. Try
.mood_icon img { border: ...}
instead of what I gave you before.
May. 19th, 2009 06:59 pm (UTC)
Whoa, I could have thought about adding the 'img' part myself (instead of bothering you again), as it seems a rather obvious thing to try out (at least now that I know it). I really am dumb, I guess ;). Anyway, it worked like charm - thank you so much ♥!
May. 19th, 2009 07:04 pm (UTC)
Nah, don't worry about it-- it wasn't intuitive to me that the first thing I suggested would look like that. You're welcome!
May. 31st, 2009 06:27 pm (UTC)
I'm hoping you might be able to help me since the layout I'm now using uses both this theme layer business for the metadata AND a custom CSS layout. The layout designer doesn't know how to do the theme layer stuff to ask there.

Okay, if you view my LJ in Firefox, everything looks fine. In IE, however, the metadata area is showing up with little red boxes for all the metadata titles.

I'm beyond clueless as to what is making that happen in IE-only let alone how to fix that. The layout designer's thought had been that the theme would need ".currents" but it looks like this theme layer has that (if I am reading what I do not understand correctly, lol).

Any thoughts? Thanks a bunch!
Jun. 2nd, 2009 08:47 pm (UTC)
I took a look at the theme layer on your journal. In the code, where it says "http://URL OF MOOD MINI-ICON", you actually have to change that to a URL to an icon. IE just isn't showing the alternate text like Firefox is. If you're not going to use an icon, remove that text, like it says in the first paragraph of the post.
Jun. 3rd, 2009 12:16 am (UTC)
Oh ok! Thanks a bunch - I'll go fix that then!
( 22 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars