I've created a plugin for the grid editor in Umbraco 7.7.7 and inside this plugin it must be possible to create an Umbraco.MediaPicker2. Here is the configuration:

• Pick one item
• Only images
• Disable folder select

I've created a media picker with this configuration named: Media Picker: only images and I'll reuse this inside my plugin.

At this moment I use a simple input-tag where the users must past the URL of the image.

Here is my code:

<div ng-controller="my.lucide.gridBlock">

    <div class="umb-editor-placeholder ng-scope" ng-click="setBlock()" ng-if="control.value === null">
        <i class="icon icon-firewall"></i>
        <div class="help-text">Click to add a block</div>
    </div>

    <div class="visual-lucide-block" ng-click="setBlock()" ng-if="control.value !== null">

        <div class="col-xs-12 col-sm-4">
            <div class="cntr-image">
                <a>
                    <div class="title"><h3>{{control.textOnImage}}</h3></div>
                    <div class="image"><img ng-src="{{control.linkOfImage}}" alt=""></div>
                </a>
            </div>
            <h3>
                <a href="#">{{control.title}}</a>
            </h3>
            <p>{{control.description}}</p>
            <a class="btn btn-theme" ng-show="control.textOnButton && control.link">{{control.textOnButton}}</a>
        </div>

    </div>

    <div class="umb-overlay umb-overlay-right" on-outside-click="closeOverLay()" ng-if="blockPickerOverlay.show" position="right" style="width: 500px;">
        <div class="umb-overlay-header">
            <h4 class="umb-overlay__title ng-binding">Create block</h4>
            <p class="umb-overlay__subtitle ng-binding">&nbsp;</p>
        </div>

        <div class="umb-overlay-container form-horizontal">

            <div class="control-group umb-control-group">
                <div class="umb-el-wrap">
                    <label class="control-label">Link of image</label>
                    <div class="controls">
                        <input type="text" class="umb-editor umb-textstring textstring" ng-model="control.linkOfImage" />
                    </div>
                </div>
            </div>

            <div class="control-group umb-control-group">
                <div class="umb-el-wrap">
                    <label class="control-label">Text on image</label>
                    <div class="controls">
                        <input type="text" class="umb-editor umb-textstring textstring" ng-model="control.textOnImage" />
                    </div>
                </div>
            </div>

            <div class="control-group umb-control-group">
                <div class="umb-el-wrap">
                    <label class="control-label">Title</label>
                    <div class="controls">
                        <input type="text" class="umb-editor umb-textstring textstring" ng-model="control.title" />
                    </div>
                </div>
            </div>

            <div class="control-group umb-control-group">
                <div class="umb-el-wrap">
                    <label class="control-label">Description</label>
                    <div class="controls">
                        <textarea class="umb-editor umb-textarea textstring" ng-model="control.description" rows="8"></textarea>
                    </div>
                </div>
            </div>

            <div class="control-group umb-control-group">
                <div class="umb-el-wrap">
                    <label class="control-label">Text on button</label>
                    <div class="controls">
                        <input type="text" class="umb-editor umb-textstring textstring" ng-model="control.textOnButton" />
                    </div>
                </div>
            </div>

            <div class="control-group umb-control-group">
                <div class="umb-el-wrap">
                    <label class="control-label">Link</label>
                    <div class="controls">
                        <input type="text" class="umb-editor umb-textstring textstring" ng-model="control.link" />
                    </div>
                </div>
            </div>

        </div>

        <div class="umb-overlay-drawer" ng-class="{'-auto-height': model.confirmSubmit.show}">

            <div class="umb-overlay-drawer__align-right ng-scope" ng-if="!model.confirmSubmit.show">
                <div class="umb-button" ng-class="{'umb-button--block': blockElement}" action="closeOverLay()" button-style="link" label-key="" label="Close" type="button">

                    <div class="icon-check umb-button__success -hidden -white" ng-class="{'-hidden': state !== 'success', '-white': style}"></div>
                    <div class="icon-delete umb-button__error -hidden -white" ng-class="{'-hidden': state !== 'error', '-white': style}"></div>
                    <div class="umb-button__progress -hidden -white" ng-class="{'-hidden': state !== 'busy', '-white': style}"></div>

                    <button ng-if="type === 'button'" type="button" class="btn umb-button__button btn-link umb-button--" ng-click="action(model)" hotkey="" hotkey-when-hidden="" ng-disabled="disabled">
                        <span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
                            <span ng-if="!labelKey" class="ng-scope ng-binding">Close</span>
                        </span>
                    </button>

                </div>
                <div class="umb-button ng-scope" ng-class="{'umb-button--block': blockElement}" button-style="success" label-key="" label="Submit" ng-if="model.submit &amp;&amp; model.hideSubmitButton !== true" type="button" disabled="disabled" action="submitForm(model)">

                    <div class="icon-check umb-button__success -hidden -white" ng-class="{'-hidden': state !== 'success', '-white': style}"></div>
                    <div class="icon-delete umb-button__error -hidden -white" ng-class="{'-hidden': state !== 'error', '-white': style}"></div>
                    <div class="umb-button__progress -hidden -white" ng-class="{'-hidden': state !== 'busy', '-white': style}"></div>

                    <button ng-if="type === 'button'" type="button" class="btn umb-button__button btn-success umb-button--" ng-click="action(model)" hotkey="" hotkey-when-hidden="" ng-disabled="disabled">
                        <span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
                            <span ng-if="!labelKey" class="ng-scope ng-binding">Submit</span>
                        </span>
                    </button>

                </div>
            </div>

        </div>
    </div>
</div>

JavaScript

angular.module("umbraco").controller("my.lucide.gridBlock", function ($scope) {

    $scope.blockPickerOverlay = {
        show: false
    };

    $scope.closeOverLay = function () {
        $scope.blockPickerOverlay.show = false;
        $scope.control.value = {};
    };

    $scope.setBlock = function () {
        $scope.blockPickerOverlay.show = true;
    };

});

Manifest:

{
  "gridEditors": [
    {
      "name": "Block",
      "alias": "block",
      "view": "/App_plugins/Block/block.html",
      "render": "/app_plugins/Block/block.cshtml",
      "icon": "icon-firewall"
    }
  ],
  "javascript": [
    "/App_plugins/Block/block.js",
  ],
  "css": [
    "/App_plugins/Block/block.css",
  ]
}

Razor

@inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>

<div class="cntr-image">
    <a href="@Model.link">
        <div class="title"><h3>@Model.textOnImage</h3></div>
        <div class="image"><img src="@Model.linkOfImage" alt=""></div>
    </a>
</div>
<h3>
    <a href="@Model.link">@Model.title</a>
</h3>
<p>@Model.description</p>

@if (!string.IsNullOrWhiteSpace((string)Model.textOnButton) && !string.IsNullOrWhiteSpace((string)Model.link))
{
    <a href="@Model.link" class="btn btn-theme">@Model.textOnButton</a>
}