yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

set lower image max height and width + fix calculation, make use of values in html.

Browse Source
This commit is contained in:
Mads Rasmussen
2016-01-12 11:35:36 +01:00
parent 1bf470c0aa
commit 87aeaa8afc
2 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
View File

@@ -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;
}
}
}

2
src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
View File

@@ -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>