WordPress.org

Support

Support » Plugins and Hacks » [Resolved] HTML5 time instead of disqus_rcw_post_time

[Resolved] HTML5 time instead of disqus_rcw_post_time

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Andrew Bartel
    Member

    @andrew-bartel

    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

    BramVanroy
    Member

    @bramvanroy

    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;}
    Plugin Author Andrew Bartel
    Member

    @andrew-bartel

    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.

    BramVanroy
    Member

    @bramvanroy

    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.

    Plugin Author Andrew Bartel
    Member

    @andrew-bartel

    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.

    BramVanroy
    Member

    @bramvanroy

    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!

    BramVanroy
    Member

    @bramvanroy

    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.

    Plugin Author Andrew Bartel
    Member

    @andrew-bartel

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Resolved] HTML5 time instead of disqus_rcw_post_time’ is closed to new replies.