Community Post page

The Community Post page template is rendered when a user navigates to https://{yoursubdomain}.zendesk.com/hc/{locale}/community/posts/{post_id}.

Available properties

NameTypeDescription
postobjectA post object
topicobjectA topic object
comment_sortersarrayAn array of filter objects. Useful for sorting the comments. See Sorters below
current_comment_sorterobjectThe filter object of the current comment sorter
commentsarrayAn array of comment objects
promoted_articlesarrayAn array of promoted article objects
ticket_formsarrayAn array of ticket form objects
help_centerobjectA help_center object that holds information and settings about the current help center
settingsobjectA settings object with custom settings for the current theme
signed_inbooleanWhether the user is logged in or not
featured_postsarrayAn array of featured post objects
brandobjectA brand object representing the current brand
userobjectA user object representing the current user

Available helpers

You can use the following helpers in this page template. You can also use any built-in helpers, global helpers, or global advanced helpers.

NameDescription
breadcrumbsBreadcrumbs for the Community Post page. See breadcrumbs helper
paginationPagination links. See pagination helper
shareSharing elements. See share helper
subscribeA link to follow or unfollow new comments in the post. See subscribe
comment_calloutPartial rendering of the actions necessary to comment

Available forms

You can add the following form to the Community Post page template:

NameDescription
commentA form to send a new post comment

Use the form helper to insert it. See Form Helper.

Available identifiers

The following identifiers are available in this page:

IdentifierFormField(s)Description
bodycommenttextarea, wysiwygIdentifies a text field for post comments (use wysiwyg for rich content)
officialcommentlabel, checkboxIdentifies a checkbox field to mark a comment as official

Sorters

Iterating through the comment_sorters array of filter objects adds the following links to the page:

Link textAction
DateSorts by most recent comment creation time in descending order
VotesSorts by highest vote sum in descending order

Official comments are always given the highest priority and shown at the top.

Example

<nav class="sub-nav">  {{breadcrumbs}}  {{search scoped=true}}</nav>
<header class="page-header">  <span class="post-actions">    {{post.actions}}    {{#with post.ticket}}      <a href="{{url}}" target="_zendesk_lotus" class="escalation-badge">        #{{id}}      </a>    {{/with}}  </span>  <span class="post-to-community">    {{link 'new_post' role='button'}}  </span></header>
<div class="main-column">
  <article class="post {{#if post.featured}} post-featured {{/if}} {{#if post.pinned}} post-pinned {{/if}}">
    <div class="post-vote vote">      {{vote 'up' class='vote-up' selected_class='vote-voted'}}      <span class="vote-sum">{{post.vote_sum}}</span>      {{vote 'down' class='vote-down' selected_class='vote-voted'}}    </div>
    <div class="post-container">
      <div class="post-header">        <h1 title="{{post.title}}">{{post.title}}</h1>        <div class="post-info">          <div class="post-avatar {{#if post.author.agent}} post-avatar-agent {{/if}}">            <img src="{{post.author.avatar_url}}" alt="Avatar" />          </div>          <div class="post-meta">            <strong class="post-author" title="{{post.author.name}}">              {{#link 'user_profile' id=post.author.id}}                {{post.author.name}}              {{/link}}            </strong>            <div class="post-published meta">              {{date post.created_at}}            </div>          </div>          <div class="post-status">            {{#if post.status}}              <span class="post-{{post.status_dasherized}}">{{post.status_name}}</span>            {{/if}}          </div>          <div class="post-follow">{{subscribe}}</div>        </div>      </div>
      <div class="post-body markdown">{{post.details}}</div>
      <div class="post-share">{{share}}</div>
    </div>
  </article>
  <div class="comment-sorter">    {{#each comment_sorters}}      <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>    {{/each}}  </div>
  <h4 class="comment-heading">    {{t 'comments_count' count=post.comment_count}}  </h4>
  <ul id="comments" class="comment-list">    {{#each comments}}      <li id="{{anchor}}" class="comment">
        {{#if official}}          <div class="comment-bookmark"></div>        {{else}}          <div class="comment-vote vote">            {{vote 'up' class='vote-up' selected_class='vote-voted'}}            <span class="vote-sum">{{vote_sum}}</span>            {{vote 'down' class='vote-down' selected_class='vote-voted'}}          </div>        {{/if}}
        <div class="comment-avatar {{#if author.agent}} comment-avatar-agent {{/if}}">          <img src="{{author.avatar_url}}" alt="Avatar" />        </div>
        <div class="comment-container">
          <header class="comment-header">            <strong class="comment-author" title="{{author.name}}">              {{#link "user_profile" id=author.id}}                {{author.name}}              {{/link}}            </strong>            {{date created_at class='comment-published'}}            {{#if official}}              <span class="comment-official">{{t 'official_comment'}}</span>            {{/if}}            {{#if pending}}              <span class="comment-pending">{{t 'pending_approval'}}</span>            {{/if}}          </header>
          <div class="comment-body markdown">{{body}}</div>
          <footer class="comment-footer">            <span class="comment-actions">              {{#with ticket}}                <a href="{{url}}" target="_zendesk_lotus" class="escalation-badge">                  #{{id}}                </a>              {{/with}}              {{actions}}            </span>          </footer>
        </div>
      </li>    {{/each}}  </ul>
  {{pagination}}
  <div>{{comment_callout}}</div>
  {{#form 'comment' class='comment-form'}}    <div class="comment-vote"></div>    <div class="comment-avatar">      {{user_avatar class='user-avatar'}}    </div>    <div class="comment-container">      {{wysiwyg 'body'}}      <div class="comment-form-controls">        {{checkbox 'official'}}        {{label 'official'}}        {{input type='submit'}}      </div>    </div>  {{/form}}
</div>