Blog Main Page

Author: Webvanta

Default main blog page, installed as part of your initial Webvanta site. Shows the excerpts only, linking to the post page for the full version, for the most recent five posts.

The JS at the end hides the link to the archive page if there are five or fewer posts.

Customization tips:

  • To change the number of posts shown, you need to change two places: the limit number in the w:each statement, and the item_count comparison in the JS at the end.
  • To show the full posts, replace w:description with w:body, and remove the line that creates the Continue Reading link.
<h1><span>Blog</span></h1>
<hr />
<w:kb:item>
  <w:each by='published_at desc' limit='5' type='Posts' >
    <div class='blog_article clearfix'>
      <!-- enable item editing from the in-page editor  -->
      <w:kb:edit>
         <!-- 
          is the  icon field blank? if not display the thumb rendition of the icon. 
          renditions  are defined in 'design > config settings' under 'images >  image.thumbnail.settings'
        -->
        <w:unless condition='icon.blank?'><img src='<w:icon rendition="thumb" />' class='listing-thumb' alt='' /></w:unless>
        <!--  display a link to the current post. url refers to an item page. in this  case /bp/post -->
        <h3 class='article_title'><a href="<w:path  url='post' />"><w:name /></a></h3>        
         <p class='byline'>
           <!-- reference for date formats:  http://www.webvanta.com/article/23155-formatting-dates/9363-displaying-database-items  -->
          Posted <w:published_at format='%B %e,  %Y  %I:%M %p' />   
          <!--  display the author field unless it is blank -->
          <w:unless condition='author.blank?'>by <w:author /> </w:unless>    
           <w:if_comments><a href="<w:path url='post' />#comments"><w:comment_count /> comments</a> </w:if_comments>
        </p>
        <w:description />
      </w:kb:edit>
      <w:snippet name='post_categories_list'  />
      <p><a href="<w:path url='post' />">Continue  reading…</a></p>
    </div>
  </w:each>
    <p id='older_posts'  style='display:none'><a href='/blog-archive'>Older Posts</a></p>
</w:kb:item>
<!--  script to show "Older Posts" link only if there are any -->
<script type="text/javascript">
jQuery(document).ready(function(jQuery) {
  var item_count = <w:kb:resourcetype:count type='Posts' />;
  if (item_count  > 5) {
    jQuery('#older_posts').show();
  }
});
</script>