sort and display uniformly

dashboard-ui/scripts/itemlistpage.js

@@ -1,5 +1,5 @@
 var ItemListPage = {
-  
+
     onPageShow: function () {
 
         ItemListPage.reload();
@@ -11,33 +11,38 @@
 
         var parentId = getParameterByName('parentId');
 
-        var query = {};
+        var query = {
-        
+            SortBy: "SortName",
+            
+            Fields: "PrimaryImageAspectRatio"
+        };
+
         if (parentId) {
             query.parentId = parentId;
-            
+
             ApiClient.getItem(userId, parentId).done(ItemListPage.renderTitle);
         }
 
         ApiClient.getItems(userId, query).done(ItemListPage.renderItems);
     },
-    
+
-    renderItems: function(result) {
+    renderItems: function (result) {
 
         var items = result.Items;
 
         var renderOptions = {
-          
+
-            items: items
+            items: items,
+            useAverageAspectRatio: true
         };
 
         var html = Dashboard.getPosterViewHtml(renderOptions);
 
         $('#listItems', $.mobile.activePage).html(html);
     },
-    
+
     renderTitle: function (item) {
-        
+
 
         $('#itemName', $.mobile.activePage).html(item.Name);
     }

dashboard-ui/scripts/site.js

@@ -423,10 +423,14 @@ var Dashboard = {
 
     getPosterViewHtml: function (options) {
 
+        var items = options.items;
+
+        var primaryImageAspectRatio = options.useAverageAspectRatio ? Dashboard.getAveragePrimaryImageAspectRatio(items) : null;
+
         var html = "";
 
-        for (var i = 0, length = options.items.length; i < length; i++) {
+        for (var i = 0, length = items.length; i < length; i++) {
-            var item = options.items[i];
+            var item = items[i];
 
             var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary;
 
@@ -446,11 +450,17 @@ var Dashboard = {
                     tag: item.BackdropImageTags[0]
                 }) + "' />";
             } else if (hasPrimaryImage) {
+
+                var height = 300;
+                var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null;
+                
                 html += "<img src='" + ApiClient.getImageUrl(item.Id, {
                     type: "Primary",
-                    height: 300,
+                    height: height,
+                    width: width,
                     tag: item.ImageTags.Primary
                 }) + "' />";
+                
             }
             else if (item.BackdropImageTags && item.BackdropImageTags.length) {
                 html += "<img src='" + ApiClient.getImageUrl(item.Id, {
@@ -480,6 +490,27 @@ var Dashboard = {
 
         return html;
     },
+    
+    getAveragePrimaryImageAspectRatio: function(items) {
+
+        var total = 0;
+        var count = 0;
+        
+        for (var i = 0, length = items.length; i < length; i++) {
+            
+            var ratio = items[i].PrimaryImageAspectRatio || 0;
+
+            if (!ratio)
+            {
+                continue;
+            }
+
+            total += ratio;
+            count++;
+        }
+        
+        return count == 0 ? 1 : total / count;
+    },
 
     showUserFlyout: function () {