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.

[okinay]

No, didn't move it at all. Thanks for your suggestion.

[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.

[foxfirefey]

Hrm, maybe we should add a class to that image...or an enclosing div...

[kaigou]

What, and undo my awesome hackyness? I live for hacks. That's the part about CSS that's the most fun!

Add a div? Gee, that sounds great! XP

[kaigou]

Okay, to get the image to the left and the text to the right (with note that my layout is already kinda funky anyway), I had to:

.metadata {margin: -40px 0 0 -160px;}
.metadata-label {margin: 0 0 0 90px; }
.metadata img { margin: -20px 0 0 0; float: left; }

The metadata overall sets the area, the metadata-label moves the text to the right, and the image then floats to the left. The problem is that there's not really a decent way to adjust for the fact that metadata images are inconsistent -- you can have what looks like anywhere from little 16x16 gifs up to some fairly big images. I don't know the overall limit, the range is pretty wide.

Given the variation possibilities, I would suspect that without a whole LOT of tweaking, there'll always be someone on your flist whose mood-images break the style. So probably is best to go with a new div for that -- and better yet if the div is outside the metadata ul, like prefacing it or suffixing it, just so the image can then be manipulated fully independently of the metadata:ul chunk.

[okinay]

Thanks for the suggestion ... the pic is now on the left and I tinkered with the padding but all the meta data isn't lining up. I'm a copy/paste kind of gal and when you start talking about divs and whatnot, I am clueless. I'm going to chalk this up to something that is way beyond my comprehension and hope that one day someone will code this as an option to the base layout. Until then, I'll keep playing with it.

[kaigou]

If you don't mind the text being BELOW the image, that's much easier with the existing CSS. That, I did manage to do, but it also helps if you set a max width for the metadata, that is, add:

.metadata {max-width: 100px;}

or whatever size works -- what that'll do is shove any text down because it doesn't have room to stay on the same line. Then play with the margins on the img, say:

.metadata img { margin-top: -20px; }

and play with the margins on the label to push it down, like so:

.metadata-label {margin-top: 40px; }

and that'll move things around. It's not exactly what you were looking for, but it's probably easier for you to play with and get sort of like your request, if not exactly. (I have no idea how long it takes to adjust the layouts to add extra handles for customized CSS, so figured I'd suggest this to try, as well, in the meantime.)

[okinay]

*dances around happily* Your last round of coding worked! I can't tell you HOW MUCH I appreciate your help with this. After playing around with it a bit, I got it to look like I wanted it to.

THANK YOU!

[turlough]

Oh yes, please! (Someday I'm going to try and make my heavily modified FS style DW native and that's one of the things I know I will fiddle with.)

[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