Post List Code Sample

Here is some example code and CSS to build a post list page for the store. This is just an example and you have the flexibility to lay out the page to suit your own design.

Below is a screenshot of the layout that this code will build.  

HTML:

Below is the HTML / Branch code that would go in the Template field for the Post List content template. 

<h1>Blog</h1>
{if #postCount > 0}
  {loop items="#posts" value="post"}
    <div class="post">
      <h3><a href="{#post.url}" title="{#post.postTitle}">{#post.publishedOnDate} - {#post.postTitle}</a></h3>
      {if #post.authorName}
        <span class="author">By {#post.authorName} <br /> {#post.authorRole}</span>
      {/if}
      {if #post.abstract}
        {#post.abstract}
      {else}
        {#post.content|truncate length="300" stripTags="true"}
      {/if}
      <a href="{#post.url}" class="read-more">More...</a>
    </div>
  {/loop}
{else}
  <p>There are currently no new posts, please check back later.</p>
{/if}
{if #pagination.pageCount > 1}
  <div class="pagination">
    {if #pagination.previousUrl}
      <a class="blog-previous" href="{#pagination.previousUrl}">&laquo; Prev</a>
    {/if}
    {loop items="#pagination.pagesInRange" value="page"}
      {if #page.number != #pagination.current}
        <a href="{#page.url}" class="range" title="Go to Page {#page.number}">
          {#page.number}
        </a>
      {else}
        <span class="paginationCurrent">{#page.number}</span>
      {/if}
    {/loop}
    {if #pagination.nextUrl}
      <a class="blog-next" href="{#pagination.nextUrl}">Next &raquo;</a>
    {/if}
  </div><!--end pagination-->
{/if}