Congratulations on choosing the New Spark Media Facebook UGC Contest!
The UGC contest is fully functional, feature-rich interactive Facebook Canvas Application that enables you to provide an engaging multimedia experience for your users. This application includes everything you need to collect and publish user-generated content and conduct a contest with multiple phases, secure voting and social sharing.
While the UGC Contest can be completely customized, it can also be branded and deployed very quickly - it is a fully functional website out of the box. This documentation assumes a basic design implementation. There are few key concepts that you should understand in order to prepare your deployment and you should review this documentation site before you dive in.
If you are having Filemobile perform a simple personalization of the contest application, you should check out the checklist of deliverables that we've created.
Your contest was likely installed for you, and may also be configured. Here is a quick run-down of everything you need to do to get the Contest loaded up into a browser error-free:
Next, you'll want to make it look your own:
Media Factory has the features and tools to power your UGC Contest. The following topics will help you learn more about how you can use Media Factory to get your project up and running.
Watch the New Spark Media Platform overview video
All Media Factory applications consist of the following types of templates:
| Type | Description |
|---|---|
| Wrapper templates | The main wrapper includes the HTML file headers, meta and content to be included on every page of the site. Other wrappers can be XML, text only, HTML email, etc. All application templates are assigned a wrapper. |
| Application templates | The "meat" of the application. Application templates are assigned URLs and contain the code specific to each page, for example: /home, /profile, /entry, etc. There are also sub-templates that are not assigned URLs but are instead called from within application templates with parameters using the <fm:Include> component. |
| CSS stylesheets | An application can contain many stylesheets that are loaded in sequence from the global.css stylesheet by /services/cssloader which is optimized for performance cache. Tip: During development, put a copy of your stylesheet in your assets folder for quicker updates. |
| Email templates | Similar to application templates, these are all the emails that the system is going to send out for you. There is more information on email templates in the developer docs. |
Editing Templates
The Media Factory CMS includes a basic template editor that uses file locking and records that last edit by time and user. The editor is accessed via the applications tab in Media Factory. The web-based editor may not provide an ideal experience for a developer working for many hours on customizing the application. If you prefer a desktop editor experience, you will need to configure WebDAV for Media Factory. The instructions can be found in the developer documentation.
Caution: Please note that WebDAV for Media Factory is beta, and while it is well used by many developers it can be unpredicatable in some configurations.
Caution: WebDAV for Media Factory does not support file locking, so be careful not to overwrite other developers if you are working in a group.
Caution: WebDAV for Media Factory does not support time and user stamping.
Tip: For in-depth template code documentation, please visit https://docs-platform.newspark.ca.Backing up your Contest is easy.
If you plan on making changes to an application (live or staging), we recommend you first make a backup. Inside the Application click "Backup and Restore". On this page, on the left hand side, change the filename field (something like "myappname_todaysdate" works well) and click "Download". This will download an XML file of all the templates and translations in that app. This is a great way to move your staging application changes to the live application. If something goes wrong, or you want to update a live app with the staging version, simply restore that XML file. On the right side of the same page, click "browse", find that XML backup, and click "Restore".
It is recommended that you have two applications for each project. A live app and a staging app. The live app will contain your custom URL(s) (http://www.mydomain.com/) and the project.fm domain (myappname.projects.fm) and will be what the the world sees. The staging app will only need a projects.fm domain (staging.myappname.projects.fm) and it's where you should do all your development. And only after testing should you backup and restore the staging app to live.
Assets are the static files that your application uses such as images, custom JavaScripts, custom CSS or anything else you might need.
There are two ways to manage your assets: the Asset Manager web interface in New Spark Media Platform and via WebDAV.
The Asset Manager can be accessed via Applications > Assets in Media Factory. This basic interface is limited to uploading one file at time, whereas WebDAV allows batch uploading using drag and drop.
Note the two fields highlighted above: Template URL and Absolute URL. The absolute URL is the actual path to the image which MUST be used in the template application - relative URLs will not work. The Template URL makes use of the {$assetbase} variable, which renders the base path to your assets. So, when placed in a Media Factory template, both of these strings will render the same URL path.
Why would we do such a thing? The first and most important reason is that your assetbase URL can change if you choose to enable secure HTTPs on your project. Recent changes in Facebook now require all apps to be HTTPS, and if you used {$assetbase}, all your URLs can be updated at once. Another benefit is portability across projects, each of which have their own asset base URLs.
The Media Factory system consists of three main components: the New Spark Media Platform CMS, Applications and the API. Each are handled differently with respect to upgrades.
| Component | Description |
|---|---|
| Media Factory | The back-end system, fully hosted by Filemobile. Upgrades happen regularly and automatically following emailed release notes that are also available at the Developer Portal and Twitter. These upgrades do not affect the front-end community website. |
| Application - JavaScripts | Our static JS files are upgraded with bug fixes automatically and tested for backwards compatibility. Major new releases of the application use new JS files. This is rare, and implications should be discussed if a major application upgrade is requested. It is highly recommended not to download and edit our static JS files. Better to create a new JS file for your functions or submit a feature request / support from Filemobile. |
| Application - HTML, CSS and FML | The front-end website, hosted by Filemobile and customized by you. We’ve made efforts to keep the application as modular as practical to simplify upgrades (ie. sub templates) but this can be challenging if the application has been heavily customized. We recommend creating a separate CSS stylesheet for your custom styles. |
| API | There is one version of the API. Web services are regularly extended and are tested to ensure backwards compatibility. Changes to web services should not affect any live applications. In rare cases where an interruption may occur, we will notify you via the release notes, Media Factory email list and Twitter. |
One of the first things that you will likely ask yourself is, "How do I see my Facebook app?" For viewing your website as a Facebook canvas app, you will have to first set up a responding domain. By default, the application has probably been set up on a URL similar to http://your-app.projects.fm. This URL is configurable in the Settings section of your application. You will have to then use this domain to setup your Facebook App.
First, visit the application settings for your application:
Domains are configured on the first tab: General.
Tip: To use your own domain, create a CNAME to www.filemobile.com and enter your domain in the Application Settings section. Media Factory takes care of the rest.
On the General tab, you can change the name of the application and edit the responding domains. You can also add additional domains to the list. For example, if you are hosting a website in multiple languages, you would configure on URL for each language with a corresponding language parameter beside the domain name (en). When that URL is requested, the application is automatically displayed in the appropriate language. For more information on the translator, see Translation below.
| Field | Description |
|---|---|
| Application name | The name of the application. Tip: Using the URL as the Application name makes it easier to identify in lists and in WebDAV environments. |
| Main application domain | This domain name will be used to determine links to your application, in for example RSS feeds. It must match one of the responding domains below. Do not include 'http://'. |
| Responding domains | Add in any subdomains (or additional domains) and languages that should link to your application. The second field is a 2-letter ISO countrycode for the translated language you want to use for this domain. Do not include 'http://'." |
| GMaps key | The GMaps Key field is only used in legacy, pre-3.0 applications using the deprecated Google Maps API V2. Newer apps don't require this key, and this field can be left blank. You can still get a key at http://code.google.com/apis/maps/signup.html |
| FB App ID | Enter the App ID and Secret keys that are associated with that domain. For more information on setting up Facebook, see Facebook Setup below. |
| FB Secret | Enter the App ID and Secret keys that are associated with that domain. For more information on setting up Facebook, see Facebook Setup below. |
| Report Offensive Email | Website users can report media and comments as offensive. These reports are sent to the email address entered here. |
Channels are used to keep different types of media separate. In this case, you'll want to separate entries and comments. In addition, you'll want to organize your finalists and winners so they can be displayed separately. In the example below, we are also keeping entries from multiple languages separate so they are only displayed on their respective sites.
Channels can be found in the Media > Channels section of Media Factory.
You should set up at least four standard channels:
| Channel | Description |
|---|---|
| Entries | This is where all the uploaded entries from users will reside. If you are planning a multilingual website, you can create sub-channels in order to keep the content separate. For each language of the website, the content channel must be configured in the Global Vars. |
| Comments | This is where all the comments will reside. If you are planning a multilingual website, you can create sub-channels in order to keep the comments separate. For each language of the website, the content channel must be configured in the Global Vars. |
| Finalists | This is where all the entries selected as finalists will reside. When the contest phase changes and it is time to show the contest finalists, entries from this channel will be displayed on the Home page gallery. |
| Winners | This is where all the winning entries will reside. When the contest phase changes and it is time to show the contest winners, entries from this channel will be displayed on the Home page gallery. |
Tip: If want to include Finalists mixed in with the entries gallery, make that channel a sub-channel of Entries. If you want to include Winners mixed in with Finalists, make that channel a sub-channel of Finalists.
To create a new channel, follow these steps:
Next, you should configure the Content channel to send the appropriate moderation emails. Also make sure that the Project Settings are correct.
From the drop-down menus, select the appropriate Approved moderation email and Denied moderation email. These emails should be included in your UGC Contest application.
This section explains how to get your App ready for integration into Facebook.
For your app to work inside Facebook, you'll have to first create a Facebook Application.
Tip: You'll need to modify this Facebook application with your live URLs!
When a user submits an entry or adds a comment, they are prompted to publish it to their Facebook timeline. You can change the default text that appears in the "entry" category of the Translator.
| Variable | Default | Notes |
|---|---|---|
| facebookApp | on Filemobile's UGC Contest | The text that comes after the title when submitting a new entry. |
| facebookCaption | Comment on | When submitting a comment, this goes next to the title of the media the user is commenting on. |
| facebookComment | Your Facebook comment is | When adding a new comment |
| facebookEvent | uploaded | The text that comes before the entry title when uploading. |
Tip: Create a Facebook alter-ego for testing
You are going to be testing the behaviour and copy of messages shared to Facebook. In order to avoid annoying your friends and spoiling the surprise for your sponsor, create a second or third Facebook account. Connect your alter-egos so you can see what the feed messages will look like.
If you want to link your Company's fan page to your new Contest, you will have to go to the following link:
The Media Factory application template system includes a powerful translation tool. Each application has its own table of translations that can be found in the Translator section:
Translations are broken out into categories, and are made up of keywords and associated strings. The usage syntax in a template is {%category:keyword}. The template will render the appropriate translation based on URL, which is configured in Responding Domains above.
More detailed information can be found in the developer documentation, or watch this quick video:
In addition to managing language translations for multilingual websites, the Translator tool also manages global variables.
Open the translator section of the application inside Media Factory and open the var section:
The following table describes each of these variables, and identifies which ones MUST be changed:
| variable | change required | values | notes |
|---|---|---|---|
| allowedFiletypesComment | no | ['1','2','3','4'] | Sets the type of comments that will be allowed: 1=image, 2=video, 3=audio, 4=text |
| allowedFiletypesEnter | no | ['1','2','3','4'] | Sets the type of files that can be selected by the uploader: 1=image, 2=video, 3=audio, 4=text |
| anonymousComments | no | 'true' or 'false' | Select whether your contest will allow anonymous comments |
| appName | yes | Filemobile Contest | Used by Facebook dialogue boxes |
| appUrl | yes | https://photocontest.projects.fm | Used for generating paths in the Open Graph tags |
| canvasUrl | yes | photocontest | Your Facebook app's Namespace. |
| channelComments | yes | Id of the 'Comments' channel you created | Sets the base channel for the comments. If this value isn't changed, the site will break |
| channelEntries | yes | Id of the 'Entries' channel you created | Sets the base channel for the entries. If this value isn't changed, the site will break |
| collectionEditorsPick | yes | Id of the 'Editors Choice' collection you created | Sets the channel the featured entry. If this value isn't changed, the site will break |
| enterDescription | no | 'true' or 'false' | Turn on or turn off the maximum character length and display on /enter. |
| enterDescriptionCountdown | no | 'true' or 'false' | Display the characters remaining ('true'), or show 'current/maximum' ('false') |
| enterDescriptionLength | no | int > 0 | Maximum number of characters allowed in the description on /enter |
| facebookComments | no | 'true' or 'false' | Setting this to 'true' will enable Facebook comments for the Entry pages |
| fbAppUrl | yes | https://apps.facebook.com/photocontest | Enter the full path of your Facebook app here |
| fblang | no | en_US | Used to tell Facebook the language of our site |
| fbPageName | yes | Filemobile | Enter your company's Facebook page username here. If you do not have a username, enter the page ID here in the format "pages/Filemobile/21049493488". |
| file_size_limit | no | int > 0 in MB (default 500) | The maximum file size accepted by the uploader. Can be up to 1000MB, but very large files can negatively impact user experience. |
| file_upload_limit | no | integer | The maximum number of files that can be uploaded at once |
| imageResizeUrlLive | no | http://cimg.filemobile.com | The address of the service to fetch resized images. FM support only, do not change. |
| imageResizeUrlStaging | no | http://mf.staging.filemobile.com | The address of the service to fetch resized images. FM support only, do not change. |
| lang | no | 'en', 'fr', etc... | Language code used to tell our application how to render multilingual content |
| languageUrl | no | http://fr.website.projects.fm | This default is empty so that the language toggle will not show if not needed. To enable the language toggle, enter and save a valid url to the alternate language of your application. To change the text of the link, edit menu:language in the translator. |
| location | no | US | Used to specify whether states or provinces are shown. |
| mapModeration | no | 'approved' or 'notdenied' | 'approved' will only show approved content, 'notdenied' will show approved and unmoderated content on maps |
| medialistCommentFiletype | no | 1,2,3,4 | Sets the type of comments that will be displayed: 1=image, 2=video, 3=audio, 4=text |
| moderationComments | no | 'approved' or 'notdenied' | 'approved' will only show approved comments, 'notdenied' will show approved and unmoderated comments |
| moderationMedia | no | 'approved' or 'notdenied' | 'approved' will only show approved media, 'notdenied' will show approved and unmoderated media |
| multimediaComments | no | 'true' or 'false' | Select whether your contest will allow multimedia comments |
| multimediaUploads | no | 'true' or 'false' | Select whether your contest will allow multimedia entries |
| noResultsTags | no | No tags available | Used to specify what text should show if an entry does not have any tags associated with it |
| shareEmail | yes | no-reply@yourdomain.com | When people send email to each other from within the contest, this is the "from" address |
| singleMapEntry | no | 'true' or 'false' | Setting this to 'true' will display only the current entry on the map of the entry page. Setting it to 'false' will display the current entry along with all the entries located geographically close-by. |
| siteTitle | yes | Contest 3 | Your website's name goes here. This is the text that is displayed in the title bar of the browser. |
| subChannelUpload | no | 'true' or 'false' | If you have entry sub channels you'll want to set this to 'true' so users can choose what category their entries belong to. If you don't have sub channels, leave it set to 'false' so the 'Entries' channel will be automatically chosen. |
| tagCloudModerationMedia | no | 1 | Sets the moderation filter for tag clouds. |
| transcoderSD | no | int > 0 | This is the transcoder profile ID for videos. The default is 22, but you can also set up custom transcoder profiles. |
| transcoderThumb | no | int > 0 (default 15) | This is the transcoder profile ID for video thumbnails. Change this if you have created a custom transcoder profile for watermarks or other effects. |
| voteSince | no | 'midnight, -1 hour' | You must change this var to reflect the voting rules. If your contest is daily voting, choose 'midnight'. If it's hourly, enter '-1 hour'. |
| webcamComment | no | 'true' or 'false' | Anything other then 'true' will hide the webcam in the comments |
| webcamUpload* | yes | widget id or 'false' | Enter your webcam recorder's widget ID here. If you don't want webcam recorded entries, set this to 'false' to hide the webcam and tab on the enter page. |
* Note: Webcam upload is beta only.
The contest application is pre-configured with the following phases, based on our recommended best practices:
The phases of the contest are also configured in the Media Factory translator, under a category called "phases".
Tip: The vote start date is somewhat independent - you can start voting right away if you wish.
| variable | change required | possible values | notes |
|---|---|---|---|
| 2entryClosedDate | yes | June 19 2012 11:59:59AM EST | Sets the date and time that entries into the contest will be closed. |
| 3voteStartDate | yes | June 20 2012 12:00:01AM EST | Sets the date and time that voting on finalists will start. |
| 4voteEndDate | yes | June 26 2012 11:59:59PM EST | Sets the date and time that voting on finalists will end. |
| 5announceWinnerDate | yes | June 29 2012 12:00:00AM EST | Sets the date and time that you intend to refresh the site and announce the contest winner. |
| finalistsChannel | yes | channel ID (integer) | The channel in which you have placed your finalists media submissions. |
| winnerChannel | yes | channel ID (integer) | The channel in which you have placed your lucky winning entry. |
Tip: Change the dates for testing
Use the phase dates above to move your contest through time. Set dates in the past and future and refresh your app to see what the site will look like at each phase. Don't forget to enter the real dates when you're done! The home page touts for each phase also have to be designed and configured.
Project settings concern configuration that affects all applications, media and users in the project. They can be found under Settings > Project settings in Media Factory:
| Setting | Description |
|---|---|
| Project title | The title of the project as it appears in the project drop-down menu in Media Factory. If you only have one project, you can't see the drop-down menu. |
| Media moderation | Sets the overall rule of whether to ever show unmoderated content in an application. It is recommended to set this to Post, since this allows more flexibility in the application. |
| Media moderation email | Sets the overall rule of whether to ever send moderation email. If you intend to send moderation email - when media is approved or denied - set this to Send by default. |
| Media moderation email - Approved / Denied | This the email template that will be sent when ANY MEDIA is approved or denied. This should be set to None. You should set email templates on the channel configuration page, so that you can specify different emails for content uploads and comments. |
| Group moderation email - Approved / Denied | This the email template that will be sent when ANY GROUP is approved or denied. You probably won't send these types of emails with the UGC Contest, so leave it set to none. |
| Event moderation email - Approved / Denied | This the email template that will be sent when ANY EVENT is approved or denied. You probably won't send these types of emails with the UGC Contest, so leave it set to none. |
| Storage domain | Add 's3.amazonaws.com/storage.filemobile.com' in here. |
| Media callback URL | Some actions like approve and deny can trigger an XML payload to be posted to this URL. |
Project settings concern configuration that affects all applications, media and users in the project. They can be found under Settings > Permissions in Media Factory:
On this page, check the 'Use HTTPS' setting. This will allow your app to be loaded via an https URL and is required for it to function properly as a Facebook app.
There are a number of system emails that are going to be sent out to your users:
| Description | |
|---|---|
| registration | The email that will be sent when users first register in the contest. It's plain text by default, but you can use the HTML wrapper to really wow them. |
| Media Approved (en/fr) | This is an HTML email that is sent to the user once their content has been approved by moderators. We've provided you with both an English and French version. Set the appropriate email in the channel configuration. |
| Media Denied (en/fr) | This is an HTML email that is sent to the user if their content is denied by moderators. We've provided you with both an English and French version. Set the appropriate email in the channel configuration. |
| tellafriend | This is the email that is sent when users click to email a file from the entry page. |
| lostpassword | This email contains instuctions and a system-generated link to reset a user's password. |
You can customize the copy and graphics in the emails by visiting the Email templates section of your application:
Tip: You can find information on the variables available in the system email templates in the Developer Documentation.
Voting settings allow you to specify how frequent a user can vote on an entry. By default none of the options are selected, and you MUST select one of them in order to allow users to vote successfully. The latest version of the contest introduces a new workflow that makes it easier for users to vote by simplifying the registration process for voters.
Download Vote Lite information PDF
Below is a table describing the various voting styles available to you:
| Voting Style | Description |
|---|---|
| Multiple times per media item, once every day | A user may vote multiple times for an entry but this is restricted to only one vote per day. |
| Multiple times per media item, once every hour | A user may vote multiple times for an entry but this is restricted to only one vote per hour. |
| Once per media item | A user can vote only once per entry throughout the voting phase. |
| Anonymous voting with reCaptcha | A user can vote anonymously and multiple times for an entry. But everytime they have to enter a reCaptcha to to ensure that the vote is generated by a real person. No user login is required for this style. If you require this type of voting, you will need to contact support@filemobile.com. |
The webcam recorder is a widget which allows users to record video entries via their webcam, on the contest Enter page. It can be installed and configured on the "Widgets" section of Media Factory:
To install a webcam recorder, simply click on the "Install" button, and you will be navigated to a Widget Details page, where you can further configure your webcam recorder in the following tabs:
The Contest can be completely customized in its layout, look and feel. However, using the guidelines found here, you can apply your branding and color scheme to the application in a relatively short amount of time. This section provides a workflow walkthrough with everything you need to personalize the creative in your contest.
The stylesheet base.css includes all the paths to the sprites and some images. Once you've edited the image PSD files, upload your new images to your asset folder.
Tip: A Firefox plugin that is very, very highly recommended is Firebug. It allows you to inspect and modify HTML and CSS in the browser and see the results in real time.
Below is a table describing the graphic elements that need to be considered when designing your application:
| Creative element | Dimensions | Description |
|---|---|---|
| tout-1.png | width:730px | The first big graphic people will see on the homepage telling them the contest is open. Touts are the big call-to-action graphics at the top of the home page, below the navigation. You can set a different tout for each phase, so that the users landing on the home page know the current phase. Change the path in the /home template. |
| tout-2.png | width:730px | The tout for the second phase: Entries are closed, come back to vote when we pick some finalists. Change the path in the /home template. |
| tout-3.png | width:730px | The tout for the third phase: Vote for the finalists! Change the path in the /home template. |
| tout-4.png | width:730px | The tout for the fourth phase: Voting is closed, come back later to see the winners! Change the path in the /home template. |
| tout-5.png | width:730px | The tout for the final phase: Check out the contest winner! Change the path in the /home template. |
| fangate_tout_unliked.jpg | 810px by 780px | If you are implementing a fangate page for your app, this image will show content to users who have not yet liked your page. Change the path in the /fangate template. |
| fangate_tout_liked.jpg | 810px by 780px | If you are implementing a fangate page for your app, this image will show content to users who have already liked your page. Change the path in the /fangate template. |
| buttons.png | This sprite is used for the next and previous buttons on the /entry page, gallery pagers, the vote button and most of the clickable elements on the website. Change the path in base.css. |
|
| corners.png | This sprite image is used for the navigation bar background, tab contents background, and the top and bottom of the various boxes. For boxlarge, boxmedium and boxsmall the corners.png has the same bottom and top height, it is the width that will change per column. Change the path in base.css. |
Now, put all these images into Asset Manager and update the paths in base.css and /home.
Each sprite PSD contains a layer with information saying what part of the site the image belongs to, and what CSS style uses that part of the image (in case you need to change the CSS height or width). You are free to edit the sprite as much as you want, but the further you stray from the default image sizes and postition, the more changes you'll have to make to the CSS.
To download a PSD, right-click on the link and hit "Save Link As…"
There are some images that can't, or shouldn't, be added to the sprites. These include the homepage tout, gallery thumbnail backgrounds, form element background, loading icon and default thumbnail icons. You can modify these graphics as standalone images, although only several are recommended to be changed. The design team should download the file design_guide.psd below, and use it to design the background, touts, headers and footers in context.
If you are planning a multilingual website, you will most likely have images that are language-specific. Our recommended approach is to create two folders in assets, say "en" for English and "fr" for French. Within each of these folders, place all the images for both of the sites, maintaining the same file names for both.
Now, to render the correct path when the page loads, use the {$lang} variable:
<img src="{$assetbase}/images/{$lang}/tout.png">
On http://english.my-app.projects.fm, this will render <img src="http://assets.newspark.ca/681/images/en/tout.png">
Included in the application are five CSS files: global.css, reset.css, base.css, facebook.css and comments.css
| Stylesheet | Description |
|---|---|
| global.css | This stylesheet calls the other three CSS files. It is called by our cssloader in the header of the application. |
| reset.css | This stylesheet contains a standard browser CSS reset. |
| base.css | This stylesheet holds all the layout and design styles specific to the UGC Contest app. |
| facebook.css | This stylesheet is an extension of the base.css stylesheet and adds Facebook specific styles wherever necessary. It also overrides any styles that need to be styled differently for the Facebook canvas app. |
| comments.css | This stylesheet holds all of the styles for comments. |
While you are free to edit any of the CSS as much as you'd like, there are a few things that may be better left alone. Inside base.css, any style that appears before where the sprite included has to do with the overall structure of the site, the three different box sizes and the thumbnail layout. There probably won't be a need to change anything in here except the colours and thumbnail background image URL.
Your design team should complete the form below and return it along with the sprites and custom images.
Download style guide RTFWhen adding custom form fields you should use meta data. To use meta data, make sure the 'name' attribute of the form field has to be 'meta[varname]'. And to access the variable in a <fm:MediaList> use the variable {$$media_metadata.user.varname}
Adding custom meta data to the register form in the 'sub_inputfields' template
| Text input |
|---|
|
<li class="label"><label for="meta_title">Title</label></li> <li><input type="text" class="fmInput required" id="meta_title" name="meta[title]" title="Title"/></li> |
| Check box (commonly used for newsletter opt-ins) |
|---|
|
<li class="label checkbox clearfix"> <fm:Form_CheckBox name="meta[opt1]" formType="simple" class="left" id="opt1" /> <label for="opt1"> I want this opt-in</label> </li> |
| Select |
|---|
|
<select name="meta[title]" class="fmSelect"> <option value="Mr.">Mr.</option> <option value="Ms.">Ms.</option> <option value="Mrs.">Mrs.</option> <option value="Miss.">Miss.</option> </select> |
Adding custom meta data to the upload form
Create the form elements on /enter.
|
<li class="label"><label for="meta_animaltype">Type of Animal</label></li> <li><input type="text" class="fmInput required" id="meta_animaltype" name="meta_animaltype" title="Type of Animal"/></li> |
Open the sub_uploader sub-template and within the function upload(), look for the if(page === "upload") statement. You will notice that the code within this conditional helps in collecting some of the relevant upload data such as tags, geo_lat, and meta-data for the uploader. Add in your meta data details.
|
if($('meta_animaltype')) { swfu.addPostParam('meta[user][animaltype]',$('meta_animaltype').value); } |
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 |
| commentStyle | Required | s3 | s1, s3 | This is the class applied to the comments. Each class changes the layout for comments. |
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 |
|---|---|---|---|---|
| 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"" /> |
| 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. |
| 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 | |
| stumbleupon | optional | null | null or 'true' | Display the StumbleUpon 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 Pinterest "Pin it" 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. | |
| optional | null | null or 'true' | Display the Linkedin share button. Any value other than 'true' will hide the button. | |
| optional | null | null or 'true' | Display the Facebook 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. |
