This section provides information regarding template programming.
Understand the basics of templates, web pages, and how the CMS glues content to the templates
The LVSYS platform provides a built-in functionality for adding a light box. A lightbox is a javascript ...
Understanding the mechanics of creating a simple template
Understanding the mechanics of creating a simple template
Understanding the mechanics of creating a simple template
Reference for article module: components, data types, fields and sample code.
Reference for advertising module: components, data types, fields and sample code.
Reference for script module: components, data types, fields and sample code.
Reference for article module: components, data types, fields and sample code.
All Tasks > Web Site > Template Manager
This article provides information everyone should read to learn how to make or modify LVSYS web templates.
In its simplest form, a CMS (Content Management System) is software that organizes content into one or more databases, and presents it to visitors through web pages configured via templates.
This section defines what Content, Pages, and Templates are in the LVSYS CMS.
Content is text, articles, photos, products or events stored in a database. The Admin Panel, which is the back end of the LVSYS CMS, allows users to add, edit, or delete content.
Each type of content, such as articles, is organized in a table. Your data is organized in rows and columns, where each row represents a content item (Ex.: an article) and each column presents the item's properties, or fields, such as id, date, headline, summary, sku, title, description, etc.
Every content item has a unique ID that the system is able to reference. Some types of content can additionally be referenced by a unique name, as in Categories which are often given an internal name (Ex.: news) to make it easier for administrators to manage and lookup.
Templates are the blueprint of a web page. Each template is a file that contains page layout without content. Templates work exactly like an office building blueprint. There are designated areas for walls, windows, doors, hallways, and rooms. The architects of the building define the areas where everyone should walk, work, wait, and meet. People are the content.
Templates work the same way; they define background colors, links, text size, and the position of menus, articles, photos and text on a web page, but they don't contain content.
Templates are content placeholders.
This section discusses how to program and style these content placeholders so they display logos, articles, menus, products, product lists, search boxes, and other common website elements, in the way you wish.
Pages are assigned to a template and allow administrators to direct specific content to each content placeholder. The result will be a working web page with an accessible URL. We call these pages template pages.
The Home page, for example, is a unique template that all websites contain.
All template pages have an accessible URL, but oftentimes the URL pulls incomplete pages because the template expects some kind of additional dynamic content configuration, such as an article to display (referenced by id or name), or a category to list. Template pages are often used as the destination of a page redirect.
All template programming is executed within the Template Manager by going to All Tasks >Web Site > Template Manager.
All CSS styling you wish to use in conjunction with the templates is created in Styles by going to All Tasks > Web Site > Styles.
Next article: Creating Your First Template
The LVSYS platform provides a built-in functionality for adding a light box. A lightbox is a javascript component that opens up images in their own popup.
This article assumes the reader is familiar with HTML and Javascript.
The lightbox functionality is delivered by loading the following like of code:
<script type="text/javascript" src="/plugin/fancybox/lvsys.plugin.lightbox.1.0.1.js"></script>
This script will load the necessary components, and will attach itself to the proper html elements
You can include this file in one of the following areas:
The methods 1 or 2 above are strongly recommended. The lightbox plugin will not load any javascript if it can't find an element of id "ui-lightbox".
The third method can be used but you are increasing risks of getting the file included twice.
The lightbox plugin will harvest all images found within the element of id ui-lightbox.
Here are some common uses:
<div id="ui-lightbox">
@slideshow@
</div>
<div id="ui-lightbox">
@body@
</div>
The lightbox plugin does not support multiple lightboxes of the same page - as they will conflict with each other.
Nothing - but you may need to modify or add the CSS rule below - usually located at the top of "Default.css" in All Tasks > Web Site > CSS Stylesheet:
/* fix lightbox issues by swapping box model to content-box */
#fancybox-title-inside { overflow-y: scroll; max-height: 100px; }
#fancybox-wrap { padding: 0 !important; }
#fancybox-wrap * {box-sizing: content-box !important; -moz-box-sizing: content-box !important;}
All Tasks > Web Site > Template Manager
This document presents the guidelines for producing modern web templates.
This website uses a single font family from Google Fonts: Open Sans - 400 style for copy, 600 style for semi-bold headings and 700 style for bold regular copy.
A 960 grid is short for "960 pixels" and is a very popular web design grid. Most websites will display well in a 1024 horizontal resolution, which is the most common spread resolution in use today for desktops, laptops, i pads, tablets.
Website Element | Width in screen pixels |
---|---|
Website width (excluding background) | 960px |
Gutters (horizontal & vertical space around blocks or columns) | 20px |
1/3 Column witdh (optimal for ads) | 300px |
2/3 Column width (content) | 640px |
1/2 Column Width | 470px |
1/4 Column Width | 225px |
3/4 Column Width | 755px |
Ad Banner Name | Width x Height, in Pixels |
---|---|
Leaderboard | 468x90 |
Big Box | 300x250 |
Half Box | 300x225 |
Half Page Ad | 300x600 |
Full Banner | 468x60 |
Half Banner | 234x60 |
Wide Skyscraper | 160x600 |
Skyscraper | 120x600 |
Wide screens will display wide photos, but most screens cannot see long portrait photos taller than 900 pixels. Wide photos on smaller screens often work because photos are usually centered and less than 200 pixels on either side may be cropped.
Your messages are most powerful when they are eye catching and easy to read. Using color and contrast correctly will make your website more appealing.
Select a contrast between background and text colors that is pleasant to read. Too little or too much contrast can cause the reader to squint or make the website hard to read.
You may want to consult this website to double check your color selections. http://www.dasplankton.de/ContrastA/ -- Use AA compliance as a minimum. AAA compliance tends to be darker.
In general, it is best to avoid overlapping elements. They can cause serious challenges for programmers when creating your website and increase the likehood of your website displaying poorly on hand held devices.
Dropdown menus are useful on a desktop website, but unusable on hand held devices, so they should be avoided. If you must use dropdowns, you will need to provide an alternative layout to your developer for hand held devices.
Fancy items that appear to be floating can cause problems and should not be used. Exceptions are side buttons for social sharing and top menu "sticky" bars.
Top menu "sticky" bars should not exceed 30 to 40 pixels so they won't obstruct other content.
A responsive website reacts to smaller screens by rearranging content. You will want to consider which essential content you want visitors to see on a smaller screen and plan for it.
Usually, navigation items are shrunk and columns are moved so the entire content fits on one screen.
Your programmer can provide extensive guidance and assistance with template creation, but this article provides the basics to get you started. You can find more information on web design guidelines in our Template Programing Guide
All Tasks > Web Site > Template Manager
This guide walks through a template setup exercise that creates a simple one column template that uses a top header; a main article with slideshow; and a footer. The directions below are designed as an exercise to create a specific template, but the instructions can be followed generically to create any type of template you wish.
Adding components to the template is accomplished through the Tool Box which is available on the left side of the screen. Click Tool Box to display the tools. Click Hide to make it disappear.
Use the Tool Box to add an image to the Header section. In this exercise, we use a simple image container.
Repeat the procedure above to drag the Article Viewer component to the second block.
Repeat the procedure above to drag the Copy (Text) item to the third block.
Naming components helps you to better recognize them and assign content when you create a page that uses the template. While naming components is not required, it does help you to remember what you're supposed to assign at the web page level when you configure the template.
Top Header Image | |
Reference | toplogo |
Name | Top Logo |
Main Article | |
Reference | mainarticle |
Name | Main Article |
Bottom Footer | |
Reference | bottomtext |
Name | Bottom Text |
Reference - acts as the unique ID for the component within the template. When you set up a web page, the system associates selected content to references. Try to maintain a high level of naming consistency among your templates so you can swap templates within a page without losing your page setup. For example, if you add a reference for an image-holding header block, make sure you use that same reference for all templates that have the same kind of component. Reference text can be letters and digits only - you cannot use spaces or special characters.
Name - use for display purposes only. The Name becomes the title of the component's' tab that you see when you set up a web page using the template. Names should be descriptive, but not too long. Typically, 2 or 3 words are sufficient. Avoid generic labeling, and strive to use names that describe the intent and purpose of the component. For example "Top Nav" and "Footer Text" are more descriptive and useful than "text1" and "text2."
Styling the template requires you to provide additional information to each block, telling the web browser how it should be displayed.
LVSYS uses CSS (Cascading Style Sheets), which is a language that controls the styling of website elements. In a more advanced guide, we will provide some instruction on how CSS styles are created. For now, we will use some styles that follow LVSYS conventions, and are most likely already defined for your website.
Header - bg-header
Main Article - bg-clear
Footer - bg-footer
If these styles are not defined on your website, do not worry. For the purposes of this exercise, it is more important to understand where styles are declared. Later in the exercise, when we pull the webpage, it will become obvious whether or not the styles exist on your website.
Some components, such as images and text components, do not require coding, they can be used immediately, as is.
Other components, such as the Article Viewer, which is a plugin, do require some coding to be displayed, because an article is made of multiple items, such as title, body, photos, categories, etc. The presence of a small html button next to the settings button next to the properties icon indicates that a component can be styled. Note that there is no html button for the Text and Image blocks.
To code article layout elements:
@title@
@slideshow|cropto=600x400@
@body@
Allow some time for the template sections to refresh. At the top, your template title should display in a new rectangle. If you have followed this guide closely, you should see your title, template-test, display.
The next step is to configure a web page to use the template-test emplate.
Once you have succesfully created your page, you should be able to see it by entering your website domain name, followed by a forward slash, and then the page name in a browser address bar.
Example: http://somedomain.com/template-test-page.
We encourage you to test and experiment with template options.
All Tasks > Web Site > Template Manager
This guide walks through a template setup exercise that creates a simple one column template that uses a top header; a main article with slideshow; and a footer. The directions below are designed as an exercise to create a specific template, but the instructions can be followed generically to create any type of template you wish.
Some components, such as images and text components, do not require coding, they can be used immediately, as is.
Other components, such as the Article Viewer, which is a plugin, do require some coding to be displayed, because an article is made of multiple items, such as title, body, photos, categories, etc. The presence of a small html button next to the settings button next to the properties icon indicates that a component can be styled. Note that there is no html button for the Text and Image blocks.
To code article layout elements:
@title@
@slideshow|cropto=600x400@
@body@
All Tasks > Web Site > Template Manager
This guide walks through a template setup exercise that creates a simple one column template that uses a top header; a main article with slideshow; and a footer. The directions below are designed as an exercise to create a specific template, but the instructions can be followed generically to create any type of template you wish.
Naming components helps you to better recognize them and assign content when you create a page that uses the template. While naming components is not required, it does help you to remember what you're supposed to assign at the web page level when you configure the template.
Top Header Image | |
Reference | toplogo |
Name | Top Logo |
Main Article | |
Reference | mainarticle |
Name | Main Article |
Bottom Footer | |
Reference | bottomtext |
Name | Bottom Text |
Reference - acts as the unique ID for the component within the template. When you set up a web page, the system associates selected content to references. Try to maintain a high level of naming consistency among your templates so you can swap templates within a page without losing your page setup. For example, if you add a reference for an image-holding header block, make sure you use that same reference for all templates that have the same kind of component. Reference text can be letters and digits only - you cannot use spaces or special characters.
Name - use for display purposes only. The Name becomes the title of the component's' tab that you see when you set up a web page using the template. Names should be descriptive, but not too long. Typically, 2 or 3 words are sufficient. Avoid generic labeling, and strive to use names that describe the intent and purpose of the component. For example "Top Nav" and "Footer Text" are more descriptive and useful than "text1" and "text2."
Next section: Styling the Template Blocks
All Tasks > Web Site > Template Manager
The article module provides the following components for displaying articles, categories and author; and for searching articles and archives.
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 |
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. |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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. |
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. |
The following section shows common sample code for each component type.
<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>
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>
<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>
<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@
<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;"/>
<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>
<h3><a href="@category-link@">@title@</a></h3> @summary@ <p> <a href="@category-link@">view articles...</a> </p>
<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>
<h1>@title@</h1> <p>Subscribe to RSS feed: <a href="@rss-link@"><img src="admin/img/rss3.gif"/></a></p> @summary@ @slideshow@
<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>
<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>
<p> <a href="@post-link@">@date-year@ (@total@)</a> </p>
<p> <a href="@post-link@">@title@</a> (@count-comment@) </p>
<p> <a href="@post-link@">@title@</a> (@count-comment@) </p>
<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@
<p> <a href="@post-link@">@title@</a> </p>
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>
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>
<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>
All Tasks > Web Site > Template Manager
The advertising module provides the following components for displaying ad zones.
Component | Data |
---|---|
AdvertisingViewer | Zone |
The following fields can be used in the ItemView tab of the template html dialog editor. If the data displayed (Zone) has the CMS field indicated, then the code will be available to use by the Component.
Field Name (Template) | CMS Field | Type | Comments | Options |
---|---|---|---|---|
code | * Computed | text | HTML and Javascript that will display campaigns in the zone |
N/A
These fields can be used by any component that displays a zone.
Template Field | CMS Field | Type | Comments | Options |
---|---|---|---|---|
id | id | int |
The following section shows common sample code for each component type.
@code@
All Tasks > Web Site > Template Manager
The script module provides the following components for displaying scripts.
Component | Data |
---|---|
ScriptViewer | Script |
The following fields can be used in the ItemView tab of the template html dialog editor. If the data displayed (Script) has the CMS field indicated, then the code will be available to use by the Component.
Field Name (Template) | CMS Field | Type | Comments | Options |
---|---|---|---|---|
code | Script Code | text | HTML, Javascript, raw text. |
N/A
These fields can be used by any component that displays a script.
Template Field | CMS Field | Type | Comments | Options |
---|---|---|---|---|
id | id | int |
The following section shows common sample code for each component type.
@code@
All Tasks > Web Site > Template Manager
The form module provides the following components for displaying forms.
Component | Data |
---|---|
FormViewer | Form |
The following fields can be used in the ItemView tab of the template html dialog editor. If the data displayed (Form) has the CMS field indicated, then the code will be available to use by the Component.
The ItemView is the default view of the form, before the user submits data.
Field Name (Template) | CMS Field | Type | Comments | Options |
---|---|---|---|---|
title | Title | text | text | |
instructions | Instructions | html | html text | |
form | Form Designer | html | HTML table output |
The following fields can be used in the ErrorView tab of the template html dialog editor. If the data displayed (Form) has the CMS field indicated, then the code will be available to use by the Component.
The ErrorView is displayed after the user has submitted data and if there are errors in the data submitted: missing fields or incorrect values or invalid captcha.
Field Name (Template) | CMS Field | Type | Comments | Options |
---|---|---|---|---|
title | Title | text | text | |
instructions | Instructions | html | html text | |
form | Form Designer | html | HTML table output | |
message | *Computed | text | Error message. |
The following fields can be used in the ActionView tab of the template html dialog editor. If the data displayed (Form) has the CMS field indicated, then the code will be available to use by the Component.
The ActionView is displayed after the form has been successfully submitted.
Field Name (Template) | CMS Field | Type | Comments | Options |
---|---|---|---|---|
title | Title | text | text | |
thankyou | Thank You | html | html text |
N/A
N/A
The following section shows common sample code for each component type.
<h1>@title@</h1> @instructions@ @form@
<h1>@title@</h1> <div class="error-box">@message@</div> @instructions@ @form@
<h1>@title@</h1> <div class="success-box">@thankyou@</div>
All Tasks > Web Site > Template Manager
The directory module provides the following components for displaying directory members, deals, levels and locations; and for searching deals and members.
Component | Data |
---|---|
DealBrowser | Deal |
DealEditBox | Deal |
DealSearchBox | Deal |
DealSearchResult | Deal |
DealViewer | Deal |
InfoBox | n/a |
LevelBrowser | Level |
LevelViewer | Level |
LocationBrowser | Location |
RelatedBrowser | Member |
SearchBox | n/a |
SearchResult |
Member |
SubmitBox | Member |
Viewer | Member |
The following fields can be used in the ItemView tab of the template html dialog editor. If the data displayed (Deal, Level, Location or Member) 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 Directory Member | |
member-link | * computed | text | URL of Directory Member | |
deal-link | * computed | text | URL of Deal | |
website-redirect | * computed | text | URL of Directory Website containing Directory Analytics code to allow website click through tracking. | |
error-message | * computed | text | Error message to display for input "Box" components on error | |
info-message | * computed | text | Info message to display for input "Box" components on success | |
address-google, location-address-google, business-address-google |
Directory->Address | text | Uses Lat & Lon when indicated, otherwise, computes an address off the address fields. | |
date-created | Date Created | text | dateFormat Ex: @date-created|dateFormat=n/d/Y@ |
|
date-updated | Date Updated | text | dateFormat Ex: @date-created|dateFormat=n/d/Y@ |
|
category-title | Category->Headline | text | Current category title captured from a search query | |
category-name | Category->Name | text | Current category name captured from a search query | |
region-title | Region->Headline | text | Current region name captured from a search query | |
region-name | Region->Name | Current region name captured from a search query | ||
category-list | * computed | text | HTML list of all categories generated with the following structure: <span class="ui-directory-category-list"> <span class="ui-directory-category-list-item" refId="Category ID" refName="Category Name"> Category Title</span> [..] </span> |
|
region-list | * computed | text | HTML list of all regions generated with the following structure: <span class="ui-directory-region-list"> <span class="ui-directory-region-list-item" refId="Region ID" refName="Region Name"> Region Title</span> [..] </span> |
|
excerpt | Large Desc, Small Desc & Body | text | Large desc and small desc for a Member, Body for a Deal. | |
small-desc | Directory->Small Desc | text | ||
large-desc | Directory->Large Desc | text | ||
body | Deal-.Body | text | ||
photo | Photos | text | HTML, first photo to display |
fitbox, cropto. Ex: @category-slideshow|fitbox=100x60@ @category-slideshow |cropto=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-position | Photo Position | text | top/bottom/left/right | |
photo-list | Photos | text | HTML, < UL >list of photos. Usable for javascript | fitbox, cropto. Ex: @photo-list|fitbox=900x600@ |
video | Photos | text | HTML, first video to display | fitbox, cropto. Ex: @video-list|fitbox=900x600@ |
slideshow | Photos | text | HTML, automated slideshow of videos and photos | fitbox, cropto. Ex: @slideshow|fitbox=900x600@ |
The following fields can be used in Before and After tabs of the template html dialog editor. If the data displayed (Deal, Level, Location or Member) 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-radius | * computed | int | radius that was search | |
search-level | * computed | int | business level to search | |
search-hourly | * computed | int | indicates whether hourly deals are seached | |
search-lat | * computed | int | Lattitude searched (in connection with radius) | |
search-lon | * computed | int | Longitude searched (in connection with radius) | |
search-count | * computed | int | Number of search results. | |
is-default-page | * computed | 0/1 | indicates whether the results are displayed when landing on the page (1) or whether the results displayed are from a search (0) |
|
category-path | * computed | text | Contains the category crumbs of the current searched item | |
region-path | * computed | text | Contains the region crumbs of the current searched item | |
error-message | * computed | text | Error message to display for input "Box" components on error | |
info-message | * computed | text | Info message to display for input "Box" components on success | |
category-title | Category->Headline | text | Current category title captured from a search query | |
category-name | Category->Name | text | Current category name captured from a search query | |
region-title | Region->Headline | text | Current region name captured from a search query | |
region-name | Region->Name | Current region name captured from a search query |
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 | ||
hide-title | Hide Headline | int | 0/1 | |
date-hide | Hide Date | int | ||
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 |
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. |
The following are the fields specific to a Deal.
Field Name (Template) | CMS Field | Type | Comments |
---|---|---|---|
id | ID | int | |
date-start | Date Start | text | dateFormat Ex: @date-created|dateFormat=n/d/Y@ |
date-end | Date End | text | dateFormat Ex: @date-created|dateFormat=n/d/Y@ |
time-start-text | Time Start | text | |
time-end-text | Time End | text | |
can-edit | * computed | 0/1 | indicates whether the member owning this deal is logged in and can edit this deal listing |
has-expiration | Has Expiration | 0/1 | in connection with date start and date end above. |
is-expired | * computed | 0/1 | indicates whether the deal has expired |
is-free | Free | 0/1 | |
is-hourly | Hourly | 0/1 | in connection with time start and time end above |
youtube | Youtube | text | Youtube video associated with the deal |
display-name | Display Name | text | |
title | Title | text | |
website | Website | text | |
body | Body | text | |
tags | Tags | text | |
voucher-body | Voucher -> Body | text | |
voucher-exp-date | Voucher -> Expiration Date | text | dateFormat Ex: @date-created|dateFormat=n/d/Y@ |
voucher-view-count | Voucher -> View Count | int | |
Mapped from business directory | |||
location, business-location |
Directory->Location | text | |
location-lat, business-location-lat |
Directory->Location Lat | text | |
location-lon, business-location-lon |
Directory->Location Lon | text | |
business-name | Directory->Business Name | text | |
business-rating | Directory->Business Rating | text | |
business-phone | Directory->Business Phone | text | |
business-youtube | Directory->Business Youtube | text | |
business-email | Directory->Business Email | text | |
business-level | Directory->Business Level | int | |
business-website | Directory->Business Website | text | |
business-address-1 | Directory->Business Address | text | |
business-address-2 | Directory->Business Address2 | text | |
business-address-city | Directory->Business Address City | text | |
business-address-state | Directory->Business Address State | text | |
business-address-zip | Directory->Business Address Zip | text | |
business-address-google | Directory->Business Address Google | text | |
business-address-map-zoom | Directory->Business Map Zoom | int | overrides the defaults 15 zoom, in case of large industrial complexes where a larger zoom out is required. |
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 |
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 |
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 |
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 |
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. |
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. |
The following section shows common sample code for each component type.
<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>
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>
<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>
<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@
<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;"/>
<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>
<h3><a href="@category-link@">@title@</a></h3> @summary@ <p> <a href="@category-link@">view articles...</a> </p>
<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>
<h1>@title@</h1> <p>Subscribe to RSS feed: <a href="@rss-link@"><img src="admin/img/rss3.gif"/></a></p> @summary@ @slideshow@
<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>
<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>
<p> <a href="@post-link@">@date-year@ (@total@)</a> </p>
<h1>@title@</h1> <if> <test>@photo@!=</test> <div style="float: right; margin-left: 10px; margin-bottom: 10px; max-width: 350px; margin-bottom: 10px;"> @slideshow@ </div> </if> @body@ <if> <operator>or</operator> <test>@facebook@!=</test> <test>@twitter@!=</test> <h3>Social Media</h3> </if> <if> <test>@facebook@!=</test> <p><a href="@facebook@" title="Facebook Page" target="_blank">Facebook</a></p> </if> <if> <test>@twitter@!=</test> <p><a href="@twitter@" title="Twitter Account" target="_blank">Twitter</a></p> </if>
<p> <a href="@post-link@">@title@</a> (@count-comment@) </p>
<p> <a href="@post-link@">@title@</a> (@count-comment@) </p>
<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@
<p> <a href="@post-link@">@title@</a> </p>
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>
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>
<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>
All Tasks > Web Site > Template Manager
Global variables and global fields are template codes that can be used inside any template component.
Field Name (Template) | Type | Comments | Options |
---|---|---|---|
edit-this | text | hyperlink shortcut to the admin page where the component data can be edited. Example: Article, Event, Product, etc. | |
plugin | text | Contains the name of the current component module. Example: Article, Product, Event, Directory, etc. | |
plugin-type | text | Contains the name of the current component type. Example: Viewer, CategoryPostBrowser, et. | |
is-admin | int | 0/1 indicates whether the admin is logged in to the CMS. | |
browser-type | text | Interpreted browser type. Example: android,opera,seamonkey, netscape,firefox,chrome,safari,khtml,msie,unknown | |
browser-version | float | Interpreted browser version. Example: 4.0 |
Global variables are surroundded by two @@ signs.
The following section shows common sample code.
<h1>@title@</h1> @body@ @@edit-this@@
<if> <test>@@plugin@@==Article</test> <test>@@plugin-type@@==CategoryPostBrowser</test> <h2>@title@</h2> <p>@excerpt@</p> <a href="@post-link@">Read more</a> </test> </if> <if> <test>@@plugin@@==Script</test> <test>@@plugin-type@@==Viewer</test> @code@ </test> </if> <if> <test>@@plugin@@==Advertising</test> <test>@@plugin-type@@==Viewer</test> @code@ </test> </if>
<if> <test>@@is-admin@@==1</test> <p>ADMIN IS LOGGED IN TO CMS. <a href="help.lvsys.com" target="_blank">Access Online Help</a></p> <else></else> <p>NORMAL WEBSITE VISITOR</p> </if> <h1>@title@</h1> @body@
<if> <test>@@browser-type@@==msie</test> <test>@@browser-version@@<8</test> <p>This website is best viewed in Internet Explorer 8 or above.</p> </if> <h1>@title@</h1> @body@
Copyright (c) 2012 - 351 NE Ford McMinnville, OR 97128 - Phone: (503) 468-4890 - contact@lvsys.com - www.lvsys.com