From 056a5548756803cd29661d65809e42025e08c43c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Mon, 24 Aug 2020 21:38:36 +0200
Subject: [PATCH 1/3] use absolute path for thumbnail and dont scale SVGs

---
 .../components/blockcard/umb-block-card.html  |  2 +-
 .../blockcard/umbBlockCard.component.js       | 32 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

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 @@
 
-    <div class="__showcase" ng-style="{'background-color':vm.blockConfigModel.backgroundColor, 'background-image': vm.blockConfigModel.thumbnail ? 'url('+vm.blockConfigModel.thumbnail+'?upscale=false&width=400)' : 'transparent'}">
+    <div class="__showcase" ng-style="{'background-color':vm.blockConfigModel.backgroundColor, 'background-image': vm.styleBackgroundImage}">
         <i ng-if="vm.blockConfigModel.thumbnail == null && vm.elementTypeModel.icon" class="__icon {{ vm.elementTypeModel.icon }}" ng-style="{'color':vm.blockConfigModel.iconColor}" aria-hidden="true"></i>
     </div>
     <div class="__info">
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+'\')';
+        }
 
     }
 

From 30e6f83358d99a498ebfb0a1dcd18e673ec5f0a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 25 Aug 2020 13:23:11 +0200
Subject: [PATCH 2/3] Update umbBlockCard.component.js

change transparent to none
---
 .../src/views/components/blockcard/umbBlockCard.component.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

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 454d264a89..f1d11e43ff 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
@@ -17,10 +17,9 @@
     function BlockCardController($scope, umbRequestHelper) {
 
         var vm = this;
-        vm.styleBackgroundImage = "transparent";
+        vm.styleBackgroundImage = "none";
 
         var unwatch = $scope.$watch("vm.blockConfigModel.thumbnail", (newValue, oldValue) => {
-            console.log("updateThumbnail")
             if(newValue !== oldValue) {
                 vm.updateThumbnail();
             }
@@ -37,7 +36,7 @@
 
         vm.updateThumbnail = function () {
             if (vm.blockConfigModel.thumbnail == null || vm.blockConfigModel.thumbnail === "") {
-                vm.styleBackgroundImage = "transparent";
+                vm.styleBackgroundImage = "none";
                 return;
             }
 

From eee3d489f1b182db7cec26c66eda64bcef67c2ae Mon Sep 17 00:00:00 2001
From: Warren Buckley <warren@umbraco.com>
Date: Tue, 25 Aug 2020 13:32:05 +0100
Subject: [PATCH 3/3] Update
 src/Umbraco.Web.UI.Client/src/views/components/blockcard/umbBlockCard.component.js

---
 .../src/views/components/blockcard/umbBlockCard.component.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 f1d11e43ff..761e7c28ae 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
@@ -42,7 +42,7 @@
 
             var path = umbRequestHelper.convertVirtualToAbsolutePath(vm.blockConfigModel.thumbnail);
             if (path.toLowerCase().endsWith(".svg") === false) {
-                path += "?upscale=false&width=400)";
+                path += "?upscale=false&width=400";
             }
             vm.styleBackgroundImage = 'url(\''+path+'\')';
         }