Transmogrified - Metadata

[okinay]

Does anyone have the secret code that will allow you to reorder meta/tags and move the mood pic to the left of the info group? I've searched through a few comms but can't find anything on this yet.

This is what I'm aiming for ...



Any help would be greatly appreciated!

Comments

[cimorene]

Sounds like what you probably need is a CSS override. Perhaps .mood_icon { float:left; } would do it? ... Though actually, that might only put it to the left of the metadata and not the tags.

[kaigou]

I don't use these but some folks on my flist do, so I looked through for how the CSS looks in realz. Slightly truncated on img line, cutting info not relevant here.

<div class="metadata">
    <ul>
        <li>
            <span class="metadata-label metadata-label-mood">how: </span>
            <img src="pissedoff.png">
            <span class="metadata-item metadata-item-mood">pissed off</span>
        </li>
    </ul>
</div>


Looks like to me what you want to work with is .metadata img, so long as it's pretty definitive that the mood-image is the only instance we'll ever trip over a case of 'img' inside the 'metadata' div. In that case, maybe:

.metadata img { float: left; }

though I'm not certain that would work, it's worth a try. Alternately, give it a position to the left of the metadata info, like so:

.metadata img { margin: 0 0 0 -40px; }

Although if someone's image is significantly larger or smaller, this may end up with overlap. The way I get around that kind of nonsense is by limiting it, like so:

.metadata img { margin: 0 0 0 -40px; max-width: 40px; }

And maybe add some padding or adjust the top/bottom margins to get it to line up neatly.

[mmmag]

I'm not sure if you still need help with this, but this is what I used.

function Entry::print_metadata()
{
# ---------------------------------------------------- CUSTOMIZATION ---------------------------------------------------- #

var bool show_loc_link = false; # set to true to display the Google Map link

var bool show_groups_link = true; # set to true to display the custom friends group link

var bool show_music_link = true; # set to false to hide the last.fm link to the artist/song pages

var bool print_table = true; # set to false to display the mood icon inline with the mood text (default FS style)

var string alignment = "left"; # set the side of the mood icon (left or right of the currents) - only if printed in table

# set the order in which you want mood, music, location, tags, security and custom friends group to appear
# any metadata you want to hide journalwide, delete from this list
var string[] metaorder = ["mood", "music", "groups", "location" ];

# optional:
# put in the URLs to the pics you want to use instead of the currents' text labels
# if you leave it blank, the text label will be used instead
var string{} metapics = { "mood" => "IMAGE URL",
"music" => "IMAGE URL",
"location" => "IMAGE URL",
"groups" => "IMAGE URL" };

# ---------------------------------------------------- CUSTOMIZATION END ---------------------------------------------------- #

var string currents = """<div class="metadata">\n"""; # here all metadata will be added to print currents container



if (size $.metadata) {


# display mood and moodicon?
var bool display_mood = false;
foreach var string moodtest ($metaorder) {
if ($moodtest == "mood") { $display_mood = true; }
}

# table and mood icon
if (defined $.mood_icon and $display_mood and $print_table) {
$currents = ($alignment == "left") ?
$currents + """<table border="0"><tr><td width="$.mood_icon.width"><img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" /></td><td>""" :
$currents + """<table border="0"><tr><td>""";
}

# step through metadata in the order the user wants
foreach var string k ($metaorder) {

var string text; # the actual value of the metadata
var string label; # the label of the metadata as set in the wizard or set-statements



# handling all other metadata
if ($k != "" and $.metadata{$k} != "") {

# metadata value
$text = $.metadata{$k};

# label as image or text
$label = clean_url($metapics{$k}) != "" ? "<img src=\"$metapics{$k}\" title=\"" + lang_metadata_title($k) + "\" alt=\"" + lang_metadata_title($k) + "\" border=0>" : lang_metadata_title($k);

# strip location/music/groups link
if ((not ($show_loc_link) and ($k == "location"))
or (not ($show_music_link) and ($k == "music"))
or (not ($show_groups_link) and ($k == "groups"))) {
$text = striphtml($text);
}

# inline mood image
if (not ($print_table) and $k == "mood" and defined $.mood_icon) {
$text = """<img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" align="middle" />""" + $text;
}

} #end metadata

# skipping empty metadata
else { continue; }

# assemble the individual currents
$currents = $currents + """<div><span class="metadata-label metadata-label-$k">$label</span> <span class="metadata-item metadata-item-$k">$text</span></div>""";

} # end foreach

# table and mood icon
if ($display_mood and defined $.mood_icon and $print_table) {
$currents = ($alignment == "left") ?
$currents + """</td></tr></table>""" :
$currents + """</td><td width="$.mood_icon.width"><img src="$.mood_icon.url" width="$.mood_icon.width" height="$.mood_icon.height" alt="$.metadata{"mood"}" title="$.metadata{"mood"}" /></td></tr></table>""";
}

# close currents container and print
println $currents + """</div>\n""";
}
}


With the following css thingies:
.metadata
.metadata-label
.metadata-label-mood
.metadata-label-music
.metadata-label-location
.metadata-label-groups