Copied to clipboard

Flag this post as spam?

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


  • Johannes Lantz 55 posts 260 karma points
    Sep 18, 2020 @ 11:23
    Johannes Lantz
    0

    Image in custom block editor view

    Hi!

    I am trying to display a image in a custom html view, for the new block editor. But I am only getting the udi from the block.data.image Anyone have any ideas?

    //Johannes

  • Marc Goodson 1305 posts 8821 karma points MVP 5x c-trib
    Sep 18, 2020 @ 20:27
    Marc Goodson
    101

    Hi Johannes

    To achieve this you need to add a custom angularJS controller to your custom view, where you can then use the mediaResource to retrieve details of the media item from the Udi.

    So first off we need to tell Umbraco to load the custom AngularJS controller, create a folder in your /App_Plugins/ folder for your custom block eg

    /App_Plugins/CustomBlock/

    in here create a file called package.manifest

    (Umbraco looks for all package.manifest files in the app_plugins folder during startup, and loads any resources they specify)

    in your package.manifest add a reference to your custom controller eg

    {
      "javascript": [
        "~/App_Plugins/CustomBlock/customBlock.controller.js"    
      ]  
    }
    

    (that is all you need)

    Now create your customBlock.controller.js file in your CustomBlock folder, and add the following angular controller definition, note how we 'inject' the mediaResource service:

    angular.module("umbraco").controller("customBlockController", function ($scope, mediaResource) {
    
        //your property is called image so the following will contain the udi:
        var imageUdi = $scope.block.data.image;
    //the mediaResource has a getById method:
        mediaResource.getById(imageUdi)
            .then(function (media) {
                console.log(media);
                 //set a property on the 'scope' for the returned media object
                $scope.image = media;
        });    
    });
    

    Finally you need to wire up the custom view that you picked for your block with this angular controller, which you can do using the ng-controller attribute eg:

    <div ng-controller="customBlockController" ng-click="block.edit()"> 
        <img src="{{image.mediaLink}}" />
    </div>
    

    That's the gist of it anyway!

    regards

    Marc

  • Johannes Lantz 55 posts 260 karma points
    Sep 18, 2020 @ 20:44
    Johannes Lantz
    0

    Thank you so much Marc! You are a life saver! But is this really how the block editor is suppose to work? It feels a bit "unfinished" by having to create a controller for it ect.

    //Johannes

  • Marc Goodson 1305 posts 8821 karma points MVP 5x c-trib
    Sep 20, 2020 @ 07:04
    Marc Goodson
    1

    Hi Johannes

    Don't worry.. nothing is ever "finished"!

    Adding the controller in just gives you the flexibilty to do 'anything'.

    Umbraco tends to have the philosophy of releasing things when they are 'improvements' to what currently exists, rather than final features that have implemented every scenario... which can feel frustrating sometimes, but also is really efficient, as it's only when people use things in the real world that the feedback of what is 'next' becomes obvious!

    I'm sure it will evolve further as people begin to use it, but it would be good feedback to add to the issue tracker, that having a bunch of block editor preview 'helpers' to achieve common tasks, eg fetching an image from a udi... would be really useful and prevent everyone writing the same code over and over!

    regards

    Marc

    regards

    Marc

Please Sign in or register to post replies

Write your reply to:

Draft