diff --git a/src/Umbraco.Web.UI.Client/src/common/services/mediahelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/mediahelper.service.js index 953ddf46d9..244573d79c 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/mediahelper.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/mediahelper.service.js @@ -409,6 +409,7 @@ function mediaHelper(umbRequestHelper, $http, $log) { * @param {object} options Object describing image generation parameters: * { * animationProcessMode: + * cacheBusterValue: * focalPoint: { * left: * top: @@ -433,6 +434,7 @@ function mediaHelper(umbRequestHelper, $http, $log) { { imagePath, animationProcessMode: options.animationProcessMode, + cacheBusterValue: options.cacheBusterValue, focalPoint: options.focalPoint, height: options.height, mode: options.mode, diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js index d2b91a3707..957308a111 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js @@ -7,7 +7,7 @@ * A service containing all logic for all of the Umbraco TinyMCE plugins */ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, stylesheetResource, macroResource, macroService, - $routeParams, umbRequestHelper, angularHelper, userService, editorService, entityResource, eventsService, localStorageService) { + $routeParams, umbRequestHelper, angularHelper, userService, editorService, entityResource, eventsService, localStorageService, mediaHelper) { //These are absolutely required in order for the macros to render inline //we put these as extended elements because they get merged on top of the normal allowed elements by tiny mce @@ -298,15 +298,20 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) { var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h); - editor.dom.setAttrib(imageDomElement, 'width', newSize.width); editor.dom.setAttrib(imageDomElement, 'height', newSize.height); // Images inserted via Media Picker will have a URL we can use for ImageResizer QueryStrings // Images pasted/dragged in are not persisted to media until saved & thus will need to be added - if(imgUrl){ - var src = imgUrl + "?width=" + newSize.width + "&height=" + newSize.height; - editor.dom.setAttrib(imageDomElement, 'data-mce-src', src); + if (imgUrl) { + mediaHelper.getProcessedImageUrl(imgUrl, + { + height: newSize.height, + width: newSize.width + }) + .then(function (resizedImgUrl) { + editor.dom.setAttrib(imageDomElement, 'data-mce-src', resizedImgUrl); + }); } editor.execCommand("mceAutoResize", false, null, null); @@ -1495,10 +1500,17 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s }); args.editor.on('ObjectResized', function (e) { - var qs = "?width=" + e.width + "&height=" + e.height + "&mode=max"; var srcAttr = $(e.target).attr("src"); var path = srcAttr.split("?")[0]; - $(e.target).attr("data-mce-src", path + qs); + mediaHelper.getProcessedImageUrl(path, + { + height: e.height, + moded: "max", + width: e.width + }) + .then(function (resizedPath) { + $(e.target).attr("data-mce-src", resizedPath); + }); syncContent(); }); 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 17959b9950..ee71a0d2f2 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 @@ -44,15 +44,22 @@ .controller('Umbraco.PropertyEditors.FileUploadController', fileUploadController) .run(function (mediaHelper, umbRequestHelper, assetsService) { if (mediaHelper && mediaHelper.registerFileResolver) { - - //NOTE: The 'entity' can be either a normal media entity or an "entity" returned from the entityResource + // NOTE: The 'entity' can be either a normal media entity or an "entity" returned from the entityResource // they contain different data structures so if we need to query against it we need to be aware of this. mediaHelper.registerFileResolver("Umbraco.UploadField", function (property, entity, thumbnail) { if (thumbnail) { if (mediaHelper.detectIfImageByExtension(property.value)) { - //get default big thumbnail from image processor - var thumbnailUrl = property.value + "?rnd=" + moment(entity.updateDate).format("YYYYMMDDHHmmss") + "&width=500&animationprocessmode=first"; - return thumbnailUrl; + + // Get default big thumbnail from image processor + return mediaHelper.getProcessedImageUrl(property.value, + { + animationprocessmode: "first", + cacheBusterValue: moment(entity.updateDate).format("YYYYMMDDHHmmss"), + width: 500 + }) + .then(function (url) { + return url; + }); } else { return null; diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js index 574aa87557..1fb8cbe2f2 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js @@ -1,90 +1,97 @@ angular.module("umbraco") .controller("Umbraco.PropertyEditors.Grid.MediaController", - function ($scope, $timeout, userService, editorService) { - - - $scope.thumbnailUrl = getThumbnailUrl(); - - - if (!$scope.model.config.startNodeId) { - if ($scope.model.config.ignoreUserStartNodes === true) { - $scope.model.config.startNodeId = -1; - $scope.model.config.startNodeIsVirtual = true; + function ($scope, userService, editorService, mediaHelper) { - } else { - userService.getCurrentUser().then(function (userData) { - $scope.model.config.startNodeId = userData.startMediaIds.length !== 1 ? -1 : userData.startMediaIds[0]; - $scope.model.config.startNodeIsVirtual = userData.startMediaIds.length !== 1; - }); - } - } - - $scope.setImage = function(){ - var startNodeId = $scope.model.config && $scope.model.config.startNodeId ? $scope.model.config.startNodeId : undefined; - var startNodeIsVirtual = startNodeId ? $scope.model.config.startNodeIsVirtual : undefined; + $scope.thumbnailUrl = getThumbnailUrl(); - var mediaPicker = { - startNodeId: startNodeId, - startNodeIsVirtual: startNodeIsVirtual, - cropSize: $scope.control.editor.config && $scope.control.editor.config.size ? $scope.control.editor.config.size : undefined, - showDetails: true, - disableFolderSelect: true, - onlyImages: true, - dataTypeKey: $scope.model.dataTypeKey, - submit: function(model) { - var selectedImage = model.selection[0]; - - $scope.control.value = { - focalPoint: selectedImage.focalPoint, - id: selectedImage.id, - udi: selectedImage.udi, - image: selectedImage.image, - caption: selectedImage.altText - }; - - editorService.close(); - }, - close: function() { - editorService.close(); + if (!$scope.model.config.startNodeId) { + if ($scope.model.config.ignoreUserStartNodes === true) { + $scope.model.config.startNodeId = -1; + $scope.model.config.startNodeIsVirtual = true; + + } else { + userService.getCurrentUser().then(function (userData) { + $scope.model.config.startNodeId = userData.startMediaIds.length !== 1 ? -1 : userData.startMediaIds[0]; + $scope.model.config.startNodeIsVirtual = userData.startMediaIds.length !== 1; + }); } } - - editorService.mediaPicker(mediaPicker); - }; - - $scope.$watch('control.value', function(newValue, oldValue) { - if(angular.equals(newValue, oldValue)){ - return; // simply skip that - } - - $scope.thumbnailUrl = getThumbnailUrl(); - }, true); - - function getThumbnailUrl() { - if($scope.control.value && $scope.control.value.image) { - var url = $scope.control.value.image; + $scope.setImage = function () { + var startNodeId = $scope.model.config && $scope.model.config.startNodeId ? $scope.model.config.startNodeId : undefined; + var startNodeIsVirtual = startNodeId ? $scope.model.config.startNodeIsVirtual : undefined; - if($scope.control.editor.config && $scope.control.editor.config.size){ - url += "?width=" + $scope.control.editor.config.size.width; - url += "&height=" + $scope.control.editor.config.size.height; - url += "&animationprocessmode=first"; + var mediaPicker = { + startNodeId: startNodeId, + startNodeIsVirtual: startNodeIsVirtual, + cropSize: $scope.control.editor.config && $scope.control.editor.config.size ? $scope.control.editor.config.size : undefined, + showDetails: true, + disableFolderSelect: true, + onlyImages: true, + dataTypeKey: $scope.model.dataTypeKey, + submit: function (model) { + var selectedImage = model.selection[0]; - if($scope.control.value.focalPoint){ - url += "¢er=" + $scope.control.value.focalPoint.top +"," + $scope.control.value.focalPoint.left; - url += "&mode=crop"; + $scope.control.value = { + focalPoint: selectedImage.focalPoint, + id: selectedImage.id, + udi: selectedImage.udi, + image: selectedImage.image, + caption: selectedImage.altText + }; + + editorService.close(); + }, + close: function () { + editorService.close(); } } - // set default size if no crop present (moved from the view) - if (url.indexOf('?') == -1) - { - url += "?width=800&upscale=false&animationprocessmode=false" - } - return url; - } - - return null; - }; + editorService.mediaPicker(mediaPicker); + }; -}); + $scope.$watch('control.value', function (newValue, oldValue) { + if (angular.equals(newValue, oldValue)) { + return; // simply skip that + } + + $scope.thumbnailUrl = getThumbnailUrl(); + }, true); + + function getThumbnailUrl() { + if ($scope.control.value && $scope.control.value.image) { + + var imageOptions; + if (url.indexOf('?') == -1) { + // set default size if no crop present (moved from the view) + imageOptions = { + animationprocessmode : false, + width: 800 + } + } + else { + imageOptions = { + animationprocessmode: "first", + height: $scope.control.editor.config.size.height, + width: $scope.control.editor.config.size.width + }; + + if ($scope.control.value.focalPoint) { + imageOptions.focalPoint = { + left: $scope.control.value.focalPoint.left, + top: $scope.control.value.focalPoint.top + } + imageOptions.mode = "crop"; + } + } + + return mediaHelper.getProcessedImageUrl($scope.control.value.image, imageOptions) + .then(function (url) { + return url; + }); + } + + return null; + }; + + }); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js index e3576426a3..c483e83845 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js @@ -222,9 +222,17 @@ angular.module('umbraco') // they contain different data structures so if we need to query against it we need to be aware of this. mediaHelper.registerFileResolver("Umbraco.ImageCropper", function (property, entity, thumbnail) { if (property.value && property.value.src) { - if (thumbnail === true) { - return property.value.src + "?width=500&mode=max&animationprocessmode=first"; + return mediaHelper.getProcessedImageUrl(property.value.src, + { + animationprocessmode: "first", + mode: "max", + width: 500 + }) + .then(function (url) { + return url; + }); + } else { return property.value.src; diff --git a/src/Umbraco.Web/Editors/ImagesController.cs b/src/Umbraco.Web/Editors/ImagesController.cs index 960b589b6d..bbad627c3b 100644 --- a/src/Umbraco.Web/Editors/ImagesController.cs +++ b/src/Umbraco.Web/Editors/ImagesController.cs @@ -105,17 +105,17 @@ namespace Umbraco.Web.Editors int? focalPointLeft = null, int? focalPointTop = null, string animationProcessMode = "first", - string mode = "crop", + string mode = "max", bool upscale = false, string cacheBusterValue = "") { var options = new ImageUrlGenerationOptions(imagePath) { - AnimationProcessMode = "first", + AnimationProcessMode = animationProcessMode, CacheBusterValue = cacheBusterValue, Height = height, - ImageCropMode = "max", - UpScale = false, + ImageCropMode = mode, + UpScale = upscale, Width = width, }; if (focalPointLeft.HasValue && focalPointTop.HasValue)