Welcome to the Responsive Gallery and Uploader documentation!
The Gallery product is in beta, so to get your embed code, please contact your Filemobile sales representative.
Tip: Wordpress does nasty things to HTML code.
It's what allows you type "rich text" directing into a blog post. So, you need to override it with this simple plugin. Once you have that plugin installed you can add [raw] ... [/raw] before and after the Gallery <script> block. You can put it in any post or a page.
Your applications were likely installed for you, and may also be configured. Here is a quick run-down of everything you need to do to get apps loaded up into a browser error-free:
Media Factory has the features and tools to power your UGC campaigns. The following topics will help you learn more about how you can use Media Factory to get your project up and running. Note that the Uploader is configured and managed through the Widget Publisher only. You should not need to edit the uploader application directly.
Watch the Mediafactory 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 http://developer.mediafactory.fm.Backing up your applications 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.
The Media Factory system consists of three main components: the Media Factory 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. |
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 |
---|---|
Uploads | This is where all the uploaded files 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. |
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 Gallery application.
If you want to use Facebook Login in the uploader, you'll have to first create a Facebook Application.
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.
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. There are two relevant categories for the Gallery application.
Open the translator section of the application inside Media Factory and open the options section:
options category
variable | values | notes |
---|---|---|
entryUploadBtn | true, false | Show or hide the “Upload†button from the title bar when viewing media |
entryVoteBtn | true, false | Show or hide the “Vote†button from the title bar when viewing media (future - not yet supported) |
galleryColumns | one, two, three, four, five, six, seven | Number of columns of thumbs in the gallery. |
galleryThumbs | 0 - 200 | Number of thumbs per page in the gallery |
galleryUploadBtn | true, false | Show or hide the grey UploadBtn next to the gallery tabs. This option is valid only when showDefaultMedia is set to false. |
showDefaultMedia | true, false | Show or hide default media when the gallery first loads. The first media on the first tab of the gallery is used when set to true. |
var category
variable | values | notes |
---|---|---|
channelEntries | Any channel ID | The default channel where you want your media to be pulled from if one is not specified in the embed code. |
moderationMedia | approved, notdenied | Determines whether only approved media should be shown, or whether to include both approved and unmoderated content. |
groupEntries | true, false | The default group where you want your media to be pulled from if one is not specified in the embed code. |
siteUrl | http://example.com | The URL of the parent site where you will be iframing the widget |
uploaderUrl | http://####-###.projects.fm | The URL of the uploader Widget to be used for uploading media into the vhost. |
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:
Below is a table describing the various projects settings:
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 | These needs to edited if you are using a CDN to deliver your media. |
Media callback URL | Some actions like approve and deny can trigger an XML payload to be posted to this URL. |
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.