Docs Home

Install

Upgrade

Troubleshoot

Customize

Admins

Devs

Content

Query

Templates

Commands

Skins

Overview

This tutorial will walk through the creation of a feature for ccMixter.org that was added by taking full advantage of template engine and Query API. If you just want to download and install the finished project or want to follow along in your own version of the code you can jump down to the download section.

The idea was to create a quick-and-dirty version of a feature of other remix sites that allow artists to embed "remix me" widgets onto their site. (Typical example is from the Trifonic site.) Those sites use fancy Flash (tm) widgets, but here we aren't aiming so high. We just want a simplified version of that, something that leads remixers to the stems and starts them down the road to uploading.

Even though this feature was made with ccMixter in mind, we've written the code to be portable to all ccHost installations. The ccMixter specific parts (logo and headline) are parametrized using the template tag ('Edit Footers and Banners') admin screens so you can customize it without changes to the code.

It might be of interest to developers that from concept to check-in this feature took less than four hours to put together and install on the site. That's because it was all done with the template/query extensibility, how the majority of features on ccMixter are already implemented.

Feature Requirements

For this feature we need an HTML snippet that will:

• List the remixes of a given artist with the ability to stream, download and find out more about the remix.
• Show a link for downloading stems
• Show a link for uploading a remix.

This last step is a little tricky. What other sites do is direct users to a screen that allows them to register an account with the site in the same transaction as upload their remix. We won't be quite so fancy and just create a screen that directs users to either create an account or, if they already have an account, submit the remix.

Implementation Spec

To create this feature we will create several templates and use the Query API to call them. Here are the templates we want to make:

• A Remix Me template - this will be embedded into the user's blog or web site. It will have to be 'straight' HTML and assume nothing about styles or layout.
• A get my stems template - when the user clicks on 'get my stems' this will popup a window with a list of download-able samples from the artist.
• A upload my remix template - this will live on the ccHost installation site and direct the remixer to either the login/register screens or the 'Submit Remix' screen depending on whether they are logged in already.
• In addition to those we'll create a page on our installation with instructions for our users about how to install the embedding's snippets into their blogs.

Regarding this last page: it just so happens that the way we will craft this feature it will actually appear in the list of optional embedding in the publicize feature, so it's technically not needed, but the feature is just sexy enough that we'll create it's own instruction page, hopefully inspiring ccMixter users to give it go.

Making the Templates

The 'Remix Me' Embedding Template

The template we embed onto the user's blogs will be the most complicated and most important so we'll start there.

What we're aiming for is a query that will look something like:

 api/query?t=remix_me&user=<user_name>

So that we can we can wrap that in a <script> tag on the user's blog:

 <script src="<query_url>?t=remix_me&user=<user_name>&f=docwrite"></script>

Making it 'publicize' Compatible

ccHost already has a feature for generating these types of embedding at the publicize command. (You can see it action at ccMixter.) If we do this feature right, it will just slip into the 'format' drop down.

In order to this we need to have certain things in place:

• The template must reside in a directory called formats below our skins directory.
• The meta section of the template just specify type = format
• The same meta section must have a 'desc' field with a one-line description
• The template should be amenable to either remixes by our user or of our user.

Unfortunately this last point is a drag because, really, we only care about the remixes of our user. Ah well, the template will act a little funny but we'll make up for below.

Since this feature is about remixes of a given artist and it really doesn't make sense to do it for remixes by the user, we'll also specify that remixesof parameter as a requirement of the query.

So given that, we put the following shell of the template into <local_files>/skins/formats/remix_me.tpl:

 %%
   [meta]
     type          = format
     desc          = _('Remix ME (use with Other Peoples Remixes...)')
     required_args = remixesof
   [/meta]
 %%

Adding a 'download stems' Popup Window

We want to have a link at the top that says 'Download my stems'. This should lead to a popup window with a list of the artist's upload tagged sample.

To get things going we'll use ccHost's very convenient download template. (For brevity we're leaving off all the javascript goop for the window specs. You can see all that in the code download.) We'll use the html for the format parameter so we don't get the whole skin into the popup window.

Ideally the URL for that popup window would be something:

 <your_installation_root>api/query?t=download&user=<user_name>&f=html

Unfortunately, we don't have the user_name (!) as part of the query results. The best we can do is squeeze off the remixesof PHP's $_GET variable.

In order to make the code portable, we use the query-url variable for our ccHost installation:

   <a onclick=
     "window.open( '%(query-url)%t=download&user=%(#_GET/remixesof)%&f=html', 
                   'cchwin',
                   'height=600,width=450'); 
                   return 0;">download my stems</a>

Adding a 'upload your remix' Link

We'll add another link in the header of the template that points to a template directing the user to the sumbit remix screen (or register if they don't have an account). We'll fill out the remix_me_upload template later, for now we'll use the $_GET trick again to get the user's name:

   <a href="%(query-url)%t=remix_me_upload&user=%(#_GET/remixesof)%">upload your remix</a>

Displaying the remixes

We'll want to loop over the records and display the remixes of by name and remixer. Because we are embedding into random blogs we want to keep everything self contained (no calls to CSS files, no outside scripts and the safest layout mechanism possible. That means (forgive me) <table>. We'll also want to control the overflow so we'll make extensive use of the %chop% template macro when displaying names:

 <table cellpadding="0" cellpadding="0">
   %loop(records,R)%
     <tr>
        <td>%chop(#R/upload_name,23)%</td>
        <td>%text(str_by)% </td>
        <td>%chop(#R/user_real_name,12)% </td>

 %end_loop% </table> You're now ready to take a peak. Pick a user that has been remixed in your installation and try: api/query?t=formats/remix_me.tpl&remixes=<user_name> (See why you need the .tpl extension.)

Customizing the Dataview

Until now we're using the default dataview but since we want a 'download' link for each we'll a different set of columns. That's not a bad idea anyway since we'll only want a few columns and default dataview is very performance intensive, so we'll setup a custom dataview...

   [meta]
     type = format
     desc = _('Remix ME (use with Other Peoples Remixes...)')
     required_args = remixesof
     dataview = remix_me
     embedded = 1
   [/meta]

and embed it directly into the template:

   [dataview]
 function remix_me_dataview()
 {
   $sql =<<<EOF
       SELECT upload_id, upload_contest, upload_name, user_name, user_real_name
              %columns%
       FROM cc_tbl_uploads
       JOIN cc_tbl_user ON upload_user=user_id
       %joins%
       %where%
       %order%
       %limit%
 EOF;

     $sql_count =<<<EOF
       SELECT COUNT(*)
       FROM cc_tbl_uploads
       JOIN cc_tbl_user ON upload_user=user_id
       %joins%
       %where%
       %order%
 EOF;

       return array( 'sql' => $sql, 
                     'sql_count' => $sql_count, 
                     'e' => array( CC_EVENT_FILTER_DOWNLOAD_URL ) );
 }
 [/dataview]

Note in the return array is the event that will trigger the [Cchost/developer/concepts/Working_With_Data#Dataview_Filtering|dataview filter]] that will generate the 'download_url' field in the returning records. That particular filter requires some columns to work (upload_id, upload_contest, upload_name) so we made those part of the SELECT statement.

Now that we have the 'download_url' we can use it in the display table:

 <td><a href="%(#R/download_url)%">download</a></td>

Adding the Stream URL

Audio streaming in ccHost is done by an M3U "plain text" query formatter. All that is needed is the upload_id for the ids parameters. We can safely embed the query URL directly into the HREF attribute of an anchor because most browsers will not navigate to page, just call up the system's music player. (Hey, it's not ideal but we're trying to get through this - exercise for the reader: cram a Flash(tm) player into this scheme somewhere.)

The stream link looks like:

 <td><a href="%(query-url)%f=m3u&ids=%(#R/upload_id)%">stream</a></td>

Adding an 'info' button

To add an 'info' button we'll use ccHost's info icon at ccskins/shared/images/i-fg.png. Again, because we are being embedded into a random blog's page and we don't want any borders on the image we'll force the border to 0px. To generate a fully qualified URL we'll use the %url% macro:

  <img style="border:0px" src="%url('images/i-fg.png')%" />

The link we wrap around this will need a URL to the page of the remix. We can generate this into a field (i.e. SQL column) called 'file_page_url' using the ccl URL builder helper:

   [dataview]
 function remix_me_dataview()
 {
   $furl = ccl('files') . '/';

   $sql =<<<EOF
       SELECT upload_id, upload_contest, upload_name, user_name, user_real_name,
              CONCAT( '{$furl}', user_name, '/', upload_id ) as file_page_url
              %columns%
       FROM cc_tbl_uploads
       JOIN cc_tbl_user ON upload_user=user_id
       %joins%
       %where%
       %order%
       %limit%
 EOF;

Now that the remix's page URL is available we can use it in the wrapper link:

 <td><a href="%(#R/file_page_url)%"><img style="border:0px" src="%url('images/i-fg.png')%" /></a></td>

The Remix Me Download Template

Unfortunately the download template is really boring on it's own and we want to style it similar to our embedding look/feel. What we'll do is create a template for the downloading that wraps the system version. We'll call it remix_me_download.tpl and put it the <local_files>/skins directory.

The key line in our wrapper template is a call down to the system's download template. Ideally we'd just use the %query% TPL Macro with something:

 %query('t=download&tags=sample&user=<user_name>')%

Unfortunately the macros can not nest so we have to drop to PHP. You can see we use the embed format which will run the query and output the HTML directly to the screen in situ.

Download the Source

The source for the latest version of feature is available scattered about the ccHost SVN repository. The version that this tutorial uses is available from here (ZIP).

Installation instructions:

• Unzip the source ZIP file on your local directory and copy the files to <local_files>/skins maintaining the directory structure.
• Log in as admin to your ccHost installation (if not already)
• Click on Manage Site, then Banner and Footers, then Banner Text, Footers, etc.
• In the header of the form click on clicking here.
• Type in the text: 'remix-me-title' (without the quotes)
• Click on 'Submit' (this should bring you back to the 'Edit Banners...' form).
• Again, in the header of the clicking here
• Type in the text: 'remix-me-logo' (without the quotes)
• Click on 'Sumbit'
• Now at the bottom of this form you should see the new fields you just enetered.
  • For the title enter something like 'Remix Me' - this will be the text that is displayed in the embedding on the users' sites.
  • For the logo enter the fully qualified URL to any logo you want to appear in the embedding. This is optional and you can fill it in later.

Now your "remix me" feature is ready to go. You should see it as an option when you browse to publicize/<user_name> and also when you browse to api/query?t=remix_me_embed&user=<user_name> which you put into your menu for registered users.