diff --git a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html index 486bcbda4a..225362f4d8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html @@ -1,5 +1,5 @@ -
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js index c0758aa2df..454d264a89 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js +++ b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js @@ -14,9 +14,39 @@ } }); - function BlockCardController() { + function BlockCardController($scope, umbRequestHelper) { var vm = this; + vm.styleBackgroundImage = "transparent"; + + var unwatch = $scope.$watch("vm.blockConfigModel.thumbnail", (newValue, oldValue) => { + console.log("updateThumbnail") + if(newValue !== oldValue) { + vm.updateThumbnail(); + } + }); + + vm.$onInit = function () { + + vm.updateThumbnail(); + + } + vm.$onDestroy = function () { + unwatch(); + } + + vm.updateThumbnail = function () { + if (vm.blockConfigModel.thumbnail == null || vm.blockConfigModel.thumbnail === "") { + vm.styleBackgroundImage = "transparent"; + return; + } + + var path = umbRequestHelper.convertVirtualToAbsolutePath(vm.blockConfigModel.thumbnail); + if (path.toLowerCase().endsWith(".svg") === false) { + path += "?upscale=false&width=400)"; + } + vm.styleBackgroundImage = 'url(\''+path+'\')'; + } }