diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js
index e9e1e89009..266e34b563 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js
@@ -4,161 +4,164 @@
* @restrict E
**/
angular.module("umbraco.directives.html")
-.directive('umbPhotoFolder', function ($compile, $log, $timeout, $filter, imageHelper) {
+.directive('umbPhotoFolder', function ($compile, $log, $timeout, $filter, imageHelper, umbRequestHelper) {
- return {
- restrict: 'E',
- replace: true,
- require: '?ngModel',
- terminate: true,
- templateUrl: 'views/directives/html/umb-photo-folder.html',
- link: function(scope, element, attrs, ngModel) {
+ function renderCollection(scope, photos) {
+ // get row width - this is fixed.
+ var w = scope.lastWidth;
+ var rows = [];
- function _renderCollection(scope, photos){
- // get row width - this is fixed.
- var w = scope.lastWidth;
- var rows = [];
+ // initial height - effectively the maximum height +/- 10%;
+ var h = Math.max(scope.minHeight, Math.floor(w / 5));
- // initial height - effectively the maximum height +/- 10%;
- var h = Math.max(scope.minHeight,Math.floor(w / 5));
-
+ // store relative widths of all images (scaled to match estimate height above)
+ var ws = [];
+ $.each(photos, function (key, val) {
- // store relative widths of all images (scaled to match estimate height above)
- var ws = [];
- $.each(photos, function(key, val) {
+ val.width_n = $.grep(val.properties, function (v, index) { return (v.alias === "umbracoWidth"); })[0];
+ val.height_n = $.grep(val.properties, function (v, index) { return (v.alias === "umbracoHeight"); })[0];
- val.width_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoWidth");})[0];
- val.height_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoHeight");})[0];
-
- //val.url_n = imageHelper.getThumbnail({ imageModel: val, scope: scope });
-
- if(val.width_n && val.height_n){
+ //val.url_n = imageHelper.getThumbnail({ imageModel: val, scope: scope });
+
+ if (val.width_n && val.height_n) {
var wt = parseInt(val.width_n.value, 10);
var ht = parseInt(val.height_n.value, 10);
-
- if( ht !== h ) {
- wt = Math.floor(wt * (h / ht));
+
+ if (ht !== h) {
+ wt = Math.floor(wt * (h / ht));
}
-
+
ws.push(wt);
- }else{
+ } else {
//if its files or folders, we make them square
ws.push(scope.minHeight);
- }
- });
+ }
+ });
- var rowNum = 0;
- var limit = photos.length;
- while(scope.baseline < limit)
- {
- rowNum++;
- // number of images appearing in this row
- var c = 0;
- // total width of images in this row - including margins
- var tw = 0;
+ var rowNum = 0;
+ var limit = photos.length;
+ while (scope.baseline < limit) {
+ rowNum++;
+ // number of images appearing in this row
+ var c = 0;
+ // total width of images in this row - including margins
+ var tw = 0;
- // calculate width of images and number of images to view in this row.
- while( (tw * 1.1 < w) && (scope.baseline + c < limit))
- {
+ // calculate width of images and number of images to view in this row.
+ while ((tw * 1.1 < w) && (scope.baseline + c < limit)) {
tw += ws[scope.baseline + c++] + scope.border * 2;
- }
+ }
- // Ratio of actual width of row to total width of images to be used.
- var r = w / tw;
- // image number being processed
- var i = 0;
- // reset total width to be total width of processed images
- tw = 0;
+ // Ratio of actual width of row to total width of images to be used.
+ var r = w / tw;
+ // image number being processed
+ var i = 0;
+ // reset total width to be total width of processed images
+ tw = 0;
- // new height is not original height * ratio
- var ht = Math.floor(h * r);
+ // new height is not original height * ratio
+ var ht = Math.floor(h * r);
- var row = {};
- row.photos = [];
- row.style = {};
- row.style = {"height": ht + scope.border * 2, "width": scope.lastWidth};
- rows.push(row);
+ var row = {};
+ row.photos = [];
+ row.style = {};
+ row.style = { "height": ht + scope.border * 2, "width": scope.lastWidth };
+ rows.push(row);
- while( i < c )
- {
+ while (i < c) {
var photo = photos[scope.baseline + i];
// Calculate new width based on ratio
var wt = Math.floor(ws[scope.baseline + i] * r);
// add to total width with margins
tw += wt + scope.border * 2;
- // Create image, set src, width, height and margin
- //var purl = photo.url_n;
- photo.thumbnail = imageHelper.getThumbnail({ imageModel: photo, scope: scope });
- if(!photo.thumbnail){
- photo.thumbnail = "none";
+ //get the image property (if one exists)
+ var imageProp = imageHelper.getImagePropertyValue({ imageModel: photo });
+ if (!imageProp) {
+ //TODO: Do something better than this!!
+ photo.thumbnail = "none";
}
-
- photo.style = {"width": wt, "height": ht, "margin": scope.border+"px", "cursor": "pointer"};
+ else {
+
+ //get the proxy url for big thumbnails (this ensures one is always generated)
+ var thumbnailUrl = umbRequestHelper.getApiUrl(
+ "mediaApiBaseUrl",
+ "GetBigThumbnail",
+ [{ mediaId: photo.id }]);
+ photo.thumbnail = thumbnailUrl;
+ }
+
+ photo.style = { "width": wt, "height": ht, "margin": scope.border + "px", "cursor": "pointer" };
row.photos.push(photo);
i++;
- }
+ }
- // set row height to actual height + margins
- scope.baseline += c;
+ // set row height to actual height + margins
+ scope.baseline += c;
- // if total width is slightly smaller than
- // actual div width then add 1 to each
- // photo width till they match
- i = 0;
- while( tw < w )
- {
+ // if total width is slightly smaller than
+ // actual div width then add 1 to each
+ // photo width till they match
+ i = 0;
+ while (tw < w) {
row.photos[i].style.width++;
i = (i + 1) % c;
tw++;
- }
+ }
- // if total width is slightly bigger than
- // actual div width then subtract 1 from each
- // photo width till they match
- i = 0;
- while( tw > w )
- {
+ // if total width is slightly bigger than
+ // actual div width then subtract 1 from each
+ // photo width till they match
+ i = 0;
+ while (tw > w) {
row.photos[i].style.width--;
i = (i + 1) % c;
tw--;
- }
}
-
- return rows;
}
- ngModel.$render = function() {
- if(ngModel.$modelValue){
-
- $timeout(function(){
- var photos = ngModel.$modelValue;
-
- scope.baseline = element.attr('baseline') ? parseInt(element.attr('baseline'),10) : 0;
- scope.minWidth = element.attr('min-width') ? parseInt(element.attr('min-width'),10) : 420;
- scope.minHeight = element.attr('min-height') ? parseInt(element.attr('min-height'),10) : 200;
- scope.border = element.attr('border') ? parseInt(element.attr('border'),10) : 5;
- scope.clickHandler = scope.$eval(element.attr('on-click'));
- scope.lastWidth = Math.max(element.width(), scope.minWidth);
-
- scope.rows = _renderCollection(scope, photos);
-
- if(attrs.filterBy){
- scope.$watch(attrs.filterBy, function(newVal, oldVal){
- if(newVal !== oldVal){
- var p = $filter('filter')(photos, newVal, false);
- scope.baseline = 0;
- var m = _renderCollection(scope, p);
- scope.rows = m;
- }
- });
- }
-
- }, 500); //end timeout
- } //end if modelValue
-
- }; //end $render
+ return rows;
}
- };
+
+ return {
+ restrict: 'E',
+ replace: true,
+ require: '?ngModel',
+ terminate: true,
+ templateUrl: 'views/directives/html/umb-photo-folder.html',
+ link: function (scope, element, attrs, ngModel) {
+
+ ngModel.$render = function () {
+ if (ngModel.$modelValue) {
+
+ $timeout(function () {
+ var photos = ngModel.$modelValue;
+
+ scope.baseline = element.attr('baseline') ? parseInt(element.attr('baseline'), 10) : 0;
+ scope.minWidth = element.attr('min-width') ? parseInt(element.attr('min-width'), 10) : 420;
+ scope.minHeight = element.attr('min-height') ? parseInt(element.attr('min-height'), 10) : 200;
+ scope.border = element.attr('border') ? parseInt(element.attr('border'), 10) : 5;
+ scope.clickHandler = scope.$eval(element.attr('on-click'));
+ scope.lastWidth = Math.max(element.width(), scope.minWidth);
+
+ scope.rows = renderCollection(scope, photos);
+
+ if (attrs.filterBy) {
+ scope.$watch(attrs.filterBy, function (newVal, oldVal) {
+ if (newVal !== oldVal) {
+ var p = $filter('filter')(photos, newVal, false);
+ scope.baseline = 0;
+ var m = renderCollection(scope, p);
+ scope.rows = m;
+ }
+ });
+ }
+
+ }, 500); //end timeout
+ } //end if modelValue
+
+ }; //end $render
+ }
+ };
});
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/util.service.js b/src/Umbraco.Web.UI.Client/src/common/services/util.service.js
index 43520d8cca..1deb464037 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/util.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/util.service.js
@@ -93,6 +93,11 @@ function imageHelper() {
var imageProp = _.find(props, function (item) {
return item.alias === 'umbracoFile';
});
+
+ if (!imageProp) {
+ return "";
+ }
+
var imageVal;
//our default images might store one or many images (as csv)
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.controller.js
index 702fc8c11d..f8e8981d3b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.controller.js
@@ -13,7 +13,7 @@
* for the editors to check if the value has changed and to re-bind the property if that is true.
*
*/
-function fileUploadController($scope, $element, $compile, imageHelper, fileManager) {
+function fileUploadController($scope, $element, $compile, imageHelper, fileManager, umbRequestHelper) {
/** Clears the file collections when content is saving (if we need to clear) or after saved */
function clearFiles() {
@@ -55,7 +55,13 @@ function fileUploadController($scope, $element, $compile, imageHelper, fileManag
}
_.each($scope.persistedFiles, function (file) {
- file.thumbnail = imageHelper.getThumbnailFromPath(file.file);
+
+ var thumbnailUrl = umbRequestHelper.getApiUrl(
+ "mediaApiBaseUrl",
+ "GetBigThumbnail",
+ [{ originalImagePath: file.file }]);
+
+ file.thumbnail = thumbnailUrl;
});
$scope.clearFiles = false;
diff --git a/src/Umbraco.Web/Editors/MediaController.cs b/src/Umbraco.Web/Editors/MediaController.cs
index 76c6ac135d..4261e65607 100644
--- a/src/Umbraco.Web/Editors/MediaController.cs
+++ b/src/Umbraco.Web/Editors/MediaController.cs
@@ -70,7 +70,7 @@ namespace Umbraco.Web.Editors
///
///
///
- /// If there is no image property then this will return not found.
+ /// If there is no media, image property or image file is found then this will return not found.
///
public HttpResponseMessage GetBigThumbnail(int mediaId)
{
@@ -86,7 +86,21 @@ namespace Umbraco.Web.Editors
}
var imagePath = imageProp.Value.ToString();
- var bigThumbPath = imagePath.Substring(0, imagePath.LastIndexOf('.')) + "_big-thumb" + ".jpg";
+ return GetBigThumbnail(imagePath);
+ }
+
+ ///
+ /// Gets the big thumbnail image for the original image path
+ ///
+ ///
+ ///
+ ///
+ /// If there is no original image is found then this will return not found.
+ ///
+ public HttpResponseMessage GetBigThumbnail(string originalImagePath)
+ {
+ var imagePath = originalImagePath;
+ var bigThumbPath = imagePath.Substring(0, imagePath.LastIndexOf('.')) + "_big-thumb" + ".jpg";
var thumbFilePath = IOHelper.MapPath(bigThumbPath);
if (System.IO.File.Exists(thumbFilePath) == false)
{
@@ -108,7 +122,7 @@ namespace Umbraco.Web.Editors
string.Format("{0}_{1}.jpg", origFilePath.Substring(0, origFilePath.LastIndexOf(".")), "big-thumb"),
Path.GetExtension(origFilePath).Substring(1).ToLowerInvariant(),
mediaFileSystem);
- }
+ }
}
}
@@ -121,6 +135,7 @@ namespace Umbraco.Web.Editors
return result;
}
+
///
/// Gets an empty content item for the
///