Support » Fixing WordPress » Misalignment of gravatars using threaded comments

  • Resolved jcd1013


    I’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','&nbsp;&nbsp;',''); ?></small>
    			<?php comment_text() ?>
                    <div class="clear"></div>
    		/* Changes every other comment to a different class */
    		$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
    	<?php endforeach; /* end for each comment */ ?>
     <?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; ?>


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

    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') .'';
    	//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] == "") )
    		//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;
    			//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");
    	//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 = "$ljuser/profile/";
    	$userinfo = file_get_contents($url);
    	$starttoken="".str_replace("-","_",$ljuser)."'><img src='";
    		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!

Viewing 1 replies (of 1 total)
  • Never mind. I figured out that I had increased the margins around the gravatar. I knew I’d get it once I actually hit “post”

Viewing 1 replies (of 1 total)
  • The topic ‘Misalignment of gravatars using threaded comments’ is closed to new replies.