Copied to clipboard

Flag this post as spam?

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


  • Elliott Brown 40 posts 210 karma points
    Feb 18, 2017 @ 18:48
    Elliott Brown
    0

    Extend media picker to include link selector

    In my custom grid editor I have a media picker which selects and image and a content picker which selects a node from the tree.

    The desired output is this:

    <a href="@Model.value.linkUrl">
        <img src="@url" alt="@Model.value.caption">
    </a>
    

    if I choose an image and hit save, the image displays as it should on the web page.

    If i select the link button and pick a 'node' from the tree, the image disappears from the back office and the resulting code is

    <a href="3020">
        <img alt="@Model.value.caption">
    </a>
    

    As you can see, it's set the link url in the

    My code is as follows:

    editor.controller.js

    // Media Picker
    
    angular.module("umbraco").controller("emailMediaPicker.controller",       function ($scope, $rootScope, $timeout, dialogService) {
    
    $scope.setImage = function () {
    
        dialogService.mediaPicker({
            startNodeId: $scope.control.editor.config && $scope.control.editor.config.startNodeId ? $scope.control.editor.config.startNodeId : undefined,
            multiPicker: false,
            cropSize: $scope.control.editor.config && $scope.control.editor.config.size ? $scope.control.editor.config.size : undefined,
            showDetails: true,
            callback: function (data) {
    
                $scope.control.value = {
                    image: data.image
                };
    
                $scope.setUrl();
            }
        });
    };
    
    $scope.setUrl = function () {
    
        if ($scope.control.value.image) {
            var url = $scope.control.value.image;
    
            if ($scope.control.editor.config && $scope.control.editor.config.size) {
                url += "?width=" + $scope.control.editor.config.size.width;
                url += "&height=" + $scope.control.editor.config.size.height;
    
                if ($scope.control.value.focalPoint) {
                    url += "&center=" + $scope.control.value.focalPoint.top + "," + $scope.control.value.focalPoint.left;
                    url += "&mode=crop";
                }
            }
            $scope.url = url;
        }
    };
    
     //Set image link
    
    $scope.setImageLink = function () {
        $scope.control.value = { linkUrl: "linkUrl" };
        console.log("Before linkUrl =" + $scope.control.value.linkUrl);
        dialogService.contentPicker({
            startNodeId: $scope.control.editor.config && $scope.control.editor.config.startNodeId ? $scope.control.editor.config.startNodeId : undefined,
            multiPicker: false,
            showDetails: true,
            callback: function (node) {             
                $scope.control.value = {
                    id: node.id
                };
                $scope.control.value.linkUrl = node.id;
            }
    
    
        });
    
    };
    
    $timeout(function () {
        if ($scope.control.$initializing) {
            //$scope.setImage();
        } else {
            $scope.setUrl();
        }
    }, 200);
    });
    

    view page .html

    <div ng-controller="emailMediaPicker.controller">
    <div class="umb-editor-placeholder" ng-click="setImage()" ng-if="control.value === null">
        <i class="icon icon-picture"></i>
        <div ng-id="!control.$inserted" class="help-text"><localize key="grid_clickToInsertImage">Click to insert image</localize></div>
    </div>
    <div ng-if="control.value">
    
    <!--This is the media picker-->
        <img ng-if="url" ng-click="setImage()" ng-src="{{url}}" ng-model="control.value.image" class="fullSizeImage" />
    
        <!--This is the link picker-->
        <button ng-click="setImageLink()" ng-model="control.value.linkUrl">{{control.value.linkUrl}} - Selected</button>
    
    </div>
    <umb-overlay ng-if="mediaPickerOverlay.show"
                 model="mediaPickerOverlay"
                 view="mediaPickerOverlay.view"
                 position="right">
    </umb-overlay>
    
    </div>
    

    Thanks for your help. :)

  • Marc Goodson 2123 posts 14214 karma points MVP 8x c-trib
    Feb 18, 2017 @ 23:07
    Marc Goodson
    1

    Hi Elliot

    You'll probably want to make use of the contentResource getNiceUrl method:

    https://our.umbraco.org/apidocs/ui/#/api/umbraco.resources.contentResource#methods_getniceurl

    this enables you to get the Url for a given content nodeid.

    first inject the contentResource into your controller

    angular.module("umbraco").controller("emailMediaPicker.controller",       function ($scope, $rootScope, $timeout, dialogService,contentResource) {
    

    then when you have your node.id...

    contentResource.getNiceUrl(node.id).then(function (url) {
           $scope.control.value.linkUrl = url;
       });
    

    that should return the published url of the node you have picked.

  • Elliott Brown 40 posts 210 karma points
    Feb 19, 2017 @ 15:18
    Elliott Brown
    0

    Thanks Marc, but unfortunately that doesn't solve my problem. Rendering the node.id as a url is a secondary issue to the image src="" reference disappearing.

    With your solution I still end up with:

    <a href="/page-selected-to-link-to">
        <img alt="@Model.value.caption">
    </a>
    

    As you can see I still have no image link. The output I want is as follows:

    <a href="/page-selected-to-link-to">
        <img src="/media/1028/some-image-name.png" alt="@Model.value.caption">
    </a>
    

    I assume there is a conflict in my code. I don't presume what I'm trying to do is that difficult, but when i choose a link after setting the image, the image disappears. If I don't set a link, there's no problem, however I don't get to add a link. :/

  • Marc Goodson 2123 posts 14214 karma points MVP 8x c-trib
    Feb 19, 2017 @ 17:39
    Marc Goodson
    100

    Hi Elliott

    Apologies I think I completely misread the question!

    is it that ?

    $scope.setImageLink = function () {
        $scope.control.value = { linkUrl: "linkUrl" };
    

    is wiping out the previously set image property of value... add

    console.log($scope.controlvalue);
    

    after each interaction and you will see where the image property is disappearing

    try

    $scope.setImageLink = function () { $scope.control.value.linkUrl = linkUrl";

    and in the contentpicker callback

     $scope.control.value.id = node.id;
     $scope.control.value.linkUrl = node.id;
    

    this way you keep the previous value of

     $scope.control.value.image
    

    after a link is picked!

  • Elliott Brown 40 posts 210 karma points
    Feb 19, 2017 @ 18:26
    Elliott Brown
    1

    Thanks, I just arrived at that conclusion myself!

    So yes! It was forgetting it!

    I set the url as a global variable and restated the value of the variable in setImageLink function and voila! :)

    Thank you for your help, I'm on a miniature high right now as this has been, this has been 4 days of pain for me! haha.

  • Marc Goodson 2123 posts 14214 karma points MVP 8x c-trib
    Feb 19, 2017 @ 21:16
    Marc Goodson
    0

    Hi Elliott

    Great when it works :-)

    sorry I didn't spot it on the first pass!

    regards

    Marc

Please Sign in or register to post replies

Write your reply to:

Draft