Merge pull request #106 from ibrahemomari/design-thumbnail

fix big croped image size
BuildFire · May 23, 2023 · 4874255 · 4874255
2 parents f53f6ea + 4742d22
commit 4874255
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/control/design/index.html b/control/design/index.html
@@ -20,6 +20,8 @@
     <style>
         .thumbnail-border {
             border: 2px solid rgba(0, 0, 0, 0.4);
+            width: 100%;
+            height: 100%;
         }
     </style>
 
@@ -74,7 +76,7 @@
                     <div class="screen mostdevices pull-left text-center">
                         <a class="border-radius-three default-background-hover" ng-click="changeBackground('i3x2')">
                             <span ng-hide="data.design.backgroundImage.i3x2" class="add-icon">+</span>
-                            <img class="thumbnail-border" ng-show="data.design.backgroundImage.i3x2" ng-src="{{cropImage(data.design.backgroundImage.i3x2, 640,960)}}">
+                            <img class="thumbnail-border" ng-show="data.design.backgroundImage.i3x2" ng-src="{{cropImage(data.design.backgroundImage.i3x2, 640,960, 5)}}">
                         </a>
                         <label>3:2</label>
                         <label class="secondary">640x960</label>
@@ -84,7 +86,7 @@
                     <div class="screen iphone pull-left text-center">
                         <a class="border-radius-three default-background-hover" ng-click="changeBackground('i16x9')">
                             <span ng-hide="data.design.backgroundImage.i16x9" class="add-icon">+</span>
-                            <img class="thumbnail-border" ng-show="data.design.backgroundImage.i16x9" ng-src="{{cropImage(data.design.backgroundImage.i16x9, 1242, 2208)}}">
+                            <img class="thumbnail-border" ng-show="data.design.backgroundImage.i16x9" ng-src="{{cropImage(data.design.backgroundImage.i16x9, 1242, 2208 , 20)}}">
                         </a>
                         <label>16:9</label>
                         <label class="secondary">1242x2208</label>
@@ -95,7 +97,7 @@
                     <div class="screen ipads pull-left text-center">
                         <a class="border-radius-three default-background-hover" ng-click="changeBackground('i4x3')">
                             <span ng-hide="data.design.backgroundImage.i4x3" class="add-icon">+</span>
-                            <img class="thumbnail-border" ng-show="data.design.backgroundImage.i4x3" ng-src="{{cropImage(data.design.backgroundImage.i4x3, 1536, 2048)}}">
+                            <img class="thumbnail-border" ng-show="data.design.backgroundImage.i4x3" ng-src="{{cropImage(data.design.backgroundImage.i4x3, 1536, 2048, 20)}}">
                         </a>
                         <label>4:3</label>
                         <label class="secondary">1536x2048</label>
@@ -105,7 +107,7 @@
                     <div class="screen tablets pull-left text-center">
                         <a class="border-radius-three default-background-hover" ng-click="changeBackground('i16x10')">
                             <span ng-hide="data.design.backgroundImage.i16x10" class="add-icon">+</span>
-                            <img class="thumbnail-border" ng-show="data.design.backgroundImage.i16x10" ng-src="{{cropImage(data.design.backgroundImage.i16x10, 1600, 2560)}}">
+                            <img class="thumbnail-border" ng-show="data.design.backgroundImage.i16x10" ng-src="{{cropImage(data.design.backgroundImage.i16x10, 1600, 2560, 20)}}">
                         </a>
                         <label>16:10</label>
                         <label class="secondary">1600x2560</label>
@@ -366,14 +368,14 @@
             }
         };
 
-        $scope.cropImage = function (url, width, height) {
+        $scope.cropImage = function (url, width, height, dividedBy) {
             if (!url) {
                 return "";
             }
             else {
                 let croppedImage = buildfire.imageLib.cropImage(
                     url,
-                    { width, height });
+                    { width: width / dividedBy, height: height / dividedBy });
                 return croppedImage
             }
         };