Integrate media from other websites in C1 CMS by creating custom media data providers.

You can write your own Media Data provider to expose external file structures in C1 CMS and optionally a Media URL provider to ensure generated media links will be pointing to the external source.

Here we will present a sample project with a base class, which hides away most of the complexity, but the overall process rerquired to create your own providers from scratch include:

• Expose media files from an external store inside C1 CMS by implementing a data provider (a class implementing IDataProvider) which return data of type IMediaFile, IMediaFileFolder and IMediaFileStore.
• Ensure that internal Media URLs gets converted to public Media URLs pointing top the remote store by handling the URL conversion. If you skip this step, your data provider must be able to provide a byte stream to the raw file data, and files will be served from C1 CMS.

Sample project - a Flickr image provider with reusable base class

To get going with the sample:

1. Download and build CustomMediaFileProvider project from here.
2. Implement MediaFileProvider like the following examples.
3. Add a line to DataProviderConfiguration in Composite.config to register the store ID, name, and description.

When done, the following element should appear in the media library.

Example 1: Simple Use

namespace myCustomMediaFileProvider
{
    [ConfigurationElementType(typeof(MediaFileProviderData))]
    public class myMediaFileProvider : MediaFileProvider
    {
        public myMediaFileProvider(string providerName, string storeId, string title, string description) :
            base(providerName, storeId, title, description)
        {
            Files = new[]
            {
                GetMediaFile("Random kitten.jpg", "/Folder1", "https://placekitten.com/g/200/300"),
                GetMediaFile("A flicker image.jpg","/Folder1","http://farm4.static.flickr.com/3221/2658147888%5F826edc8465.jpg"),
                GetMediaFile("Another file.png", "/", "http://fpoimg.com/500x500?text=Another%20file")
            };

        }

    }
}

Registering the media data provider

1. Edit ~/App_Data/Composite/Composite.config.
2. Below the element configuration/Composite.Data.Plugins.DataProviderConfiguration[@defaultDynamicTypeDataProviderName="..."]/DataProviderPlugins, register your media data provider:
3. Save the changes.

<Composite.Data.Plugins.DataProviderConfiguration defaultDynamicTypeDataProviderName="DynamicXmlDataProvider">
    <DataProviderPlugins>
        <add storeId="anyId" storeDescription="media data provider" storeTitle="my media provider" type="myCustomMediaFileProvider.myMediaFileProvider, myCustomMediaFileProvider" name="myMediaFileProvider" />

• storeId: The store ID used when implementing the class for a custom media data provider.
• storeDescription: The description of the media store.
• storeTitle: The title of the media store. Will appear as a label in the Media perspective for the media store's node in the tree.
• type: "<assembly_name>, <class_name>"
• name: The name of the store in the configuration.

Example 2: Using Resizing If Host Accepts

namespace myCustomMediaFileProvider
{
    [ConfigurationElementType(typeof(MediaFileProviderData))]
    public class myResizableMediaFileProvider : MediaFileProvider
    {
        public myResizableMediaFileProvider(string providerName, string storeId, string title, string description)
            : base(providerName, storeId, title, description,
                new ResizingOptions())
        {
            Files = new[]
            {
                GetMediaFile("Nice.jpg", "/Folder2", "http://unsplash.it/g/{width}/{height}/?random"),
                GetMediaFile("Blue.png", "/Folder2", "http://dummyimage.com/{width}x{height}/006/fff"),
                GetMediaFile("Custom media url test.jpg", "/",
                    "http://fpoimg.com/{width}x{height}?text=Custom%20media%20url%20test"),

            };
        }
    }
}

<Composite.Data.Plugins.DataProviderConfiguration defaultDynamicTypeDataProviderName="DynamicXmlDataProvider">
    <DataProviderPlugins>
      <add storeId="anyOtherId" storeDescription="Resizable media data provider" storeTitle="my resizable media provider" type="myCustomMediaFileProvider.myResizableMediaFileProvider, myCustomMediaFileProvider" name="myResizableMediaFileProvider" />

Example 3: Using an API call to get URLs

[ConfigurationElementType(typeof(MediaFileProviderData))]
    public class FlickrMediaFileProvider : MediaFileProvider
    {
        public FlickrMediaFileProvider(string providerName, string storeId, string title, string description)
            : base(providerName, storeId, title, description)
        {
            Files = flicker().Select(f => GetMediaFile(f.Item1, "/Copenhagen", f.Item2));
        }

        private List<Tuple<string,string>> flicker()
        {
            List<Tuple<string, string>> res = new List<Tuple<string, string>>();
            HttpClient client = new HttpClient();

            // List data response.
            string response = client.GetStringAsync(${body}quot;https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=d5f765edff46a633bc8d184161dbcbe7&tags=copenhagen&per_page=20&format=json&nojsoncallback=1&api_sig=09c3245ca1900f309bdd15d2acb0c916").Result;  
            rsp data = JsonConvert.DeserializeObject<rsp>(response);
            if (data.stat == "ok")
            {
                foreach (var d in data.photos.photo)
                {
                    res.Add(new Tuple<string, string>(d.title+"("+d.id+").jpg",${body}quot;https://farm{d.farm}.staticflickr.com/{d.server}/{d.id}_{d.secret}.jpg"));
                }
            }
            
            return res;
        }
        
    }

<Composite.Data.Plugins.DataProviderConfiguration defaultDynamicTypeDataProviderName="DynamicXmlDataProvider">
    <DataProviderPlugins>
      <add storeId="Flickr" storeDescription="Copenhagen in Flickr" storeTitle="Flickr" type="myCustomMediaFileProvider.FlickrMediaFileProvider, myCustomMediaFileProvider" name="FlickrMediaFileProvider" />