Managing Media

From Habari Project

Jump to: navigation, search

To assist in the management of media, such as images, video and audio, Habari provides a mechanism for defining virtual filesystems for media, called Media Silos. A silo provides a consistent interface for dealing with media. Examples of media silos can be seen in the SimpleFileSilo or FlickrSilo plugins. A developer wanting to interface with a media service should write a plugin that implements the MediaSilo interface.


Media Manager - Permission Errors

If you've attempted to use the local Habari media manager and the actual uploaded thumbnails do not show up, or the actual images in the posts either, this is attributed to file permissions not being correctly set up. The quick work around for this is to go in the folder: /user/files/ and confirm that both of these have 775 permission. Also make sure that the hidden folders and files option is in view (ie that you can see all of these folders) and ensure that the additional .deriv folder (which stores the Habari created thumbnails) also has the permission 775 set to this folder as well.

Media Overview

The Habari media system provides access to disparate systems through a unified interface. This is done through use of a virtual filesystem. Each path in the virtual filesystem maps to a specific media asset, be it a directory or file. The root directory in a virtual path indicates the Silo in which the asset exists.

A "Silo" is a wrapper for media from a specific source that provides a standard set of functions for access. The name of the silo is the root directory in the filesystem.

For example, if the Silo is "Local Files", then all of the assets within that silo will have a path that begins with "/Local Files". The Silo is responsible for mapping virtual paths within its root to actual files.

The meaning of "virtual filesystem" is that a Silo can present any path that easily allows access to an asset, without representing the physical location of that asset. A file located in the virtual path "/Flickr/tags/Monkey" might actually be located on a different server, and might not even use the name specified as the filename. By using the virtual filesystem, Habari can present a unified interface across all Silos and their asset repositories that is easily navigable via a traditional path structure.

In addition to specifying the structure of the virtual paths within their purviews, a Silo provides access to the local and remote physical assets it contains. Functions in the Silo provide access to the metadata used to address the file via the web - often a URL, but sometimes something more abstract. It should also be possible to directly access the physical file of the asset for manipulation by the system via plugin.

Silos provide functions to enumerate assets stored in a specific virtual path. Also, Silos provide permission information on the assets, and can even allow the copying, deleting, and uploading of new assets, regardless of whether the store is local or remote.

Silos are simply an abstraction for the Media API, and do not provide an interface of their own.

Rather than interacting with Silos directly, Habari provides a Media class that functions as a facade pattern. Using path names that include the silo root names, it dispatches functions to the correct Silo and returns its results without the consumer of the API needing to know anything about the virtual paths or the Silos that implement them.

Usage in Habari

The Publish page of the Habari Admin contains an area that allows a user to select assets for insertion into posts. The assets are supplied via the Media/Silo system.

Consuming Silo Data

Creating New Silos

To create a new media silo, you need to override the methods defined in the MediaSilo interface. Below is a description of each of the methods.


This method returns information about the silo. Most importantly, it should return the name of the silo, which is used as the first part of the media silo's URL. For example, the Flickr media silo would return an associative array with key name that has the value flickr. Therefore, all Flickr media assets would be accessed through a virtual directory beginning with flickr/. An icon can optionally be defined in the array with a key of icon and the URL of the icon which should be used. These icons are displayed on the publish page and may become the only representation of a silo. The icon should be 16 pixels by 16 pixels.

silo_dir( $path )

This method returns an array of MediaAsset objects that are located at the given virtual path. It should map the virtual path to the real path of the service, creating MediaAssets that contain the correct virtual paths.

silo_get( $path, $qualities = null )

silo_put( $path, $filedata )

silo_delete( $path )


silo_permissions( $path )

Custom Media Types

Every MediaAsset has a "type", similar to a MIME type, which is used to control how MediaAssets are output. Types can be silo-specific, and can be added by silo plugins, so that the way that assets are previewed or output can be customised. The media object in the habari JavaScript object has functions named after the MediaAsset types. If a function exists with the MediaAsset type name, that function is called to output the asset. If no function exist with that type name, the default "image" output function is used.

To add a custom type, you need to specify the type when creating the MediaAsset object, and add the custom output to the JavaScript object, as demonstrated below for the Flickr MediaSilo.

// set other properties
$props['filetype'] = 'flickr';
// Add a new media asset 
$results[] = new MediaAsset(
  self::SILO_NAME . '/photos/' . $photo['id'], 

The Javascript can be added using the action_admin_footer hook.

public function action_admin_footer( $theme ) {
  if ($theme->admin_page == 'publish') {
    echo <<< FLICKR
    <script type="text/javascript"> = function(fileindex, fileobj) {
        habari.editor.insertSelection('<a href="' + fileobj.flickr_url + '"><img src="' + fileobj.url + '"></a>');
      } = function(fileindex, fileobj) {
        var stats = '';
        return '<div class="mediatitle">' + fileobj.title + '</div><img src="' + fileobj.thumbnail_url + '"><div class="mediastats"> ' + stats + '</div>';
Other Development Pages · Developer Introduction
Personal tools