Chad (mortorio) wrote in component_help,

No more screwy friends pages.

First off: this is based off of this tutorial and his code, so this guy gets most of the credit. I just modded the code to do what I wanted, but thought some of you might find this nifty nonetheless.

You know how every so often, somebody will post a huge picture or a long link, and it screws your friends page up by making it scroll horizontally? Yeah, that bugs me, badly.

What this code does is make any of these posts that would screw up your layout have scrollbars on them, so that you can manually scroll over in the post box at your leisure. Normal posts that wouldn't affect your layout do not have these scrollbars.

here... scroll to the second entry from the top.)

With the exception of one line, this is completely ready to copy+paste. Look for this line:

"""<td width="100%" valign="top"><div style="overflow:auto;width:660px;">""";

....and change the 660 to whatever you desire. This number basically says "if a picture / link is bigger than this, put up the scrollboxes", so base it off your own layout.

### Override the printing of entries. This affects the Recent/Day pages, Friends pages, and Entry pages.
function print_entry(Page p, Entry e, Color bgcolor, Color fgcolor, bool hide_text) {

# Print the anchor to be used in the page summary.
if ($p.view=="friends") {
"""<a name="$e.journal.username$e.itemid"></a>""";
} else { # for recent, day, entry pages.
"""<a name="item$e.itemid"></a>""";

# Print the header for the entry. It prints in the default form "[<icon> ]<time> <date>" where:
# <icon> is the security icon (ie. lock if protected, eye if private, or none if public)
# <time> is in the default time format (eg: 03:46 am)
# <date> is bold and in the "long" format (eg: November 25th, 2003)
# The ordering can be adjusted however needed, and you can also modify the formats that date and time print in.
# This can all be done in the red section below. For specifications of available formats or how to construct
# your own formats, you can see:
print_entry_header((defined $e.security_icon?"$e.security_icon   ":"")+$e.time->time_format()+" <b>"+$e.time->date_format("long")+"</b>");

"""<table cellspacing="0" cellpadding="0" border="0" width="100%"><tr>""";

# Check to see if we need to display a usericon and/or journal names, and if so, then print them
# Cases - 1. We are viewing a friends page, so we need to display icons if they exist and journal/poster names
# 2. We are viewing a recent/day/entry page, so we display only the icon if it exists and
# the user has set recent userpics on.
# The code in red is the logic to decide whether or not to show the userpics. You can modify it as you see fit.
if ($p.view=="friends" or ($*show_entry_userpic and defined $e.userpic) or $e.journal.journal_type=="C") {
# Start the table that will hold the icon and/or names
<td valign="top" style="padding-right: 8px;">
<table cellspacing="0" cellpadding="0" border="0" align="center">
<td><img src="" width="1" height="1" alt="" border="0" /></td>
# Display the icon if it exists
if (defined $e.userpic) { """
<td><img src="" width="1" height="2" alt="" border="0" /></td>
# If we are on the friends view, then we want to print the extra border around the image that have the colors
# which are custom defined. If you don't like the colors or the border on the friends view, then you can just
# remove the blue segments. By default the recent/day/entry pages have a border around the usericons. If a user
# has a non-rectangular image, this may look strange, so you can replace the 1 with a 0 to remove the border.
if ($p.view=="friends") {
""" <div style="padding-top: 3px; padding-left: 3px; padding-right: 3px; padding-bottom: 3px; background-color: """; print $bgcolor.as_string; """ ;" align="center">
<img border="1" src="$e.userpic.url" width="$e.userpic.width" height="$e.userpic.height" alt="" style="border-color: """; print $fgcolor.as_string; """ ;" />
</div> """;
""" <td align="center" class="userpic"><img border="1" src="$e.userpic.url" width="$e.userpic.width" height="$e.userpic.height" alt="" /></td> """;
"""; }
# Display the journal and possibly poster name if we are viewing the friends page or any page on a community
# This code will print the journal the entry was made on, and if the poster is different, will print the poster under it.
# I made the names centered under the image, but if you want to keep them left aligned as in the original, then
# remove the blue segments
if ($p.view=="friends" or $e.journal.journal_type=="C") { """
<td><img src="" width="1" height="2" alt="" border="0" /></td>
<td align="center" class="ljuser">$e.journal""";
if ($e.journal.username!=$e.poster.username) {"""
<div align="center" class="ljuser">$e.poster</div>""";
} """
"""; }

# Start the main entry text area
"""<td width="100%" valign="top"><div style="overflow:auto;width:660px;">""";

# If the subject is not empty, then print it followed by the line to seperate it from the entry text
# You can modify the lines in red if you want to adjust the way your subject prints, but the other lines must remain as is.
if ($e.subject!="") { """
<div class="entryHeader">$e.subject</div>
<div class="entryDash"><img src="" width="1" height="1" alt="" border="0" /></div>
<td width="1" class="medLine"><img src="" width="1" height="1" alt="" border="0" /></td>
<td width="1" class="medLine"><img src="" width="1" height="1" alt="" border="0" /></td>
<td class="entry">
"""; }

# Print the entry text.
# If you want the entry text to be after the mood and music, then you need to do two things:
# - decomment the pink lines by removing the #'s from in front of them
# - comment out the blue lines by putting a # in front of them
""" $e.text """;

# Print Mood and/or Music Fields:
# If we have a mood to print
if ($e.metadata{"mood"}!="") {
# first we need a spacer after the entry text
# and then we print the mood label, followed by a mood icon if one exists, followed by the mood text.
# If you want the mood icon to be after the mood text, then you need to change the order of the two lines in red.
"""<b> $*text_meta_mood : </b>""";
if (defined $e.mood_icon) { """ $e.mood_icon """; }
print $e.metadata{"mood"};
# if ($e.metadata{"music"}=="") { """<br/>"""; }
# If we have music to print
if ($e.metadata{"music"}!="") {
# If we didn't print a spacer because the mood was empty, then print one
if ($e.metadata{"mood"}=="") { """<br/><br/>"""; }
# then print the actual music label and the music
"""<b> $*text_meta_music : </b>"""; print $e.metadata{"music"};
# """</div>""";

# """ $e.text """;

# This is where the fun stuff is!
# Now we begin the area underneath the entry that holds the comments, link, and entry related buttons.
<table width="100%">
<td width="50%" align="left" valign="center">
<div class="entryComments"><br />
# First we print the comment links if the entry allows comments
if ($e.comments.enabled) {
<td align="center" valign="center">""";
# Then print a permanent link to the entry.
# I have this because I have my journal set to display comment links with "?nc=XX" tacked onto the end,
# and when I'm copying and pasting links, it's annoying to have there. Also, if you want a link to
# an entry that has no comments yet, the only link that's shown by default is the reply to link, and that
# that includes "?mode=reply" which is also annoying to have to remove.
# Essentially this is here for convenience. If you don't want it, remove the blue segment.
<div class="entryComments"><br /><span style="white-space:nowrap;"><b>( <a href="$e.permalink_url" class="commentLinks">$*text_permalink</a> )<b></span></div>
<td width="50%" align="right" valign="center">""";
# Then the entry related buttons
"""<div class="entryComments"><br />
# The easiest way to do this, which will work for all account types, is as follows, and will display actual buttons.
# If you'd like text instead of buttons, then remove the following line in blue, decomment the lines in pink,
# and edit as you see fit. Note that using the print_linkbar function will also add next and previous buttons to the
# Entry page (with comments), and I've reflected that in the pink lines below.

# var Link prevlink = $e->get_link("nav_prev");
# if ($p.view=="entry" and defined $prevlink and $prevlink.url!="") { """<a href="$prevlink.url"><img border='0' width="$prevlink.icon.width" height="$prevlink.icon.height" alt="" src="$prevlink.icon.url" /></a>"""; }
# var Link editlink = $e->get_link("edit_entry");
# if (defined $editlink and $editlink.url!="") { """<a href="$editlink.url"><img border='0' width="$editlink.icon.width" height="$editlink.icon.height" alt="" src="$editlink.icon.url" /></a>"""; }
# var Link memlink = $e->get_link("mem_add");
# if (defined $memlink and $memlink.url!="") { """<a href="$memlink.url"><img border='0' width="$memlink.icon.width" height="$memlink.icon.height" alt="" src="$memlink.icon.url" /></a>"""; }
# var Link nextlink = $e->get_link("nav_next");
# if ($p.view=="entry" and defined $nextlink and $nextlink.url!="") { """<a href="$nextlink.url"><img border='0' width="$nextlink.icon.width" height="$nextlink.icon.height" alt="" src="$nextlink.icon.url" /></a>"""; }

# Close off the entry text area

# End the entry component and put a spacer after it so that entry components are seperated.
""" <div><img src="" width="3" height="3" alt="" border="0"></div> """;

} # end of Function print_entry

  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened