From 87aeaa8afc84545a448d4595083c98942eee9d13 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 12 Jan 2016 11:35:36 +0100
Subject: [PATCH] set lower image max height and width + fix calculation, make
 use of values in html.

---
 .../components/umbmediagrid.directive.js      | 24 +++++++++++--------
 .../src/views/components/umb-media-grid.html  |  2 +-
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
index 01a127a613..5175dd3b4d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
@@ -7,8 +7,8 @@
 
          var itemDefaultHeight = 200;
          var itemDefaultWidth = 200;
-         var itemMaxWidth = 300;
-         var itemMaxHeight = 300;
+         var itemMaxWidth = 200;
+         var itemMaxHeight = 200;
 
          function activate() {
 
@@ -60,14 +60,18 @@
              item.aspectRatio = item.width / item.height;
 
              // set max width and height
-             if(item.width > itemMaxWidth) {
-                item.width = itemMaxWidth;
-                item.height = itemMaxWidth / item.aspectRatio;
-             }
-
-             if(item.height > itemMaxHeight) {
-                item.height = itemMaxHeight;
-                item.width = itemMaxHeight * item.aspectRatio;
+             // landscape
+             if(item.aspectRatio >= 1) {
+                 if(item.width > itemMaxWidth) {
+                    item.width = itemMaxWidth;
+                    item.height = itemMaxWidth / item.aspectRatio;
+                 }
+            // portrait
+             } else {
+                 if(item.height > itemMaxHeight) {
+                    item.height = itemMaxHeight;
+                    item.width = itemMaxHeight * item.aspectRatio;
+                 }
              }
 
          }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
index f5c53a889e..6036234140 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
@@ -10,7 +10,7 @@
       </div>
 
       <div class="umb-media-grid__image-background" ng-if="item.thumbnail"></div>
-      <img class="umb-media-grid__item-image" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" />
+      <img class="umb-media-grid__item-image" width="{{item.width}}" height="{{item.height}}" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" />
       <img class="umb-media-grid__item-image-placeholder" ng-if="!item.thumbnail" src="assets/img/transparent.png" alt="{{item.name}}" />
 
       <i class="umb-media-grid__item-icon {{ item.icon }}" ng-if="!item.thumbnail"></i>