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 141 posts 448 karma points
    Jan 15, 2020 @ 16:12
    lori ryan
    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

    v8:

    1. https://skrift.io/articles/archive/creating-custom-editor-experiences/
    2. https://our.umbraco.com/apidocs/v8/ui/#/api/umbraco.services.editorService
    3. https://www.youtube.com/watch?v=dVHAEzLem4c

    But couldn't get the media picker to work.

    Appreciate any help you guys can offer and thanks in advance.

  • aviram 3 posts 73 karma points
    Jan 15, 2020 @ 22:15
    aviram
    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/

  • lori ryan 141 posts 448 karma points
    Jan 20, 2020 @ 12:13
    lori ryan
    100

    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

Please Sign in or register to post replies

Write your reply to:

Draft