Copied to clipboard

Flag this post as spam?

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


  • Dimitar Dimitrov 8 posts 78 karma points
    Jun 22, 2021 @ 18:37
    Dimitar Dimitrov
    0

    Block list custom preview

    Hello. I have probably stupid question but I had not found any materials about the topic. The case is that I have block list which accept element with field media picker 3 /the new one from v8.14/ and I try to implement angular view to have preview in the backoffice but when I get the object for image it has only mediaKey I try to get media item by using mediaResource in angular controller but nothing. I saw that mediaResource accept int id. Please if someone can give me some direction Ill appreciate

  • Bo Jacobsen 608 posts 2406 karma points
    Jun 22, 2021 @ 19:05
    Bo Jacobsen
    0

    So mediaResource.getById only returns a key?

    You could also try entityResource.getById, but cant remember if thats get directly from the database.

    mediaResource.getById(1234)
        .then(function(media) {
            console.log(media);
        });
    
    entityResource.getById(1234, "Media")
        .then(function(ent) {
            console.log(ent);
        });
    
  • Dimitar Dimitrov 8 posts 78 karma points
    Jun 22, 2021 @ 19:25
    Dimitar Dimitrov
    0

    @Bo Jacobsen Probably I did not wrote the question right. I have block list with elemnt inside which elemnt contain one property media picker in the preview I set div tag to show me the object which I get from block.data and the media item has only 4 properties the two of them was key mediaKey and the others was type or smth like that

  • Bo Jacobsen 608 posts 2406 karma points
    Jun 22, 2021 @ 21:49
    Bo Jacobsen
    0

    Okay, you need to make your own preview controller and get all the data you need and display.

    A better description is here https://our.umbraco.com/Documentation/Fundamentals/Backoffice/property-editors/built-in-property-editors/Block-List-Editor/

    // Preview html
    <div ng-controller="customBlockController" ng-click="block.edit()">
        <h2 ng-bind="block.data.headline"></h2>
        <img src="{{imageUrl}}" />
        <p ng-bind="block.data.description"></p>
    </div>
    
    // Preview Controller
    angular.module("umbraco").controller("customBlockController", function ($scope, mediaResource,imageUrlGeneratorResource) {
    
        //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) {
                    imageUrlGeneratorResource.getCropUrl(media.mediaLink, 150, 150).then(function (cropUrl) {
                    console.log(cropUrl);
                    $scope.imageUrl = cropUrl;
                });
        });    
    });
    
    // Preview package.manifest
    {
      "javascript": [
        "~/App_Plugins/CustomBlockView/customBlock.controller.js"    
      ]  
    }
    
Please Sign in or register to post replies

Write your reply to:

Draft