Tag Detail Code Sample

Here is some example code and CSS to build a tag detail 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 Tag Detail content template. 

<h1 class="blog">View by Tag - {#tag.tagName}</h1>
{loop items="tag.posts" value="post"}
  <div class="blog-listing">
    <div class="blog-date">
      <div class="month">{#post.publishedOnTimestamp|date format="M"}</div>
      <div class="day">{#post.publishedOnTimestamp|date format="j"}</div>
      <div class="year">{#post.publishedOnTimestamp|date format="Y"}</div>
    </div>
    <h2><a href="{#post.url}">{#post.postTitle}</a></h2>
    <div class="abstract">
      {if #post.abstract}
        {#post.abstract}
      {/else}
        {#post.content|truncate length="200"}
      {/if}
      <a href="{#post.url}">Read more...</a>
    </div>
    {if #post.tagCount > 0}
      <div class="tags-container">
        <div class="tags">
          {loop items="#post.tags" value="tag"}
            <a href="{#tag.url}">{#tag.tagName}</a>
          {/loop}
        </div>
      </div>
    {/if}
    <div class="clear"></div>
  </div>
{/loop}
{if #pagination.pageCount > 1}
  <p>
    {if #pagination.previousUrl}
      <a href="{#pagination.previousUrl}" title="Previous Page">&lt; Previous</a> |
    {/if}
    {loop items="#pagination.pagesInRange" value="page"}
      {if #page.number != #pagination.current}
        <a href="{#page.url}" title="Go to Page {#page.number}">{#page.number}</a>
      {else}
        <strong>{#page.number}</strong>
      {/if}
    {/loop}
    {if #pagination.nextUrl}
      | <a href="{#pagination.nextUrl}" title="Next Page">Next &gt;</a>
    {/if}
  </p>
{/if}