Responsive Gallery and Upload Widget

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.


Quick Start Guide

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:

  1. Read the System Overview
  2. Create Channels
  3. Configure Facebook Login
  4. Configure Gallery Settings

System Overview

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

Templates

All Media Factory applications consist of the following types of templates:

TypeDescription
Wrapper templatesThe 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 templatesThe "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 stylesheetsAn 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 templatesSimilar 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.

Backups

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.



System Updates and Application Upgrades

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.

ComponentDescription
Media FactoryThe 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 - JavaScriptsOur 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 FMLThe 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.
APIThere 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.

â–² Back to Quick Start Guide



Configuration

Channels Setup

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:

ChannelDescription
UploadsThis 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:

  1. Inside Media Factory, hover over "Media Manager" and click on "Channels".
  2. Click "Add Channel".
  3. Fill in the name field with "Content". When you click on the shortname field, it should autofill with "entries".
  4. No other information is required at this point.
  5. Click "Create".
  6. The new channel should now show up in the list. Note the id number. You will need it for setting up the global variables.
  7. Repeat these steps for the other channels.

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.

â–² Back to Quick Start Guide



Facebook Setup

If you want to use Facebook Login in the uploader, you'll have to first create a Facebook Application.

  1. Login to the Facebook developer section and create a new application.


  2. You should arrive in the Settings > Basic section, where you can edit your app icon and name. These elements show up when users login to your site with Facebook for the first time.


  3. In the Website section below, enter the public URL where the gallery and widget will be hosted. If you have more than one base domain, you'll need multiple Facebook Apps for login. One application will work with multiple subdomains.
  4. Copy the App ID and App Secret keys and paste them into your upload widget Website settings in the Widget Publisher.
  5. Go to the Setting > Advanced section and make sure that you have a support email entered. This is a Facebook requirement.




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.

â–² Back to Quick Start Guide



Translation

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:

â–² Back to Quick Start Guide

Global Variables

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

variablevaluesnotes
entryUploadBtntrue, falseShow or hide the “Upload” button from the title bar when viewing media
entryVoteBtntrue, falseShow or hide the “Vote” button from the title bar when viewing media (future - not yet supported)
galleryColumnsone, two, three, four, five, six, sevenNumber of columns of thumbs in the gallery.
galleryThumbs0 - 200Number of thumbs per page in the gallery
galleryUploadBtntrue, falseShow or hide the grey UploadBtn next to the gallery tabs. This option is valid only when showDefaultMedia is set to false.
showDefaultMediatrue, falseShow 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

variablevaluesnotes
channelEntriesAny channel IDThe default channel where you want your media to be pulled from if one is not specified in the embed code.
moderationMediaapproved, notdeniedDetermines whether only approved media should be shown, or whether to include both approved and unmoderated content.
groupEntriestrue, falseThe default group where you want your media to be pulled from if one is not specified in the embed code.
siteUrlhttp://example.comThe URL of the parent site where you will be iframing the widget
uploaderUrlhttp://####-###.projects.fmThe URL of the uploader Widget to be used for uploading media into the vhost.

â–² Back to Quick Start Guide


Project Settings

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:

SettingDescription
Project titleThe 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 moderationSets 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 emailSets 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 / DeniedThis 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 / DeniedThis 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 / DeniedThis 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 domainThese needs to edited if you are using a CDN to deliver your media.
Media callback URLSome actions like approve and deny can trigger an XML payload to be posted to this URL.

â–² Back to Quick Start Guide



Email Templates

There are a number of system emails that are going to be sent out to your users:

EmailDescription
registrationThe 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.
tellafriendThis is the email that is sent when users click to email a file from the entry page.
lostpasswordThis 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.

â–² Back to Quick Start Guide



0 comments

Be the first to comment on Responsive Gallery and Upload Widget.

Add a Comment

  • captcha