jcd1013I'm using Wordpress Thread Comment, along with a combination of User Photo and a modified version of Gravatars and Userpics to format my comment page. Currently, I've got it set up that a "gravatar" will only show up if the user has a livejournal account account; otherwise it displays a 1px gravatar and a User Photo if the subscriber uploads one. It's crude fix (I'd love to be able to merge the two plugins so it becomes an if/then function, but I don't know enough coding to make that work), but mostly functional.
Everything is almost looking spiffy, except the first reply to a comment. Both the gravatar and the text are pushed over towards the right, as if it were tabbed.
See here for a screenshot for what I'm inadequately describing.
I have done everything that I can think of: change the float of the images, add a clear:both div, increase the padding and the margins to no avail. I do think it's more of an issue with the combination of the gravatar plugin and the threaded comment plugin, because I don't seem to have a problem with the replies if the "user photo" is the avatar displayed (see here). And I have gotten the problem to clear if I add the clear:both div right after the code for the gravatar/userphoto in the comments.php, but then all of my text is underneath the picture, instead of floating to the left.
Here's the pertinent code. I hope you can figure out where my error is.
From comments.php:
<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<?userphoto_comment_author_photo(' ', ' ', array(align => 'left'))?><?php if (function_exists('gravatar')) { ?><img src="<?php gravatar(); ?>" class="gravatar" /><?php } ?>
<cite><?php comment_author_link() ?></cite> said:
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit',' ',''); ?></small>
<?php comment_text() ?>
<div class="clear"></div>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
?>
<?php endforeach; /* end for each comment */ ?>
</ol>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.
<?php endif; ?>
<?php endif; ?>CSS:
.comment_no {padding: 10px 0; float: left; font-size: 3em; color: #ccc;}
.commentlist {padding: 10px; margin: 10 0 20px 0;}
ol.commentlist {margin-bottom: 10 !important; margin-top: 10px; padding: 10 !important;}
.commentlist li { list-style-type: none !important; padding: 10px !important; border: 1px solid #999; background: #fff url('images/gradient.png') 0 -10px repeat-x; margin: 10px 0px 20px 0px !important;}
.commentlist li:hover {background-position: 0 0;}
.commentmetadata {border-top: 1px dashed #ec5; text-align: left; font-size: 0.8em; font-weight: normal; color: #ca5; margin-top: 30px !important;}
#column1 blockquote.commented {margin-left: 5px; padding: 0 10px 10px 20px; font-style: italic; color: #963; background: url('images/blockquote.gif') 0 0 no-repeat !important;}
#column1 blockquote.commented blockquote, #column1 blockquote.commented ul, #column1 blockquote.commented ul li {background: none !important; margin: 0 !important; padding: 0 !important;}
.gravatar {float: left; padding: 5px; margin: 2px 2px 30px 5px;}
.clear {clear:both; height:1px; overflow:hidden;}From the threaded comments settings:
<div class="comment-childs<?php echo $deep%2 ? ' chalt' : ''; ?>" id="comment-[ID]"><?userphoto_comment_author_photo(' ', ' ', array(align => 'left'))?><?php if (function_exists('gravatar')) { ?><img src="<?php gravatar(); ?>" class="gravatar"/><?php } ?><cite>[author]</cite> replied:<small class="commentmetadata">[date] at [time]</small>[content]<div class="clear"></div>
</div>and lastly, the gravatar.php code
function gravatar($rating = false, $size = false, $default = true, $border = false) {
global $comment;
//If the commenter does not have either an LJ or Gravatar account, assign them this icon
$default = get_settings('siteurl') .'http://redheadsnippet.lotrinklings.net/wp-content/pix.gif';
//If they are logged in, fetch their url
$auth_url = get_comment_author_url();
//If it matches an LJ configuration, reformat the information and pass it to the next section
if ( preg_match("/http:\/\/(.*)\.livejournal\.com\/([^\/]*)\/*/",$auth_url,$m) ) {
if ($m[2]) {
$comment->comment_author = $m[2] . "@livejournal";
}
elseif ($m[1]) {
$comment->comment_author = $m[1] . "@livejournal";
}
} //endif
//If the comment author is username@anything, extract the username
$lj = explode("@", $comment->comment_author);
$ljuser = $lj[0];
//and set up a variable to contain the site url for caching the pics
$site_url = get_settings('siteurl');
if (preg_match("#http://[^/]+(/.*)#", $site_url, $m)) {
$blog_path = $_SERVER["DOCUMENT_ROOT"].$m[1];
}
//and if they are @livejournal, carry on
if ( ($lj[1] == "livejournal") || ($lj[1] == "livejournal.com") )
{
//see if there is a pic cached under that username
if (file_exists($blog_path.'/wp-content/plugins/gravatars/'.$ljuser) )
{
$out = get_settings("siteurl").'/wp-content/plugins/gravatars/'.$ljuser;
}
else
{
//if not, use the function lower down to get it and cache it
$out = getuserpic($ljuser);
// Next string caches userpic to /gravatars/ folder.
system("wget -O ". "$blog_path" ."/wp-content/plugins/gravatars/$ljuser $out");
}//endif
}//endif
//If the user is the Admin, use the admin userpic
//If you want your screen name to show up, instead of Admin, replace "Admin" with whatever you have chosen, in your Profile, under "Display name publicly as..."
elseif ($comment->comment_author == "Admin") {
$out = get_settings('siteurl') .'/wp-content/plugins/gravatars/admin.jpg';
} //end elseif
echo $out;
}
//If the user parses as an LJ user and does not have a pic cached, go get their default user icon
function getuserpic($ljuser)
{
$url = "http://users.livejournal.com/$ljuser/profile/";
$userinfo = file_get_contents($url);
$starttoken="http://www.livejournal.com/allpics.bml?user=".str_replace("-","_",$ljuser)."'><img src='";
$endtoken="'";
$start=strpos($userinfo,$starttoken)+strlen($starttoken);
if($start>strlen($starttoken))
{
$end=strpos($userinfo,$endtoken,$start);
return substr($userinfo,$start,$end-$start);
}
}I think those are the only changes that I've made. If you need any more code, let me know. I am a newbie at all of this, so more details are appreciated!
