Reference for article module: components, data types, fields and sample code.
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. |
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 |
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>