Copied to clipboard

Flag this post as spam?

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


  • Julien Kulker 50 posts 273 karma points c-trib
    1 week ago
    Julien Kulker
    0

    Umbraco 8 Backoffice Angular Media items

    Hi all,

    Quick question how should i translate umb://media in the backoffice to a image url with a Angular component(Block list item).

    Thank you in advance

  • Anders Bjerner 443 posts 2545 karma points MVP 4x admin c-trib
    1 week ago
    Anders Bjerner
    0

    Hi Julien,

    You can use the mediaResource resource in Angular:

    https://our.umbraco.com/apidocs/v8/ui/#/api/umbraco.resources.mediaResource

    Usage is something like:

        mediaResource.getById("umb://media/b76ddb4ee603401499066087984740ec")
            .then(function (media) {
                console.log(media);
            });
    
  • Julien Kulker 50 posts 273 karma points c-trib
    1 week ago
    Julien Kulker
    0
        <div class="hero-video">
            <video poster="{{block.data.heroImage}}" id="bgvid" playsinline autoplay muted loop>
                <source src="{{block.data.heroVideo}}" type="video/mp4">
            </video>
        </div>
    

    So i have this small peace of code. How does that work todo some javascript in it?

    I tried this but it results in a error:

    <script>
    mediaResource.getById("umb://media/a2d4ac2297234fbdac2611bba206d202")
            .then(function(media) {
                var myMedia = media;
                alert('its here!');
            });
    

    GET unsafe:umb://media/a2d4ac2297234fbdac2611bba206d202 net::ERRUNKNOWNURL_SCHEME

  • Anders Bjerner 443 posts 2545 karma points MVP 4x admin c-trib
    1 week ago
    Anders Bjerner
    0

    Hi again,

    I'm not sure how much code you have now, but to hook up your view with some JavaScript, you can create an Angular controller. It could look like this:

    angular.module("umbraco").controller("myController", function ($scope, mediaResource) {
    
        $scope.image = null;
    
        mediaResource.getById("umb://media/b76ddb4ee603401499066087984740ec")
            .then(function (media) {
                console.log(media);
                $scope.image = media;
            });
    
    });
    

    The JavaScript file should be registered in Umbraco - you can read more about that here:

    https://our.umbraco.com/Documentation/Extending/Property-Editors/package-manifest

    And then you can replace <div class="hero-video"> with <div class="hero-video" ng-controller="myController">. This ensures that your view is using your new controller.

    When the image/media has been loaded, the URL is available in your view via $scope.image.mediaLink.

  • Julien Kulker 50 posts 273 karma points c-trib
    1 week ago
    Julien Kulker
    0

    you dont give a variable to the controller? how it knows what to do?

  • Julien Kulker 50 posts 273 karma points c-trib
    1 week ago
    Julien Kulker
    0

    So far i have a image working but how to send the value to the controller

  • Gii 3 posts 72 karma points
    5 days ago
    Gii
    0

    Hello Julien.

    This is a sample code to add the image URL and observe the image changes:

    (function () {
    angular.module('umbraco')
        .controller("Custom.BlockList.Controller", function ($scope, mediaResource) {
        })
        .directive("blockListImage", ["mediaResource", function (mediaResource) {
            var config = { attributes: !0 };
    
            function reloadSrc(elem) {
                if (!elem) {
                    return;
                }
    
                var src = elem.getAttribute("data-source");
                if (!src || !/\S/.test(src)) {
                    elem.setAttribute("src", "");
                    return;
                }
    
                mediaResource.getById(src)
                    .then(function (media) {
                        elem.setAttribute("src", media.mediaLink);
                    });
            }
    
            function obsCb(mutations) {
                mutations.forEach(function (mutation) {
                    if (mutation.type === "attributes" && mutation.attributeName === "data-source") {
                        reloadSrc(mutation.target);
                    }
                });
            }
            const observer = new MutationObserver(obsCb);
            function link(scope, elem, attrs) {
                var element = elem[0];
                observer.observe(element, config);              
            }
    
            return {
                link: link
            };
        }]);
    })();
    

    And on your custom HTML:

    <ng-controller ng-controller="Custom.BlockList.Controller">
    <button type="button" ng-click="block.edit()">
        <img block-list-image data-source="{{block.data.image}}" />
    </button></ng-controller>
    

    I'm using a directive to get the image source on the element attribute, then I use mediaResouce service to get the media and set the src to the element.

    This works on my side. Hope this helps you too.

  • Julien Kulker 50 posts 273 karma points c-trib
    3 days ago
    Julien Kulker
    0

    Thank you for the answer well i got it working by doing this.

    angular.module("umbraco").controller("myController", function ($scope, mediaResource) {

    $scope.video = null;
    mediaResource.getById($scope.$parent.$parent.block.data.heroImage)
        .then(function (media) {
            $scope.video = media;
        });
    

    });

    this is not perfect for now it is enough. But when i want a second image to get i can not use the getbyId method. Something with Same action twice.

    how can i fix that?

    Multiple actions were found that match the request: GetById on type
    

    Is there any good content for the old angular a course something i can follow? would make much easier i guess

  • Gii 3 posts 72 karma points
    2 days ago
    Gii
    0

    Hello Julien,

    Sorry, but I can't figure out the issue with that. Can you post the full code of both the controller and the HTML of the view?

    IMO, it's not ideal to use the media resource in the controller especially in case your view needs to display multiple media sources (multimedia picker for example) because you will need to duplicate the "mediaResource.getById" for each media.

    By adding a directive to the DOM element, you can modify it the DOM element anyhow you want and you can reuse your directive on other elements too.

    AngularJS document can be found at: https://docs.angularjs.org/guide/

  • Julien Kulker 50 posts 273 karma points c-trib
    18 hours ago
    Julien Kulker
    0

    Hi @Gii,

    Thank you for your help i know it is not the best option. As long as i have only one Block List Components it works fine.

    As soon as i add a second component a other component

    Header.html

    <div class="hero-video" ng-controller="myController">
        <video poster="{{video.mediaLink}}" id="bgvid" playsinline autoplay muted loop>
            <source src="{{video.mediaLink}}" type="video/mp4">
        </video>
    </div>
    

    Highlight.html

    <div class="column is-two-fifths" ng-controller="myController2">
                <figure class="image is-square">
                    <img src="/images/placeholders/350x350.png">
                </figure>
            </div>
    

    Then i have two controllers

    angular.module("umbraco").controller("myController", function ($scope, mediaResource) {

    $scope.video = null;
    mediaResource.getById($scope.$parent.$parent.block.data.heroImage)
        .then(function (media) {
            $scope.video = media;
        });
    
      });
    

    and i have a second controller.

    angular.module("umbraco").controller("myController2", function ($scope, mediaResource) {
    
    $scope.highlight= null;
    mediaResource.getById($scope.$parent.$parent.block.data.image)
        .then(function (media) {
            $scope.highlight= media;
        });
    
    });
    

    Results: Multiple actions were found that match the request: GetById on type

    Thank you for your help

Please Sign in or register to post replies

Write your reply to:

Draft