Mister Baltimore (av8rmike) wrote in component_help,
Mister Baltimore

HOWTO: Fixing the Display of Mood Theme Images

UPDATE: As of Release #68 on August 10th, 2010, this problem has been resolved and should no longer affect users using non-custom (i.e. LJ-provided) Component themes. If you're still experiencing this problem, you're probably using a custom theme layer and should read on.

A recent code push has affected the way some layouts (including Component) display mood theme images, although it appears that this problem only affects Internet Explorer. Basically, mood themes now have to include height and width dimensions on images. The Component layout prints a string like this, expecting the dimensions:

<img src='$url' width='$width' height='$height' alt='' />

If those width and height values are missing, Firefox and other (non-IE) browsers still display the image, but IE just displays nothing. One fix is to edit the mood theme through the Admin Console if it's a custom theme, which is covered in this FAQ. If you're already using a custom theme layer or don't mind creating one, this tutorial will show you what to fix.

Creating a Theme Layer

It looks like the dearly departed maintainers of this community have taken all the tutorials with them, so I'll have to direct you to the Creating and Using a Theme Layer tutorial at the s2howto community. If you're already using a custom layer, go on to the next step.

Locating the Original Code

Because Component isn't technically "public", its code cannot be found in the Public Layers browser that's linked in the above tutorial. You'll have to go to the non-GPL ljcom repository for the Component code, which is here. At the very bottom of the page is a link "Original format", through which you can view the code without line numbers.

Editing the print_entry() Function

Find the section that starts with
function print_entry (Page p, Entry e, Color bgcolor, Color fgcolor, bool hide_text)
and copy that function (up until the next function statement) to the Clipboard, then paste into the theme layer you created in the previous step.

If you're using a layer with kunzite1's or uniquewonders's custom code, I can only provide limited support because I don't know what all their tutorials changed from the base code. You can either leave a comment or do the best you can.

Find a section that looks something like this (your indenting may vary):
if ($k == "mood" and defined $e.mood_icon)
    var Image i = $e.mood_icon;
    $val = "<img src='$i.url' width='$i.width' height='$i.height' alt='' /> $val";

Change it to look like this:
if ($k == "mood" and defined $e.mood_icon)
    $val = "$e.mood_icon $val";

Click "Save and Compile", and hopefully the layer should compile without any errors. Make sure your active style is using the theme layer you just created, or that you've selected your custom layer from the Choose Journal Style page.

Please leave a comment if there are any problems.
Tags: !tutorial, *account level: paid/perm, /topic-code: s2, /topic-entry: metadata, browser: ie, function: print_entry
  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened