< back to Template Programming

Article Module

Reference for article module: components, data types, fields and sample code.

Last updated on 7/17/2013

Article Module Fields

The article module provides the following components for displaying articles, categories and author; and for searching articles and archives. 

Component List

Component Data
ArchiveSearchBox n/a
ArchiveSearchResult Article
ArchiveViewer Article
AuthorBrowser Author
AuthorPostBrowser Article
AuthorViewer Author
CategoryBrowser Category
CategoryPostBrowser Article
CategoryViewer Category
CommentBox n/a
CommentBrowser Comment
DateBrowser Article
MostCommentedBrowser Article
MostViewedBrowser Article
PostViewer Article
RelatedBrowser Article
SearchBox n/a
SearchResult Article
SubmitBox n/a

 

Common Fields for ItemView tab

The following fields can be used in the ItemView tab of the template html dialog editor. If the data displayed (Article, Comment, Category or Author) has the CMS field indicated, then the code will be available to use by the Component.

 

Field Name (Template) CMS Field Type Comments Options
post-link * computed text URL of Article  
section-link * computed text URL of Category Section  
gallery Photos text HTML, complete
gallery of all photos
 
photo Photos text HTML IMG tag,
first photo to display.  Ex: <img class="ui-photo? src="/pub/photo/thumb/my-photo-fitbox-500x200.jpg"/>
fitbox, cropto. Ex:
@photo|fitbox=100x60@
@photo|cropto=100x60@
@photo|index=2@
photo-lead Photos text HTML IMG tag,
first photo to display.  Ex: <img class="ui-photo? src="/pub/photo/thumb/my-photo-fitbox-500x200.jpg"/>
fitbox, cropto. Ex:
@photo-lead|fitbox=100x60@
@photo-lead|cropto=100x60@
photo-src Photos text path of the photo to display. Ex: /pub/photo/thumb/my-photo-fitbox-500x200.jpg fitbox, cropto. Ex:
@photo-src|fitbox=100x60@
@photo-src|cropto=100x60@
@photo-src|index=2@
location-address-google Map->Address text    
location-coords-google Map->Lat & Lon text    
location-link Map->Links text    
date-published-day Date Published text    
date-published-month Date Published text    
date-published-year Date Published text    
category-title Category->Headline text    
category-kicker Category->Kicker text    
category-link Category text URL  
excerpt Summary & Body text Take an excerpt from the first lines of the Summary, or Body if the Summary is empty. All HTML is stripped, this is plain text.  
excerpt-body Body text Take an excerpt from the first lines of the Body. All HTML is stripped, this is plain text.  
photo-list Photos text HTML, < UL >list of photos. Usable for javascript fitbox, cropto. Ex: @photo-list|fitbox=900x600@
video-list Photos text HTML, < UL > list of videos. Usable for javascript fitbox, cropto. Ex: @video-list|fitbox=900x600@
videoshow Photos text HTML, automated slideshow of only the videos fitbox, cropto. Ex: @videoshow|fitbox=900x600@
slideshow Photos text HTML, automated slideshow of videos and photos fitbox, cropto. Ex: @slideshow|fitbox=900x600@
photo-count Photos int Number of photos  
video-count Photos text Number of videos  
has-photo Photos int 0/1  
has-video Photos int 0/1  
item-state * computed text active/inactive => active when the article is open on the page
author-name Author->Name text    
author-title Author->Title text    
author-by-line Author->By Line text    
author-link * computed text URL of Author  
count-email Email Count int Automatically incremented by the system  
count-view View Count int Automatically incremented by the system  
count-comment * computed int    
is-restricted Private int Note: semi-computed field, uses the Paywall and the Private status of an article to decide the final value of this field.  

 

Common Fields for Before & After tabs

The following fields can be used in Before and After tabs of the template html dialog editor. If the data displayed (Article, Comment, Category or Author) has the CMS field indicated, then the code will be available to use by the Component.

Field Name (Template) CMS Field Type Comments Options
search-keyword * computed text keyword that was searched  
search-count * computed int Number of search results.  
search-category Category->Headline text title of category that was searched  
category-title Category->Headline text    
category-kicker Category->Kicker text    
category-summary Category->Summary text HTML  
category-link * computed text URL to category page  
category-slideshow Category->Photos text   fitbox, cropto. Ex:
@category-slideshow|fitbox=100x60@@category-slideshow |cropto=100x60@
category-photo-list Category->Photos text   fitbox, cropto. Ex:
@category-photo-list|fitbox=100x60@
@category-photo-list |cropto=100x60@
rss-link * computed text URL to RSS feed for this category  
category-photo Category->Photos text HTML IMG, first photo to display
<img class="ui-photo" src="/pub/photo/thumb/my-photo-fitbox-500x200.jpg"/>
fitbox, cropto, index. Ex:
@category-photo|fitbox=100x60@
@category-photo|cropto=100x60@
@category-photo|index=2@
category-photo-src Category->Photos text

path of the photo to display.
Ex: /pub/photo/thumb/my-photo-fitbox-500x200.jpg

fitbox, cropto, index. Ex:
@category-photo-src|fitbox=100x60@
@category-photo-src|cropto=100x60@
@category-photo-src|index=2@
author-name Author->Name text    
author-title Author->Title text    
author-summary Author->BIO text    
author-by-line Author->By Line text    
author-email Author->Email text    
author-photo Author->Photos text HTML, first photo to display fitbox, cropto, index. Ex:
@author-photo|fitbox=100x60@
@author-photo|cropto=100x60@
@author-photo|index=2@
author-link * computed text URL to author page  

Article Specific Fields

These fields can be used by any component that displays an article. 

Template Field CMS Field Type Comments Options
id id int    
is-featured Featured int 0/1  
date-created Date Created date   dateFormat
Ex: @date-created|dateFormat=n/d/Y@
date-updated Date Updated date   dateFormat
Ex: @date-updated|dateFormat=n/d/Y@
date-published Date Published date   dateFormat
Ex: @date-published|dateFormat=n/d/Y@
date-hide Hide Date int    
kicker Kicker text    
title Headline text    
title-hide Hide Headline int 0/1  
kicker Kicker text    
title Headline text    
hide-title Hide Headline int 0/1  
summary Summary text HTML  
body Body text HTML  
tags Option->Tags      
date-begin First Day date   dateFormat
Ex: @date-begin|dateFormat=n/d/Y@
date-end Last Day date   dateFormat
Ex: @date-end|dateFormat=n/d/Y@
count-view View Count int    
count-email Email Count int    
count-comment * computed int    
photo-gallery
is-gallery 
* computed int 0/1  
photo-position Photo Position text top/bottom/left/right  
page-dest Open in Page text    
page-dest-params With Params text    
         
location-display-by Display By text    
location-address Address text    
location-latitude Latitude decimal    
location-lat Latitude decimal    
location-longitude Longitude decimal    
location-lon Longitude decimal    
location-map Map text HTML  
location-link-list URL text HTML  
location-distance * computed decimal    
         
map-title Title text    
map-mpath Mpath text    
map-color Color text    
map-url URL text    
         
fact-show Quick Facts->Show int 0/1  
fact-title Title text    
fact-what What text HTML  
fact-where Where text HTML  
fact-when When text HTML  
fact-cost Cost text HTML  
fact-details Details text HTML  
fact-more More text HTML  
         
opt-script1 Script 1 text HTML  
opt-script2 Script 2 text HTML  
opt-script3 Script 3 text HTML  
opt-raw1 Raw Script 1 text User defined  
opt-raw2 Raw Script 2 text User defined  
opt-raw3 Raw Script 3 text User defined  
opt-raw4 Raw Script 4 text User defined  
opt-raw5 Raw Script 5 text User defined  
opt-raw6 Raw Script 6 text User defined  
opt-tag1 Tag 1 text User defined  
opt-tag2 Tag 2 text User defined  
opt-tag3 Tag 3 text User defined  
opt-tag4 Tag 4 text User defined  
opt-tag5 Tag 5 text User defined  
opt-tag6 Tag 6 text User defined  
opt-tag7 Tag 7 text User defined  
opt-tag8 Tag 8 text User defined  
opt-tag9 Tag 9 text User defined  
opt-tag10 Tag 10 text User defined  
opt-tag11 Tag 11 text User defined  
opt-tag12 Tag 12 text User defined  

Category Specific Fields

The following fields are specific only to a Category item.

Field Name (Template) CMS Field Type Comments Options
id ID int    
name Name text    
title Headline text    
kicker Kicker text    
summary Summary text HTML  
photo-position Photo Position text top/bottom/left/right  
page-section Open in Section text URL to RSS feed for this category  
page-section-params Section Params text HTML, first photo to display  
section-link * computed text URL to the section page where
this category will be displayed
category-link * computed text URL to this category landing page  
slideshow Photos text   fitbox, cropto. Ex:
@slideshow|fitbox=100x60@
@slideshow|cropto=100x60@
rss-link * computed text URL to the RSS Feed for this category articles.
total * computed int Only availabe for the component CategoryBrowser which lists all the article categories of the system, and represents the number of articles in a category

Author Specific Fields

The following are the fields specific to an Author.

Field Name (Template) CMS Field Type Comments
id ID int  
name Name text  
by-line By Line text HTML
email Email text  
phone Phone text  
title Title text  
summary Author Bio text HTML
photo-position Photo Position text top/bottom/left/right
latest-excerpt * computed text computed excerpt of last article published by this author
latest-title * computed text Headline of last article published by this author
latest-post-link * computed text URL to last article published by this author
latest-date-published * computed text Date Published of last article published by this author
latest-count-comment * computed text computed comment count on the last article published by this author

Comment Specific Fields

The following are available for an item of type Comment.

Field Name (Template) CMS Field Type Comments
id ID int  
author-name Member Display Name, or submitter name text Not related to Article->Author
author-email Member Email Address or submitter email address text Not related to Article->Author
author-website Member Email Address or submitter email address text Not related to Article->Author
comment Comment text limited HTML
date-created Date Created text date comment posted
date-updated Date Updated text date comment was updated

Article Search Box Specific Fields

The Article Search Box contains fields that catch user input. They are defined as follows:

Field Name (Template) Comments
input input textbox for search term
input-zip input textbox for supplying a zip code => will instruct the search results to sort by location
input-date-from input textbox for supplying a filtering date range
input-date-to input textbox for supplying a filtering date range
input-category input dropdown for supplying a filtering categor

Article Comment Box Specific Fields

The following fields are available only for Comment Box components:

Field Name (Template) Comments
input input textbox for search term
input-sort-by input dropdown for supplying result sorting preference
input-date-from input textbox for supplying a filtering date range
input-date-to input textbox for supplying a filtering date range
input-category input dropdown list for supplying a filtering category

Article Date Browser Specific Fields

The following fields are available only for the ArticleDateBrowser component, which lists a number of articles posted by year and creates hyperlinks to the Article Search Result component filtering for the specific date range (usually a whole year).

Field Name (Template) CMS Field Type Comments
total * computed int Total number of articles in this range
date-year Article->Date Published int year component of the date range
date Article->Date Published text first date of the date range
year link * computed text URL to search results for all articles published during the year range

Article Submit Box Specific Fields

The following fields are available for the Article Submit Box component, which allows visitors to submit articles to the website. Uses cases are forums, ticketing systems, are news report submissions.

Field Name (Template) Data Comments
input-subject HTML input textbox for supplying the Article->Headline
input-author-name HTML input textbox for supplying the Article->Submitter Name
input-author-email HTML input textbox for supplying the Article->Submitter Email
input-author-website HTML input textbox for supplying the Article->Submitter Website
input-category HTML input dropdown for supplying the Article->Category in which to file this article
captcha-input HTML input textbox for displaying the captcha text
captcha-pic HTML captcha image
captcha-enabled 0/1 indicates whether to enable captcha.
member-only 0/1 indicates whether the commenting is for member only. The template should check this value and disable the input fields
is-logged-in 0/1 indicates whether the user is logged in as a Member
message text When non empty, this is the error message describing why the article could not be posted.

Article Comment Submit Box Fields

The following fields are available for the Article Comment Submit Box component, which allows visitors to post comments on articles.

Field Name (Template) Data Comments
input-comment HTML input textbox for supplying the Comment->Body
input-comment-size HTML numerical value used to control how many characters to limit the body input by
input-author-name HTML input textbox for supplying the Comment->Name (submitter name)
input-author-website HTML input textbox for supplying the Comment->Email (submitter email)
input-author-email HTML input textbox for supplying the Comment->Website (submitter website)
captcha-input HTML input textbox for displaying the captcha text
captcha-pic HTML captcha image
captcha-enabled HTML indicates whether to enable captcha.
can-comment 0/1 indicates whether the visitor can comment. The template should check this value and disable input fields
member-only 0/1 indicates whether the commenting is for member only. The template should check this value and disable the input fields
is-logged-in 0/1 indicates whether the user is logged in as a Member
message text When non empty, this is the error message describing why the comment could not be posted.

Sample Code

The following section shows common sample code for each component type.

ArchiveSearchBox

<h1>Archive Search</h1>
<p>
 <b>Keywords:</b>
 <br/>
 <small>
   @input@
 </small>
</p>
<p>
 <b>Date Published:</b>
 <br/>
 <small>
   From @input-date-from@ to @input-date-to@
 </small>
</p>
<p>
 <b>Optional Category Search:</b>
 <br/>
 <small>
  @input-category@
 </small>
</p>
<p>
 <b>Sort results by </b> @input-sort-by@
</p>
<p>
 <button type="submit">Search Archive</button>
</p>
<script>
  $(function(){
	$(".date-input").datepicker({dateFormat: 'm/d/yy'});
  });
</script>

ArchiveSearchResult

Before tab:

<h1>Archive Search Results</h1>
<if>
  <test>@error-message@!=</test>
  <p class="error-box">@error-message@</p>
</if>
<p>Your search returned the following @search-count@ result(s):</p>

Item View tab:

<h2>
  <a href="@post-link@">@title@</a>
</h2>
<p class="date">
  @date-published@
  <if>
	<test>@category@!=</test>
	| @category@
  </if>
</p>
<p>@excerpt@</p>
<p>
  <a href="@post-link@" >View Article...</a>
</p>
<div style="clear: both;"></div>

ArchiveViewer

<h2>
  <a href="@post-link@">@title@</a>
</h2>
<p class="date">
  @date-published@
  <if>
	<test>@category@!=</test>
	| @category@
  </if>
</p>
<p>@excerpt@</p>
<p>
  <a href="@post-link@" >View Article...</a>
</p>
<div style="clear: both;"></div>

AuthorBrowser

<if>
  <test>@photo@!=</test>
  <div style="float: left; margin-right: 5px; margin-bottom: 5px;">
	@photo@
  </div>
</if>
<h2>
  <a href="@auhor-link@">@title@</a>
</h2>
@summary@

AuthorPostBrowser

<h3>
  <a href="@post-link@">@title@</a>
</h3>
<a style="float: right; margin-left: 10px;" href="@post-link@">@photo@</a>
<p>@summary@</p>
<p>
  <a href="@post-link@">Read more...</a>
</p>
<p style="clear: both;"/>

AuthorViewer

<h2>
  @title@
</h2>
<if>
  <test>@photo@!=</test>
  <div style="float: left;margin-right: 15px; margin-bottom:15px;">
	<a href="@post-link@">@photo@</a>
  </div>
</if>
@summary@
<div style="clear: both;"></div>

CategoryBrowser

<h3><a href="@category-link@">@title@</a></h3>
@summary@
<p>
  <a href="@category-link@">view articles...</a>
</p>

CategoryPostBrowser

<h3>
	<a href="@post-link@">@title@</a>
</h3>
<a style="float: right; margin-left: 10px;" href="@post-link@">@photo@</a>
@summary@
<p>
	<a href="@post-link@">Read more...</a>
</p>
<div style="clear: both;"></div>

CategoryViewer

<h1>@title@</h1>
<p>Subscribe to RSS feed: <a href="@rss-link@"><img src="admin/img/rss3.gif"/></a></p>
@summary@
@slideshow@

CommentBox

<script type="text/javascript">
$(function(){
  $("#input-comment").keyup(function(){
  var iCommentSize = @input-comment-size@;
  var len = $(this).val().length;
  var remaining = iCommentSize - len;
  if ( remaining < 0) {
		$("#input-comment-size").html(remaining+" characters remaining");
		$("#input-comment-size").css("color","red");
		$("#input-comment-submit").attr("disabled",true);
	  } else {
		$("#input-comment-size").html(remaining+" characters remaining");
		$("#input-comment-size").css("color","inherit");
		$("#input-comment-submit").removeAttr("disabled");
	  }
	});
});
</script>
<div class="ruler"></div>
<if>
<test>@can-comment@==1</test>
<script type="text/javascript">
  // hide the "please login" text.
  $(function(){
	if ($("h1.article").length > 0) {
	  $("#register-signup").css("display","none");  // article is present, display the comment text
	}
  });
</script>
<h2>Share your thoughts, post a comment to this story:</h2>
<if2>
  <test2>@is-logged-in@==1</test2>
  <test2>@member-only@==1</test2>
  <p>
	From:<br/>@input-author-name@
  </p>
  <else2></else2>
  <p>
	Your Name:<br/>@input-author-name@
  </p>
  <p>
	Your Email Address:<br/>@input-author-email@
  </p>
  <p>
	Your Website:<br/>@input-author-website@
  </p>
</if2>
<p>
  Comment:<br/>
  @input-comment@ <br/>
  <span id="input-comment-size">@input-comment-size@ characters remaining</span>
</p>
<if2>
  <test2>@captcha-enabled@!=0</test2>
  <p>
	Captcha:<br/>
	@captcha-pic@<br/>@captcha-input@
  </p>
</if2>
<p>
  <input style="padding:0 5px;" id="input-comment-submit" type="submit" value="Post Comment"/>
</p>
</if>
<div class="error-box">@message@</div>

CommentBrowser

<if>
 <test>@item-no@>1</test>
 <div class="ruler"></div>
</if>
<div>
<div class="date">@date-created@</div>
<div style="">
  <span style="font-weight: bold; font-size: 14px;">
	@author-name@
  </span>
  said:
</div>
<div style="clear: both;"></div>
</div>
<div class="inner">@comment@</div>

DateBrowser

<p>
	<a href="@post-link@">@date-year@ (@total@)</a>
</p>

MostCommentedBrowser

<p>
	<a href="@post-link@">@title@</a> (@count-comment@)
</p>

MostViewedBrowser

<p>
	<a href="@post-link@">@title@</a> (@count-comment@)
</p>

PostViewer

<h1>@title@</h1>

<if>
  <test>@date-hide@!=1</test>
  <p class="date">@date-published@</p>
</if>

<if>
 <test>@author-by-line@!=</test>
 <test>@author-email@!=</test>
  <p class="byline">
   <a href="mailto:@author-email@">
	 @author-by-line@ 
   </a>
  </p>
 <else></else>
</if>
<if>
 <test>@author-by-line@!=</test>
 <test>@author-email@==</test>
  <p class="byline">
    @author-by-line@
  </p>
</if>

<if>
 <test>@photo@!=</test>
 <div style="float: right; margin-left: 10px; margin-bottom: 10px; max-width: 350px; margin-bottom: 10px;">
   @slideshow@
 </div>
</if>

@body@

RelatedBrowser

<p>
	<a href="@post-link@">@title@</a>
</p>

SearchBox

Simple:

@input@
<input type="submit" value="Search"/>

Complex:

<h1>Advanced Article Search</h1>
<p>Our advanced search feature allows you to search our website using a combination of phrases or words, 
date ranges and within a selected category of your choice.</p>

<table>
  <tr>
	<td>Search For:</td>
	<td>@input@</td>
  </tr>
  <tr>
	<td>Published Between:</td>
	<td>@input-date-from@ To @input-date-to@</td>
  </tr>
  <tr>
	<td>Category:</td>
	<td>@input-category@</td>
  </tr>
  <tr>
	<td></td>
	<td>
	  <input type="submit" style="padding: 1px 10px;" value="Search"/>
	</td>
  </tr>

</table>
<br/>
<script type="text/javascript">
  $(function(){
	$( "#input-date-from" ).datepicker({ defaultDate: -30 });;
	$( "#input-date-to" ).datepicker();
  });
</script>

SearchResult

Before:

<h1>Search Results</h1>
<if>
  <test>
	@search-count@<=0
  </test>
  <p>Your search for '@search-keyword@' returned nothing.</p>
</if>
<if>
  <test>@search-count@==1</test>
  <p>Your search for '@search-keyword@' returned 1 result:</p>
</if>
<if>
  <test>@search-count@>1</test>
  <p>Your search for '@search-keyword@' returned @search-count@ results:</p>
</if>

ItemView:

<div class="ruler"></div>
<if>
  <test>@photo@!=</test>
  <div style="float: right; margin-left: 20px; margin-bottom: 10px;" class="photo">
    <a href="@post-link@">@photo|fitbox=200x200@</a>
  </div>
</if>
<h2>
  <a href="@post-link@">@title@</a>
</h2>
<if>
  <test>@date-hide@!=1</test>
  <p class="date">@date-published@</p>
</if>
<p>@excerpt@</p>
<p class="readmore">
  <a href="@post-link@">read more</a>
</p>
<div style="clear: both;"></div>

SubmitBox

<h2>Create a new Post:</h2>
<if>
  <test>@message@!=</test>
  <div class="error-box">
    @message@
  </div>
</if>

<p>
  Name:<br/>
  @input-author-name@
</p>
<p>
  Email:<br/>
  @input-author-email@
</p>
<p>
  Website:<br/>
  @input-author-website@
</p>
<p>
  Category:<br/>
  <select id="select-category">
    <option value="forum">Forum</option>
  </select>
  <div style="display: none;">
    @input-category@
  </div>
  <script type="text/javascript">
    $(function(){
    $("#select-category").change(function(){
      var value = $(this).val();
      $("#input-category").val(value);
    });
    $("#input-category").val('forum'); // initial value
    });
  </script>
</p>
<p>
  Subject:<br/>
  @input-subject@
</p>
<p>
  Post:<br/>
  @input-body@
</p>

<if>
  <test>@captcha-enabled@!=0</test>
  <p>
    Captcha:<br/>
    @captcha-pic@<br/>@captcha-input@
  </p>
</if>

<p>
  <input type="submit" value="Submit"/>
</p>