The ease of development for this version of the contest application comes from the pre-built sub templates. These sub templates use various FM components, HTML and CSS to create dynamic and customizable code. We've built several sub templates based off popular and often reused features.
You can use these sub templates in the same way that you would use any other component on our platform. By changing the variable values for a sub-template you change the way the sub template renders the components, HTML and CSS that it contains. Simply take the sample code in the examples below or use the Builder Tool to customize the sub template until you get the desired result.
Another great reason to use sub templates is because you can build your own and edit what we've already built. If you find you are using the same snippet of code across multiple pages or even multiple projects, its easy to create a sub template of that code and have a central place to add and edit features (Sub templates do not exist across multiple applications or vhosts. You'll have to copy and paste your code from one application to another).
Unlike most <fm> tags, <fm:Include> requires all the variables to be sent even if they are empty. If you encounter an error that reads "Template variable not found: varname, on line x", it's because the <fm:Include> is missing a variable.
Below you will find a list of all of the pre-built sub-templates we offer and all of the the possible combinations you can use to display your content.
The sub_ads template is used to render ad space inside of the application. You can choose to display a bigbox, leader or text based ad. To control what is actually displayed in the ad space you need to edit the contents of the sub-template itself.
| Include code example |
|---|
| <fm:Include name="sub_ad" type="bigbox" /> |
| variable | required | default | possible values | Description |
|---|---|---|---|---|
| type | Required | null | 'leader', 'bigbox', 'text' |
The sub-comments template is used to render a list of comments on the page. This template can be used to show comments on a specific media item by providing an appropriate media id or show all comments by providing a media id of 0.
| Include code example |
|---|
| <fm:Include name="sub_comments" mediaid="{$$media_id}" filetypes="1,2,4" page="{$$get.page}" pagesize="5" sort="upload ASC" showPager="true" /> |
| Variable | Required | Default | Possible Values | Notes |
|---|---|---|---|---|
| mediaid | Required | 0 or a valid media id | Grabs the comments for the specified media item. The comment list is mainly used on the entry page so {$$media_id} will normally used. However, if you'd like to list comments elsewhere, you can use the value '0' to grab all comments in the vhost | |
| filetypes | Optional | null | '1', '2', '3', '4' | Allows you to filter by a specific filetype. 1=image, 2=video, 3=audio, 4=text. You can supply multiple values by separating them with comma's, ex. '1,2' will return only images and videos. |
| page | Optional | null | Int | If you are going to display a pager you should all have 'page="{$$get.page}"' to make sure the pager gets the correct page number. |
| pagesize | Optional | 30 | Int, 1 to 200 | The number of media-items per page. A maximum page size of 200 is enforced, attempting to set this to anything greater will cause the page size to revert to 200. |
| sort | Optional | upload DESC | 'upload DESC', 'upload ASC', 'rating DESC', 'rating ASC', 'approvedcomments DESC', 'approvedcomments ASC', 'notdeniedcomments DESC, 'notdeniedcomments ASC', 'votecount DESC', 'votecount ASC'. | Multiple sort fields may be specified separated by commas, eg: sort="commentcount DESC, upload DESC" |
| showPager | Optional | null | 'true' or 'false' | The value 'true' will show a pager, any other value will not display anything |
| report | Optional | null | 'true' or 'false' | The value 'true' will show a report link, that can be used to report the comment to the site admin. Any other value will not display anything |
The sub_gallery template is used to render a list of media items and is probably the most common template that is used. By changing the values of the columns and thumbtype attributes you can completely change the layout of your site without editing any CSS or HTML.
| Include code example |
|---|
| <fm:Include name="sub_gallery" columns="two" pagesize="12" thumbtype="wide" transcode="12" sort="{$$get.sort}" showPager="true" page="{$$get.page}" collection="{$$get.collection}" channel="{$$get.channel}" user="" startTime="" query="" /> |
| variable | required | default | possible values | notes |
|---|---|---|---|---|
| columns | Optional | one | 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' | This sets the CSS class that determines the width of each thumbnail. If you specify 'two', each thumbnail will be 50% wide, 'three' is 33% wide, four is 25%, etc |
| pagesize | Optional | 30 | Int, 1 to 200 | The number of media-items per page. A maximum page size of 200 is enforced, attempting to set this to anything greater will cause the page size to revert to 200. |
| thumbtype | Optional | wide | 'wide', 'tall', 'image' | Determines the layout of the thumbnails. All thumbs use the same HTML, only the CSS changes. |
| transcode | Optional | 12 | 11, 12 or any custom transcoder ID | |
| sort | Optional | upload DESC | 'upload DESC', 'upload ASC', 'rating DESC', 'rating ASC', 'approvedcomments DESC', 'approvedcomments ASC', 'notdeniedcomments DESC, 'notdeniedcomments ASC', 'votecount DESC', 'votecount ASC'. | Multiple sort fields may be specified separated by commas, eg: sort="commentcount DESC, upload DESC" |
| showPager | Optional | null | 'true' or null | The value 'true' will show a pager, any value other will not display anything |
| page | Optional | null | Int | If you are going to display a pager you should all have 'page="{$$get.page}"' to make sure the pager gets the correct page number. |
| collection | Optional | null | a valid collection ID | |
| channel | Optional | null | a valid channel ID or channel short name | |
| user | Optional | null | a valid user ID | |
| startTime | Optional | null | Usually you should use YYYY-MM-DD HH:MM:SS format, but things like 'yesterday' will also work. | This attribute filters by the upload date. No media before the startTime will be returned. |
| query | Optional | null | Any phrase you would like to search for. | Media will return if the title, description or tags match the phrase. |
| filetypes | Optional | null | '1', '2', '3', '4' | Allows you to filter by a specific filetype. 1=image, 2=video, 3=audio, 4= ext. You can supply multiple values by separating them with comma's, ex. '1,2' will return only images and videos. |
The sub_inputfields template is a easy way to turn on and off various popular register form fields. If you want to add custom form fields, like metadata, feel free to edit the sub template.
| Include code example |
|---|
| <fm:Include name="sub_inputfields" email="true" password="true" username="false" firstname="true" lastname="true" address="true" city="false" province="false" country="false" postalcode="false" birthday="false" gender="false" phone="false" cellphone="false" captcha="true" newsletter="true" rules="true" map="true"" /> |
The sub_jsgallery template renders a media gallery in a tabbed interface. This template allows you to display media based on differing criteria inside of the same space on any page. You might for example display the Most Recent, Most Commented and Most Viewed media under each tab.
| Include code example |
|---|
| <fm:Include name="sub_jsgallery" id="galleryone" tab1="Land" tab2="Space" tab3="Water" tab1sort="upload DESC" tab2sort="hits DESC" tab3sort="{%var:moderationComments}comments DESC" tab1channel="592" tab2channel="596" tab3channel="594" tab1collection="" tab2collection="" tab3collection="" tab1filetypes="" tab2filetypes="" tab3filetypes="" columns="two" pagesize="6" thumbtype="wide" transcode="12" /> |
| variable(s) | required | default | possible values | notes |
|---|---|---|---|---|
| id | Required | string | A unique identifier that is used to create the gallery. If you want to have multiple JavaScript galleries on a single page, you'll need to set different ids. | |
| tab1 tab2 tab3 | Required | string | The name of the tab. If there is no value passed the tab and the tab contents are not displayed. | |
| tab1sort tab2sort tab3sort | Optional | upload DESC | 'upload DESC', 'upload ASC', 'rating DESC', 'rating ASC', 'approvedcomments DESC', 'approvedcomments ASC', 'notdeniedcomments DESC, 'notdeniedcomments ASC', 'votecount DESC', 'votecount ASC'. | Multiple sort fields may be specified separated by commas, eg: sort="commentcount DESC, upload DESC" |
| tab1channel tab2channel tab3channel | Optional | null | a valid channel ID, or channel short name | |
| tab1collection tab2collection tab3collection | Optional | null | a valid collection ID | |
| tab1filetypes tab2filetypes tab3filetypes | Optional | null | '1', '2', '3', '4' | Allows you to filter by a specific filetype. 1=image, 2=video, 3=audio, 4= ext. You can supply multiple values by separating them with comma's, ex. '1,2' will return only images and videos. |
| columns | Optional | one | 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' | This sets the CSS class that determines the width of each thumbnail. If you specify 'two', each thumbnail will be 50% wide, 'three' is 33% wide, four is 25%, etc |
| pagesize | Optional | 30 | Int, 1 to 200 | The number of media-items per page. A maximum page size of 200 is enforced, attempting to set this to anything greater will cause the page size to revert to 200. |
| thumbtype | Optional | wide | 'wide', 'tall', 'image' | Determines the layout of the thumbnails. All thumbs use the same HTML, only the CSS changes. |
| transcode | Optional | 12 | 11, 12 or any custom transcoder ID |
The sub_map template renders media based on its geographical location using Google Maps technology. In order to see media on a map you'll need to make sure that geographic data was captured when the file was uploaded to Media Factory. To learn more see our geo location documentation.
| Include code example |
|---|
| <fm:Include name="sub_map" lat="51N" long="92W" zoom="3" width="100%" height="350px" search="true" /> |
| variable | required | default | possible values | notes |
|---|---|---|---|---|
| lat | optional | 52N | Integer better 0 and 180 plus a compass direction, N or S | The latitude of the center of the map. |
| long | optional | 92W | Integer better 0 and 180 plus a compass direction, E or W | The longitude of the center of the map. |
| zoom | optional | 3 | Integer better 1 and 14 | The larger the number, the closer the zoom. |
| width | optional | 100% | Integer plus '%', 'px' or 'em' | Sets the width of the map using CSS. |
| height | optional | 300px | Integer plus '%', 'px' or 'em' | Sets the height of the map using CSS. |
| search | optional | null | 'true' or null | The value 'true' will show the map search box, any value other will not display anything. |
The sub_rightrail template allows you to include additional information like recent comments, a tag cloud and even a custom box to the right side of the main contents of the home page.
| Include code example |
|---|
| <fm:Include name="sub_rightrail" ad="true" recentComments="true" tagCloud="true" mediaGallery="false" custom="false" /> |
| variable | required | default | possible values | notes |
|---|---|---|---|---|
| ad | Optional | null | 'true' or null | If true, this adds the bigbox type of sub_ad to the right rail. |
| recentComments | Optional | null | 'true' or null | If true, a box showing a list of the most recent comments is added to the right rail. |
| tagCloud | Optional | null | 'true' or null | Setting this to true adds a box containing a tag cloud with the most common tags from your contest. |
| mediaGallery | Optional | null | 'true' or null | If you wish to show a list of media in the right rail, set this to true. |
| custom | Optional | null | 'true' or null | If you wish to show any custom data in the right rail, set this to true. You will also have to add your custom data in the "custom include" section of the sub_rightrail template. |
The sub_share template allows you to include social networking options for user to share the media they submit and view through the contest.
| Include code example |
|---|
| <fm:Include name="sub_share" mid="{$$media_id}" mediatitle="{$$media_title}" url="http://{$$vhost}/{$$basepage}/{$$subpage}" email="true" facebook="true" delicious="true" digg="true" twitter="true" /> |
| variable | required | default | possible values | notes |
|---|---|---|---|---|
| mid | required | a valid media ID | If included in a media list or on an entry page | |
| mediatitle | required | Current media's title | This title of the media to be shared. | |
| mediadescription | required | Current media's description | The description of the media to be shared. | |
| url | optional | current URL | http://yoururl/basepage/subpage | Whatever URL you want the share to link back too. |
| optional | null | null or 'true' | Allow the user to share via email | |
| optional | null | null or 'true' | Display the Facebook share button. Any value other than 'true' will hide the button. | |
| optional | null | null or 'true' | Display the Twitter share button. Any value other than 'true' will hide the button. | |
| googleplus | optional | null | null or 'true' | Display the Google +1 share button. Any value other than 'true' will hide the button. |
| optional | null | null or 'true' | Display the Linkedin share button. Any value other than 'true' will hide the button. | |
| delicious | optional | null | null or 'true' | Display the Delicious share button. Any value other than 'true' will hide the button. |
| digg | optional | null | null or 'true' | Display the Digg share button. Any value other than 'true' will hide the button. |
