media picker custom grid controls - Using Umbraco and getting started

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

lori ryan 239 posts 573 karma points

Jan 15, 2020 @ 16:12
0

Media Picker - Custom Grid Controls
Hi Just wondering if I could get some help. I am trying to develop some custom grid controls. I would like to add either the media picker or image cropper into the control.

I've been looking at the following answer from Christian Haase (https://our.umbraco.com/forum/extending-umbraco-and-using-the-api/97499-media-picker-in-grid-editor)
```
$scope.showMediaPicker = function () {
    var mediaPickerOptions = {
        multiPicker: false,
        show: false,
        submit: function (model) {
            var data = model.selection[0];
            setImage(data)
            editorService.close();
        },
        close: function () {
            editorService.close();
        }
    }

    editorService.mediaPicker(mediaPickerOptions);
}

function setImage(image) {
    if (!image) {
        $scope.control.value.imageId = 0;
        $scope.image = null;
        $scope.imageUrl = null;
        return;
    }
    $scope.control.value.imageId = image.id;
    $scope.image = image;
    $scope.imageUrl = (image.image ? image.image : mediaHelper.resolveFileFromEntity(image)) + '?width=' + 500 + '&mode=crop';
}
```
Ive added this into the controller on my custom control. However just wondering how should the html look. I cant get it to show the mediaPickerOverlay.

Any help on this would be fantastic. Ive read through a lot of articles but they are mostly for v7
- https://skrift.io/articles/archive/how-to-create-custom-editors-for-the-umbraco-grid/
- https://abrowndev.co.uk/blog/creating-a-custom-grid-editor/
v8:
But couldn't get the media picker to work.

Appreciate any help you guys can offer and thanks in advance.
Copy Link
aviram 3 posts 73 karma points

Jan 15, 2020 @ 22:15

0

hey, i think this article may help u to understand more of what u are trying to do. it can explain how to hide/uhide some items of the html. hope it helps. good luck. https://24days.in/umbraco-cms/2016/custom-list-view-layouts/

Copy Link

lori ryan 239 posts 573 karma points

Jan 20, 2020 @ 12:13

I got there in the end. Any comments on code more than welcome.

The user is presented with an option to float the image left or right, description and the media box (like the media controller

Controller

  angular.module("umbraco").controller("FloatImage", function ($scope, $rootScope, $timeout, editorService, mediaHelper) {

    $scope.checkboxModel = {
        Float: 'Yes'
    };


    $scope.add = function ($event) {
        var mediaPickerOptions = {
            multiPicker: false,
            show: false,
            submit: function (model) {
                var data = model.selection[0];
                setImage(data)
                editorService.close();
            },
            close: function () {
                editorService.close();
            }
        }


        function setImage(image) {
             $scope.control.value.myImageUrl = image.image;
        }
        editorService.mediaPicker(mediaPickerOptions);
    }


    $scope.remove = function ($event) {
        $scope.control.value.myImageUrl = "";
    }
})

Html

<div ng-controller="FloatImage" class="styledHeadingcontroller umb-property-editor umb-mediapicker umb-mediapicker-single">
    <h4> Wrap Text Around Image</h4>
    Float image Right? <input type="checkbox" ng-model="control.value.Float"><br />

    Text:<br />
    <textarea ng-model="control.value.description" cols="80" rows="10" /><br />

    <p>Choose Image</p>
    <div data-element="sortable-thumbnails" class="flex flex-wrap error" ng-if="control.value.myImageUrl">
        <ul class="umb-sortable-thumbnails">
            <li class="umb-sortable-thumbnails__wrapper" ng-click="add()">
                <img ng-src="{{control.value.myImageUrl}}" alt="">
                <div class="umb-sortable-thumbnails__actions">
                    <a class="umb-sortable-thumbnails__action -red" href="" ng-click="remove()">
                        <i class="icon icon-delete"></i>
                    </a>
                </div>
            </li>
        </ul>
    </div>

    <div data-element="sortable-thumbnails" class="flex flex-wrap error" ng-hide="control.value.myImageUrl">
        <ul ui-sortable="sortableOptions" class="umb-sortable-thumbnails ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty">
            <li style="border: none;" class="add-wrapper unsortable ng-scope">
                <a href="#" class="add-link add-link-square" ng-click="add()" prevent-default>
                    <i class="icon icon-add large"></i>
                </a>
            </li>
        </ul>
    </div>


</div>

cshtml

    @if (Model.value.Float == "true")
{

    <p class="psStyledFloatedImage">
        <img src="@Model.value.myImageUrl" alt="" class="img-fluid-half right" >
        @Model.value.description
    </p>
}
else
{
    <p class="psStyledFloatedImage">
        <img src="@Model.value.myImageUrl" alt="" class="img-fluid-half left" >
        @Model.value.description
    </p>
}

For anyone looking to create this highly recommend Paul Seals series on creating property editors https://www.youtube.com/watch?v=hqdyz8toI2g

And to look at the umbraco code base https://github.com/umbraco/Umbraco-CMS/blob/650ef397802a5282b61191783dab0d5eb41b5d00/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js

Copy Link

Stephen Garside 6 posts 75 karma points

Jan 12, 2024 @ 12:45

0

Lori, thanks for sharing this, saved me loads of time!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Media Picker - Custom Grid Controls