Sign in Register
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

    Copy Link
  • Bo Jacobsen 610 posts 2409 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);
    });
    Copy Link
  • 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

    Copy Link
  • Bo Jacobsen 610 posts 2409 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"    
  ]  
}
    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies