WordPress.org

Ready to get started?Download WordPress

Forums

Disqus Recent Comments Widget
[resolved] HTML5 time instead of disqus_rcw_post_time (9 posts)

  1. BramVanroy
    Member
    Posted 11 months ago #

    It would be nice to further integrate HTML5 into this plugin. Using <time> is one of thos nice ones.

    http://wordpress.org/plugins/disqus-recent-comments-widget/

  2. Andrew Bartel
    Member
    Plugin Author

    Posted 11 months ago #

    Hey Bram, if you'd like, go ahead and fork us or send us a pull request, we'd be happy to give you a shout out in the release notes. https://github.com/andrewbartel/Disqus_Recent_Comments

  3. BramVanroy
    Member
    Posted 11 months ago #

    I'm afraid I don't know how GitHub works. I can post the code here if you want.

    Line 216

    $post_time = date(
        $style_params["date_format"] ,
        strtotime($comment_obj["created_at"].'+0000')
    );
    $pub_date = $comment_obj["createdAt"]; // ADDED

    I kinda changed the whole output of a comment ($comment_html) to get some more HTML5 in there (article, rel:author, time) and to get less divs and better names for the divs:

    //create comment html
    $comment_html = '
    <article class="disqus_rcw_single">
        <div class="disqus_rcw_meta_wrapper">
            <img class="disqus_rcw_avatar" src="'.$author_avatar.'" alt="'.$author_name.'">
            <div class="disqus_rcw_meta">
                <a href="'.$author_profile.'" rel="author">'.$author_name.'</a> -
                <time datetime="'.$pub_date.'" class="disqus_rcw_post_time">'.$post_time.'</time>
            </div>
        </div>
        <div class="disqus_rcw_content_wrapper"> <a class="disqus_rcw_thread_title" href="'.$thread_link.'">'.$thread_title.'</a>
    
            <div class="disqus_rcw_content">	<a href="'.$thread_link.$comment_id.'">'.$message.'</a>
    
            </div>
        </div>
    </article>';

    And to get the basic structure of this right, I would provide the following (relatively simple) css:

    /* WordPress clear method */
    .clear:after {
    	content: "";
    	display: table;
    	clear: both;
    }
    .clear:before {
    	display: table;
    	content: "";
    }
    
    /* General */
    .disqus_rcw_meta_wrapper {margin-bottom: 7px;}
    img.disqus_rcw_avatar {
    	float: left;
    	width: 35px;
    	margin-right: 7px;
    }
    div.disqus_rcw_meta {float: left;}
    .disqus_rcw_post_time {font-size: 75%;}
    .disqus_rcw_thread_title {font-weight: bold;}
  4. Andrew Bartel
    Member
    Plugin Author

    Posted 11 months ago #

    I'll take a look at implementing that Bram, but there's no better time to learn git! Trust me you'll be happy you did.

  5. BramVanroy
    Member
    Posted 11 months ago #

    After looking at some other plug-ins who fetch list data, it seems better to output the data as a list.

    Line 191:
    $recent_comments = '<aside id="disqus_rcw_title" class="widget disqus_rcw_widget"><h3 class="widget-title">Recente reacties</h3><ul>';

    Line 235

    //create comment html
    $comment_html = '
    <li class="disqus_rcw_single">
        <div class="disqus_rcw_author_wrapper">
            <a href="'.$author_profile.'">
                <img class="disqus_rcw_avatar" src="'.$author_avatar.'" alt="'.$author_name.'">
                <span class="disqus_rcw_author">'.$author_name.'</span>
    		</a>
        </div>
        <div class="disqus_rcw_content_wrapper">
            <a class="disqus_rcw_thread_title" href="'.$thread_link.'">'.$thread_title.'</a>
            <a class="disqus_rcw_message" href="'.$thread_link.$comment_id.'">'.$message.'</a>
        </div>
        <time datetime="'.$pub_date.'" class="disqus_rcw_post_time">'.$post_time.'</time>
    </li>';

    Line 259:
    $recent_comments .= '</ul></aside>';

    CSS

    .disqus_rcw_author_wrapper {margin-bottom: 7px;}
    img.disqus_rcw_avatar {
    	float: left;
    	width: 35px;
    	margin-right: 7px;
    }
    div.disqus_rcw_author {float: left;}
    .disqus_rcw_thread_title {font-weight: bold;display:block;}
    .disqus_rcw_post_time {font-size: 75%;}

    (That's all the change I'll make!)

    And I know I should, but I'm working on some projects now.

  6. Andrew Bartel
    Member
    Plugin Author

    Posted 11 months ago #

    Hey Bram,

    I updated the plugin to support several new options and integrated your html5 suggestions as an option for markup. Can you take a look at the github: https://github.com/andrewbartel/Disqus_Recent_Comments and potentially test it on a few sites for me? Thanks much.

  7. BramVanroy
    Member
    Posted 11 months ago #

    Cheers, love the new functionalities!

    Some notes, if I may: WordPress automatically puts a widget in an "aside", so no need to call line 213:
    $recent_comments .= '<aside id="disqus_rcw_title" class="widget">';

    And delete the closing "aside-tag" on line 301.
    if($style_params['markup_style'] == 'html5') $recent_comments .= '</ul></aside>';

    I think I made that call, but apparently I was wrong. I'm sorry for that!

    I don't really like the classic markup, but I'm not going to use it any way, and also: that's how other users are used to the plugin. So maybe it's a good thing that that option is still available. Everything seems to work fine, so great job! Just getting rid of that wrapping "aside" and it's good to go!

  8. BramVanroy
    Member
    Posted 11 months ago #

    Also, you don't really need the "disqus_rcw_clear" div. You can add a css clear class to "disqus_rcw_author_wrapper" and in the css then:

    .disqus_rcw_author_wrapper.clear:after {
      content: "";
      display: table;
      clear: both;
    }

    This will only work for IE8 and up BUT because this is the HTML5 template, it isn't really something to worry about.

    Also the <br> isn't necessary, we can force this in css:
    .disqus_rcw_thread_title {display: block;}

    Which isn't that odd, because "disqus_rcw_thread_title" behaves as a title, and titles are block elements anyway.

  9. Andrew Bartel
    Member
    Plugin Author

    Posted 10 months ago #

    Hey Bram, I'm going to mark this thread as resolved with the release of 1.1. Thanks again for all your help.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags