style_system | Mood theme picture on left, including tags: S2 code!

Okay, so. Over in this entry

tropicsbear asked about putting hir's moodtheme picture on the left of the metadata.

awakened provided a link to an entry with the same question, where

mmmag had provided some S2 code that works for all metadata except tags (because tags aren't actually metadata in the code).

awakened mentioned that having tags as well would be super cool, I agreed, tried to make it work, failed hardcore and flailed in #dreamwidth. At which point

afuna was super awesome and patient and fantastic, and fixed it all up, despite it being "a bit weird because you're combining the $currents, which is basically making a string and printing it out later with print_tags, which prints it out *right now*". And then I failed to copy-paste the code correctly, so I'm putting it up as an entry instead of yet another comment.

Was that convoluted enough? Anyway, here's some code that will put your moodtheme image on the left!

Step 1: Make a theme layer. (Tutorial for how to make and use a theme layer here!)

Step 2: Copy-paste this code into your theme layer:

##===============================
##Moodtheme image on left by mmmag (http://style-system.dreamwidth.org/15122.html?thread=88594) + add tags to the metadata, thanks to Afuna's awesome (#dreamwidth)
##===============================

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

println $currents;
$this->print_tags();


# table and mood icon
if ($display_mood and defined $.mood_icon and $print_table) {
$currents = ($alignment == "left") ?
"""</td></tr></table>""" :
"""</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""";
}
}


##===============================
## Removing the second tags box thanks to Afuna
##===============================
function Page::print_entry(Entry e)
"The meat of each new layout. Describes how each page will look. In nearly all cases, the logic and decision-making processes should come from pre-existing functions in core2, and should not get written here. If you limit the structure of the page to HTML, function calls, and attached CSS, then you will be able to pick up all of the enhancements  and accessibility requirements managed by core2."
{
    ## For most styles, this will be overridden by FriendsPage::print_entry and such.
    $e->print_wrapper_start();
    """<div class="header">\n""";
    """<div class="inner">\n""";
    $e->print_subject();
    $e->print_metatypes();
    $e->print_time();
    """</div>\n""";
    """</div>\n""";
    """<div>\n""";
    """<div class="contents">\n""";
    """<div class="inner">\n""";
    $e->print_userpic();
    $e->print_poster();
    if ($*entry_metadata_position == "top") { $e->print_metadata(); }
    $e->print_text();
    if ($*entry_metadata_position == "bottom") { $e->print_metadata(); }
    """</div>\n""";
    """</div>\n""";
    """</div>\n""";

    """<div class="footer">\n""";
    """<div class="inner">\n""";
    $this->print_entry_footer($e);
    "</div>\n</div>\n";

    $e->print_wrapper_end();

}

Step 3: Hit save and compile, and assuming you're already using the theme layer, you're done! If not, use the theme layer, as described in the much more awesome tutorial linked to in step 1.