Post Includable

Description

The Post Includable is a Blogger Template Includable that displays a Blog Post.

Relations

Called from:

  • Blog Main

Calls:

  • Blog postQuickEdit

Structure

This includable has the following general structure:

<div class='post'>
   <a name='post-id'/>
   <h3 class='post-title'>Post Title</h3>
   <div class='post-header-line-1'/>
   <div class='post-body'>
      <p>Post Body</p>
   </div>
   <div class='post-footer'>
      <p class='post-footer-line post-footer-line-1'>Author Timestamp Comments Email Edit</p>
      <p class='post-footer-line post-footer-line-2'>Labels</p>
      <p class='post-footer-line post-footer-line-3'/>
   </div>
</div>

The post is wrapped in a html DIV-element. At the top there is an ANCHOR-element, holding the (unique) post id.
The post-title is wrapped in a H3-element.
There is an empty post header line. The default Blogger template holds no content for this line.
Below the post body there are 3 post footer lines. The 1st footer line holds authorname, post timestamp, comments-link, email-icon and quick-edit pencil. The 2nd line holds the post labels. The 3rd one is empty.
The postheader line and the 3 postfooter lines seem to be intended for the Blog Widget Customizing that can be performed from the Template Editor. You can arrange the footer-elements (author, timestamp, links, labels) by dragging them and dropping them on one of these lines (but in the TestBlog I used this did not work).

The Post Title

The Post Title is only displayed when it is there (you can create a Post without a title). If the post has its own page, there is a permalink to this post. But it is also possible that the posttitle has to link to another webpage (for example another Blog, a YouTube entry, or whatever).
If one of these links is available, the Post Title has to be displayed as a hyperlink. If there is no link, it has to be displayed as plain text.
The code is:

<b:if cond='data:post.title'>  <!-- Check if this post has a title; if so, display it -->
   <h3 class='post-title'>
   <b:if cond='data:post.link'> 
      <a expr:href='data:post.link'><data:post.title/></a>  <!-- External link -->
    <b:else/>
       <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a> <!-- Post permalink -->
       <b:else/>
          <data:post.title/>  <!-- Post title without a link -->
       </b:if>
   </b:if>
   </h3>
</b:if>

Post Header Line 1

Empty header line. Can be used for modification of this includable.

Post Body

The Post Body is wrapped inside a P-element:

<div class='post-body'>
   <p><data:post.body/></p>
   <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Post Footer Line 1

This footer line has the following structure:

<p class='post-footer-line post-footer-line-1'>
   <span class='post-author'>Authorname</span>
   <span class='post-timestamp'>Timestamp</span>
   <span class='post-comment-link'>Commentlink</span>
   <span class='post-icons'>Email Icon and QuickEdit Pencil</span>
</p>

Authorname

If the Blog Widget is configured to show the authorname, it has to be displayed, preceded by the author-label. The default author-label is "Posted by".

<span class='post-author'>
   <b:if cond='data:top.showAuthor'>
      <data:top.authorLabel/> <data:post.author/>
   </b:if>
</span>

Timestamp

If the Blog Widget is configured to show the post timestamp, it has to be displayed. If the post has its own url (meaning that it has an own item-page), the timestamp is turned into the permalink to this page.

<span class='post-timestamp'>
   <b:if cond='data:top.showTimestamp'>
      <data:top.timestampLabel/>
      <b:if cond='data:post.url'>
         <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
      </b:if>
   </b:if>
</span>

The timestamplabel is the text that is displayed in front of the timestamp. The default timestamplabel is "at".

Comment link

If the Blog Widget is configured to show a comment link, it has to be shown on the blog mainpage and on the archivepages. It displays the number of comments that belong to the post. The link points to the blogger comments page. If the blog page is an itempage, the comments are displayed below the text of the post, so the comment-link can be left out.
Furthermore, the comment-link should only be displayed if the post allows for comments to be made.

<span class='post-comment-link'>
   <b:if cond='data:blog.pageType != "item"'>  <!-- if the page is NOT an itempage, display the link -->
      <b:if cond='data:post.allowComments'>   <!-- if the post allows comment to be made, display the link -->
         <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
            <b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
            <b:else/><data:post.numComments/> <data:top.commentLabelPlural/>
            </b:if>
         </a>
      </b:if>
   </b:if>
</span>

The default comment-label is "comment", it's plural being "comments". The last if-statement in the code checks whether the single (1 comment) or plural (n comments) should be used.

Post Icons

If the Blog Widget is configured to show Post Icons, they have to be displayed. There are 2 post icons: the Email-icon and the Quick Edit icon. Displaying the Quick Edit icon is handled by a seperate includable.

<span class='post-icons'>
   <!-- email post links -->
   <b:if cond='data:post.emailPostUrl'>
      <span class='item-action'>
         <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
            <span class='email-post-icon'>&#160;</span>
         </a>
      </span>
   </b:if>
   <!-- quickedit pencil -->
   <b:include data='post' name='postQuickEdit'/>
</span>

Post Footer Line 2

This footer line displays the post labels, preceded by the Labels-label, it's default value being "Labels".

<span class='post-labels'>
   <b:if cond='data:post.labels'>     <!-- if the post has labels, display them -->
      <data:postLabelsLabel/>
      <b:loop values='data:post.labels' var='label'>   <!-- loop through all labels -->
         <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
         <b:if cond='data:label.isLast != "true"'>,</b:if>   <!-- if there is another label, display a colon as separator -->
      </b:loop>
   </b:if>
</span>

Post Footer Line 3

Empty footer line. Can be used for modification of this includable.

Styling classes

The following styling classes are used in this includable:

Class
post
post-title
post-header-line-1
post-body
post-footer
post-footer-line
post-footer-line-1
post-author
post-timestamp
timestamp-link
post-comment-link
comment-link
post-icons
item-action
email-post-icon
post-footer-line-2
post-labels
post-footer-line-3

Blogger Data Tags

The following Blogger Data Tags are used in this includable:

Data Tag Description
data:top.showAuthor 'true' if the Blog Widget is configured to show the author name
data:top.authorLabel the phrase preceding the author name (default value: 'Posted by')
data:top.showTimestamp 'true' if the Blog Widget is configured to show the timestamp
data:top.timestampLabel the phrase preceding the timestamp (default value: 'at')
data:top.commentLabel the phrase showing the number of comments, single (default value:'comment')
data:top.commentLabelPlural the phrase showing the numer of comments, plural (default value:'comments')
data:blog.pageType the type of the current page
data:post.id the unique id-number of the post
data:post.title the post title
data:post.link the url of the (external) webpage the post is pointing to
data:post.url the post permanent lnk
data:post.body the post body
data:post.timestamp the post timestamp
data:post.allowComments 'true' if making comments is allowed for this post
data:post.addCommentUrl the url of the comments form
data:post.addCommentOnclick -
data:post.numComments the number of comments on this post
data:post.emailPostUrl the url of the email form
data:post.emailPostMsg the tooltip message of the email icon link
data:post.labels the list of labels assigned to the post
data:postLabelsLabel the phrase preceding the list of labels (default value: 'Labels:')
data:label.url the url of the page listing all posts with this label
data:label.name the name of this label
data:label.isLast 'true' if this label is the last one of the list

Modifications and Hacks

There are several modifications and hacks available for this includable:

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.