Add a MediaPicker to the General Site Settings

Question

The current project I'm on is utilizing tenant sites. With each site, we want the ability to change the logo through out the tenant site by modifying the its settings (on the admin page, settings > general).

I've added two text fields to the site settings by following this well documented tutorial. However, I'd like the user to be able to pick the logos using the media picker instead of typing in the path.

Currently I have a LogoBarSettings part with its record, driver and handler. I'm not sure how to add the media picker to the my LogoBarSettings and even if I did, must I also create another handler, driver, and record for it? I can't imagine I would but I'm pretty stuck at this point.

Can someone provide some direction on this?

Here is my LogoBarSettings

public class LogoBarSettings : ContentPart<LogoBarSettingsPartRecord>
{
    public string ImageUrl
    {
        get { return Record.ImageUrl; }
        set { Record.ImageUrl = value; }
    }

    public string ImageAltText
    {
        get { return Record.ImageAltText; }
        set { Record.ImageAltText = value; }
    }
}

Answer 1

The MediaPicker is invoked through Javascript, so you shouldn't need to change any of your model classes. When the MediaPicker is loaded for a page, it sets up a jQuery event handler for all form elements on the page. Triggering the event orchard-admin-pickimage-open will open the MediaPicker. Supply a callback function to capture the picked media.

Here is a quick example that you can run in Firebug or Chrome Developer Tools from a page which has the MediaPicker loaded, such as a Page editor:

$('form').trigger("orchard-admin-pickimage-open", { 
    callback: function(data) { 
        console.log(data); 
}})

This should print something similar to this:

Object {img: Object}
    img: Object
        align: ""
        alt: ""
        class: ""
        height: "64"
        html: "<img src="/Media/Default/images/test.jpg" alt="" width="64" height="64"/>"
        src: "/Media/Default/images/test.jpg"
        style: ""
        width: "64"
    __proto__: Object
__proto__: Object

The BodyPart editor integrates Orchard's MediaPicker with TinyMce, so you can start looking at that module for a more complete example, specifically Modules\TinyMce\Scripts\plugins\mediapicker\editor_plugin_src.js.